Choosing the right image

Choosing the right images for your website is not as easy as it looks. The first thing you need to realize is that not all images are created equal. Just because an image looks good doesn’t mean it will fit into your website’s design. You need to also consider aspect ratio and image size.

THE BASICS

The first thing to understand is that most pictures fall into one of two orientations; Portrait and Landscape. The only exception is a square image.

Portrait images are taller than they are wide. Landscape images are wider than they are tall. Your website will usually require one or the other. You should consider this firstly. The most commonly used orientation is landscape.

Portrait Orientation

Landcape Orientation

Once you’ve decided on the orientation of your image, it’s time to think about its size and shape.

Put simply:

Image size will determine how big or small the image is on a page.

Aspect ratio is the proportional relationship between its width and height and will determine its shape.

IMAGE SIZE

The dimensions of your image is image size. To determine proper image size you need to consider how much space you want the image to take up. If the image is part of your content, you have a little more freedom in this usually. If your website has a big image at the top of the page and it’s responsive to the browser width, you may only be able to consider height.

160x120

320x240

560x420

The above images are all exactly the same shape, just different dimensions. A logo probably wouldn’t need to take up half the width of your page, but the main photo for a blog post might have different requirement.

How your website uses an image is a big factor in choosing image size. Does your site use the same image to make thumbnails, header graphics and graphic to use in posts? The important thing to remember is that you can shrink and image, but enlarging an image can cause pixelation and cause you image to look blurry. So think about an image’s use before settling on its size.

ASPECT RATIO

Aspect ratio is the shape of your image. TV’s are a great way to think about aspect ratio. Remember old televisions? They had a 4:3 ratio. New televisions have a 16:9 ratio. They’re different shapes. Do you watch old tv shows on a newer tv? The black bars on the side of the show are there because the tv show (image) doesn’t fit correctly in the new tv. Sometimes the tv show fills up the whole space but is hides some the tv show’s image.

This is a good time to consider all your uses for the same image. Your website might ask you to pick a single image for multiple uses. Your image might be used as a thumbnail (old tv show) on a blog page, but also as a large image on the post (new tv show). This is where you would apply aspect ratios to your image choice.

All three of those images above are the same aspect ratio, 4:3, meaning the height of the image is one quarter less than the width.

By changing the aspect ratio, you can change the image’s shape.

PICKING THE RIGHT IMAGE

Aspect ratio and image size have a big impact on image choice. We can’t just throw any old image onto a website and expect them to look good.

Let’s consider a website that uses one image to be used in multiple instances.

  • Large header graphic (1200×800 3:2)
  • Small thumbnail graphic 80×160 2:1)
  • Social media graphic (320×320 1:1)

NOTE: Most websites that use a single image crop from the center of the image out.

First let’s determine a suitable image size. Which image is the largest, since reducing an image is preferable to enlarging an image. That’s the large header graphic, so we know how large the image has to 1200 pixels wide by 800 pixels tall. This will have enough pixel information to reduce to the thumbnail and social media graphic. Any image less than this size should be removed from consideration.

Secondly you want to choose an image where the subject matter will not get cropped out when you’re website processes the image. Consider the images below. The first three show the aspect ratios of the individual graphics. The fourth shows the header, thumbnail and social aspect ratios stacked on each other. You’re subject matter will have to fit into the area where they all intersect.

So let’s see some examples using these ratios.

If we overlay our ratios onto this image, you can see that the subject matter is centered reasonably within the section where the aspect ratios overlay.

This image seems like it will work just fine, until we put the overlays on it. the basket of eggs would get cut off in a way that would look bad.

This image seems like it wouldn’t work; it’s not even the right orientation to begin with. And yet it does work.

With some practice at this you’ll be able to spot photos that work much more easily than the stabs in the dark you may have been taking.