In this post, I take a look at how to optimise images on your e-commerce website to increase the speed and appearance of your website.
Having a website full of quality images can be the difference between customers choosing your products or another brand’s. Good quality photography will ensure your customers know what they’re ordering, and reinforce the quality of your brand itself.
While the appearance of the images is important, so too is optimising their size to ensure a good user experience. There’s nothing worse than visiting a website and having the pages load slowly because of the size of the images.
What is the perfect (file) size for images on an e-commerce website?
Regardless of the dimensions, the simple rule of thumb for web images is this: restrict the file size of images to no more than 200-250kb. This applies to all websites, not just e-commerce sites.
As an example, the feature photo for this article is just 138kb.
This file size provides a balance between image quality and the speed at which it loads. It’s no good having incredibly detailed images that then take more than a few moments to load.
How big should I make my photos?
Guided by the 200-250kb rule above, the maximum dimensions of the image will depend on how much detail your photo has. Photos with predominantly white or black backgrounds (like e-commerce product shots) will produce a smaller file size.
In my own experience, maximum image widths of around 1500 pixels are enough to ensure the balance between quality and file size. Using the feature image for this post as an example, its dimensions are 1200 x 900; had I made it 1500 the file size would have reached 198kb… still very good.
A great option for reducing file size is to crop images to the exact dimensions you’ll use on your site.
Adobe’s Photoshop allows you to export images optimised for the web, including the ability to toggle settings to optimise images. In Photoshop versions prior to Photoshop CC you’ll find it under ‘File’ > ‘Save for web’. CC and beyond, click ‘File’ then ‘Export’. Other programs such as Apple’s iPhoto will allow you to export for web as well.
What else do I need to consider?
Screen resolution: Devices such as Apple laptops, iPads and iPhones often feature what they call ‘Retina‘ screens. These feature double (or greater) the pixel density of regular screen resolutions, which can make images appear pixelated, particularly larger format photos. High resolution screens from other manufacturers can have the same effect.
The solution is to create images as large as you possibly can (within the 250kb limit). Your alternative is to serve seperate versions of images to retina devices – click here to learn more.
Device specificity: The device your visitors are using to view your website impacts the images you use. Consider this when choosing images or, even better, use tools like Google Analytics to determine what devices your visitors are most likely to be using.
Desktop and laptop screens generally have a landscape perspective, so landscape images often suit these devices better. Tablets and smart phones on the other hand often favour portrait views, so square or portrait images can be a better choice in these cases.
Fortunately, responsive design allows you to modify image display according to screen shape and layout. Carefully planning design of your website (and the images you’ll use) can eliminate a lot of headaches for both you and your visitors.
Remember, if in doubt, shoot for 200-250kb.