eCommerce Product Images tips – Part 2

One of the main things to ensure when getting your ecommerce product images sorted for your online shop is that the images are at the highest quality and that they are all of a uniform size.

Retaining quality

You need to use JPG format images on your shop as they are compressed to speed up loading time and can handle a full range of colours. The only downside is that every time you open and resave a JPG, it compresses it again. After a few opens and saves the image will start to look fuzzy and pixellated, which you don’t want.

Therefore, try and work from original manufacturer’s shots or your own full size images off your camera rather than copying them from someone else’s website. Also bear in mind that you cannot increase the size of small images without them looking horrific. If the image is too small and you cannot get a larger version, make the canvas size bigger without increasing the size of the small image.

Standardising sizes

Ecommerce product mages of various sizes can easily break the layout of your shop and make it look odd when images don’t align properly. Ask your web designer what size (in pixels) to make the images to fit your shop, and whether they need to be square or oblong.

Using photo editing software or an online photo editing tool, crop and centre the image on a white background. Leave a margin around the image to allow some whitespace – don’t crop it so tight that the product is touching the edges. For this example we will be using a shop design that uses square images and a white background.

ecommerce-product-image-01

An example of an unhelpful image. This image is cropped too tightly, and is an irregular size, which could break the layout of the shop by causing images to be out of alignment.

ecommerce-product-image-02

A better example – the image is centered on a white square. In our example shop, this will work perfectly.

Naming your ecommerce product images

It will not be immediately apparent when working with your shop, but if you don’t name your images properly it quickly becomes difficult to manage them. Follow these tips and your life will be a lot easier:

  • Use dashes instead of spaces in the filenames – i.e. use “lovely-white-handbag-hb01.jpg” instead of “lovely white handbag hb01 .jpg”.
  • Use a prefix for the product category i.e. “bags-lovely-white-handbag-hb01.jpg” – this will keep all the images together in the directory.
  • Make sure everything is lower case – some web servers are case sensitive, so handbag.jpg is a different file to handbag.JPG. This can cause untold problems later down the line!
  • Keep names short – if they are too long then the shop system may not handle them properly.
  • Use a product code in the filename if you can, otherwise you could end up with lots of product images that all say bag01.jpg and working out which image goes with which product can be a nightmare.

Here we’ve given you some useful tips on preparing ecommerce product images, you can find part 1 here if you missed it.

Need a new website or a redesign?

Contact us and we'll be glad to help!

Free Website Guide

Common web design questions answered!