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.

[promo_widget]

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.

Adobe Photoshop makes it easy to optimise images for web and ecommerce use
Adobe Photoshop makes it easy to optimise images for e-commerce websites. You can toggle image size and compression, and see the effects in real-time. This screenshot is from Adobe Photoshop CS6.

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.

About Richie Tyler

I've been making and helping others make a living on the web for over a decade. I draw on my experience as a writer and web developer to help people turn their ideas and passions into profitable and fulfilling businesses.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *