How to size images for your website so that it looks good — always

Pratyush Goel
Pratyush Goel

Wrong image size breaks the entire layout.

If you want to have a clean, professional and aesthetic website, start using aspect ratios.

Variable size images lead to annoying shifts during (and after) loading -

To fix this, bound the image in a box of a fixed aspect ratio (with a subtle loading animation) and let the image load in it -

This not only prevents those annoying shifts but also -

  • gives the user a visual clue that something is loading

  • leads to higher satisfaction and lower bounce rates

  • makes your website professional and aesthetic

And you don’t need to guess which ratios to use. Use ratios that are tried and tested to look good. Like, 16:9, 5:4, 4:3, 3:2 for landscape and 4:5, 3:4, 2:3 for portrait.

This way you will have more control over your website’s look and feel.

Sometimes however, you will get in a situation where the image by default isn’t appearing the way you wanted in the box.

Say you want to show a pizza in your blog -

This is how it will look it will look in a box of 3:2 ratio -

But say you wanted to maintain the empty space on the left. If you have access to the website code, you could do this by setting object-position: left;

But what if you don’t have access to the code? Or what if you don’t want to change it for just one image (which usually is the case majority of the time)?

For these moments, basics of Canva or Figma will come in handy.

I use Figma, and here’s how you can achieve the desired view in the simplest manner -

1. Create a frame of the target aspect ratio

Press “f” on your keyboard and create a frame. Adjust the width and height from the right panel to make it of the target aspect ratio.

Pro tip: Keep the width more than 1080 for HD pictures.

2. Insert your image

  1. Press “Ctrl + Shift + K” on Windows or “Cmd + Shift + K” on Mac

  2. Select your image

  3. Click inside the frame

3. Open crop mode

Double click the image and select crop mode.

4. Position the image

Now you can position the image to achieve the look you want.

Once happy, press “Esc” to exit the crop mode.

If you want to enlarge / shrink the image, press “K” on your keyboard to activate scale mode and resize the image from the corners. You can also move the image around to adjust the position. (Press "V” to exit the scale mode)

5. Export the new image

Select the frame (not the image) and export it from the last option in the right side menu.

Select PNG for good quality and optionally export it at 2x for a higher resolution image.

There you go!

Now you can use this simple 5 step technique to achieve the desired look for all the images of your website.

Moving next, if you want to know the best method to make contact form of your website so that you leave a solid impression on your clients and get them to trust you, check out this step by step guide.