Choosing Your Images, Image Aspect Ratio And Image Scaling

TC Updated
Choosing Your Images, Image Aspect Ratio And Image Scaling

What's the difference between a cook and a chef? The cook does it for the love of cooking or out of necessity, whereas a chef does it for the money. I can always tell when an eCommerce website has been homespun by an amateur or made professionally by a digital agency. The difference is night and day to the trained eye.

Using an eCommerce website builder is a great start, but it's when you have to start replacing the original images that most people come unstuck. Here's my guide to choosing images for your eCommerce site and sizing them like a Pro.

Image aspect ratio & scaling

Image Selection

Where will you source your images? Are you going to use the same stock product photography like everyone else or can you afford to spring for a photo shoot? On eCommerce websites, the quality of the images will make or break the site, so if you are selling your products, then it's worthwhile taking the time to shoot them accurately.

There is a lot of free stock photography available, but that means it's open to everyone else as well. Hunting down suitable images can be a long, arduous process so don't underestimate the time involved with this. It may be cheaper to spend a day of your time organising a professional photo shoot.

See My Guide To Finding Royalty Free Stock Images

If you are drop shipping products, then consider contacting the original product manufacturer and asking them for access to their image library. More and more companies are organising their digital assets online, and they may be able to give you access.

The best file type for product images is .jpg; Don't mix file types as it causes problems with finding files, batch processing and is disorderly.

Use PNG files for text or text and image graphics. PNG gives better compression and prevents text from having those rough edges.

JPG creates files that are compressed to store a lot of information in a small size file and should be the default choice.

Avoid GIF's as they have a limited colour range and they don't compress as well as a JPG.

Image Sizing

What Is Image Size?

Image size is merely the dimensions of your image expressed in pixels, width x height, the individual squares that make up the image.

The golden rule of image sizing is that you should always use the biggest size image available and then reduce it down to the exact size the page will display. You can still reduce in size, but you can't go the other way. Unless it's tiny adjustments, scaling up from small images to large is an amateur mistake. You will lose a lot of the resolution, and the image will appear blurry or fuzzy. It will become pixelated — a drunk image.

Likewise, using a large image in the URL but then specifying the smaller size it should display at in the image dimensions is a faux pas. The browser will do the work of scaling your original image to the size you specified, but you'll still incur the bandwidth cost of transferring the original image size. That means you'll pay the penalty for site speed.

Use Google Page Insights To Test Your Site Speed And Get Recommendations

Wherever possible, you should take the time to make images in the exact dimensions you want to display them. Using one large image and then relying on the browser to scale it to fit the displayed size is shoddy work unless you are purposely using built-in scaling options.

And this is where image aspect ratio and image scaling can get complicated because all the best website builders use built-in scaling to manipulate their images. By utilising server-based tools like PHP ImageMagick, images can be copied, resized on the fly, borders added and you can apply any number of resampling features without altering the original image. The advantage of automatically scaling images is obvious - you don't have to create many instances of a single image to display it in many different sizes. The disadvantage is that automatic scaling ignores aspect ratio. If you use the wrong aspect ratio or don't understand how aspect ratio works, then you'll create a Picasso that everybody hates.

Image Aspect Ratio

Aspect ratio is critical; it is the relationship between the width and height of the image expressed as a scale. Digital cameras shoot images that are typically 4:3 aspect ratio. The widescreen TV uses a 16:9 aspect ratio.

4:3 Aspect Ratio

All images have a fixed aspect ratio. The only way to change it is to crop the image. So to please the lazy website designer, programs have come up with ingenious ways of cropping images on the fly and scaling them to fit, indiscriminately amputating legs and severing heads in the process.

I'm going to tell you something that will make your life a whole lot more comfortable as an eCommerce entrepreneur. Come closer; I want to whisper in your ear...

Use 1:1 aspect ratio for all your product images. A square box. Most good digital cameras will allow you to change the aspect ratio of images by using the camera's settings menu.

There are good reasons why you should use this aspect ratio. If you choose differently or even don't choose at all, you will experience what I shall call Proportionate Misery.

You express proportionate misery as a percentage depending on how many images you have on your site. The more images, the more misery you will experience in proportion!

  • Unfortunately, using 1:1 aspect ratio is not sexy. After all, you are displaying everything in square boxes, but when scaling this aspect ratio on the fly, everything sits in the correct proportion. Using 1:1 aspect ratio will preserve the margin, and the primary image focus remains intact.
  • It eliminates confusion and speeds up the image sourcing process. It doesn't matter whether a picture is a landscape or portrait, as long as you can retain the central image then squarely cropping it will make it usable anywhere.

Let's give you an example:

swimmer 600x300 2:1 Aspect Ratio

This image is 600x300px a 2:1 aspect ratio. To make it fit a 300px wide space and maintain the aspect ratio, we would end up with a 300x150px image like this:

swimmer 300x150

But what if our image needed to fit a 300x300 space? Automatically scaling the image would create a stretched image on the vertical like this:

swimmer 300x300 stretched

Instead of using an original image with a 2:1 aspect ratio, we should crop it to 1:1 to begin with and make the swimmer the central focus of the image like this:

swimmer 300x300 cropped

Scaling this image in other areas of the site will ensure uniformity:

Here are the 200x200 and 125x125 versions:

swimmer 200x200 cropped

swimmer 125x125 cropped

Another technique you can use is to scale the image while you have the full-size version so that you add some breathing space around the central subject like this: 

swimmer 300x300 expanded 

This way, you maintain the aspect ratio without the main focus of the picture butting right up against the border.

Using a 1:1 aspect ratio makes everything a lot easier to manage when you are dealing with software that scales images on the fly. Just make sure that your starting images are 1:1 or you will end up with grotesquely distorted images as a result.

In this case, being square is the way to make your life a lot easier!

Responsive Design

Another great reason to keep your product images at 1:1 aspect ratio is that the minimum viewport on a mobile device is typically 320px so that a 300x300px image will display nicely with a 10px border either side.

Quirktools Have A Great Device Platform Simulator 

300x300 Makes a great image gallery


Using 1:1 aspect ratio is not the best solution in the world because square images everywhere don't create the Wow! Factor. But they do convey uniformity and picture galleries will look good this way.

There are many other ways of manipulating images - for example, you can use a Sass mixin which will do the job, and there are elements of CSS you can use. However, these fall outside the realms of what we are trying to achieve, which is building an eCommerce store that looks good with the minimum amount of coding. It's pointless using an eCommerce website builder to do all the heavy lifting and then begin to take it apart and rebuild it to make it something it is not.

1:1 aspect ratio for your product images will give you a beautiful looking site in no time at all and eliminate all the shortcomings associated with trying to manage many different image sizes.

Good luck with your images and as always let me know how you get on in the comments.

Credit to Dummy Images For The Dummy Images.