Ecommerce Website Image File Size Guide

Our content machines, many DSLR cameras and even some phones take large images that are big enough to print large billboards or posters but did you know that your website visitors don’t always need the biggest image file possible? Many web pages will load much slower with large image files and will compress your images to the size your website platform wants to work with, lowering the image quality that your customer sees in the process. 30 million pixels might capture your products in incredible detail but they might be overkill, luckily there are some simple tricks to get the most out of your imagery online whilst making your website a fast and efficient ecommerce experience for your customers…

Pixels.jpg

First, some admin.

What are Image files?
Images are made up of an ordered grid of Pixels. Pixels are the smallest possible component of an image, a single point or single unit with one individual colour, shade and intensity. As we know, light is made up of red, green and blue wavelengths so on a screen, each pixel is made of subpixels.

Pixels are often used as a unit of measurement for images, eg 1080 x 1920 states that the image is 1080 pixels wide by 1920 pixels high.

If you zoom right into a digital image, it’s like a collage of pixels with hues and shades of almost every colour. Take a look at our example, zoom in to the close up of Cooper’s eye and see the number of squares that make up that section of the image.

Image files carry the information on how all of their pixels are displayed in various media and, to complicate matters, pixels aren’t always square and they aren’t always just one colour (think the red, green and blue subpixels in old television screens). Images for print need pixels with different values made of Cyan, Magenta, Yellow and Black (CMYK Colour Profile - like the colours inside your printer cartridge at home) whereas digital media displays values of Red, Green & Blue (RGB Colour Profile).

As each different screen deciphers the image data it is given, it attempts to match the pixels within the image to the pixels within its own display. Your image can vary greatly depending on what size screen you’re viewing it on, what resolution the screen is and what applications your image is appearing on.

GIFExample.gif

What types of image files should I use for my website?

JPG - Our recommended file format. JPGs or JPEGS are relatively small files with a good quality image. JPG files undergo compression where they will reduce in file size, but also reduce slightly in quality. They strike the best balance in website optimisation and quality.

PNG - Lossless compression whereby the image data is retained across any size of display. PNG files make use of transparent backgrounds, isolating only the pixels that have colour, rather than adhering to typical rectangular aspects. PNG files can be used for amazing interactive features on websites but come at the cost of a much larger file size.

GIF - A low size, low quality image file type that is most often used nowadays to as frame animations - images that display a looping series of low-quality images. Eye catching and useful for showing movement.

TIFF - A very large image file format that is supported by a range of software, has lossless compression and multiple images can be saved in one file.

BMP - Windows-based file of exceptional quality and lossless compression but a large file size.



How do I make the most of my image assets before I upload them to my website?

1 - Make sure your image file sizes are small, so your website loads quickly. We’re all about image quality here but for your online environment customers, give them a balance of quality images and quality online experiences. Many users would rather click off a website than wait 4 seconds for each page to load.

Websites used to only display certain restricted range of colours (known as Web Safe colours), then on to 256 key web colours. Nowadays, most devices have sophisticated graphics cards and screens plus browsers support a range of colours. Whether the human eye can decipher between minute differences in shade and tone, in a small-medium sized image on your website, depends on your eye. See below example.

How to do it: You can process batches (Search Batch Image Processing) on images in Adobe Photoshop using their Save for Web feature (File > Export > Save for Web).

Asset Factory can supply your images at web-optimised quality as part of our post-production service, removing the need for you or your team to do this as an additional step.

How-to-reduce-image-file-size-for-ecommerce-websites.jpg

2 - Give your images relevant plain English file names.

”womens-black-merino-knit-jersey-WJB234.jpg” gives you an SEO advantage because Google can gain some additional understanding over exactly what that image consists of - especially when compared to “23412341324lk.jpg”. When someone nearby searches for ‘Women’s Merino Jersey’ you’ll have a better chance at your product showing up as a search result.

Because you will be taking multiple angles of each product, make sure you create relevant file names that show the different versions.

womens-black-merino-knit-jersey-front-WJB234
side-womens-black-merino-knit-jersey-WJB234
womens-black-turtleneck-merino-knit-jersey-WJB234

It’s important to get your file naming convention right from the start to avoid having to rename each file one by one, otherwise a freelancer service like fiverr.com may be useful in contracting someone to rename your files for you so you can focus on more productive tasks.

Give your image Alt Attributes that make sense
Just like your file names, give your images the right Alt Text when you’re using them

Image requirements on different ecommerce platforms

It makes sense to follow the technical image requirements of the ecommerce platform of your choice. They might not accept your images if you don’t. To make life a little easier for you, we have gathered the most important requirements of the most common platforms. Remember - these are the limits, not the targets.

Shopify Image Requirements

  • You can upload images of up to 4472 x 4472 px

  • Max. 20 MB

  • Recommended maximum size: 2048 x 2048 px

  • Recommended file format: JPG (smaller in size with decent quality)

  • To make use of the zooming option you images need to be at least 800 x 800 px.

  • Shopify supports JPGs, PNGs, TIFFs and BMPs.

Shopify Notes
- Images will be compressed once uploaded, the uploaded ‘quality’ (see example above) and the amount of pixels can determine how much the image is compressed. Shopify states they do this to speed up page load times and the maximum quality will be 85 for images uploaded at 86+ and images uploaded from 65-85 will remain the same. We suggest pre-empting this by reducing the quality to 80-85 before uploading. This way a specialist image design program like Adobe Photoshop has handled the file rather than a website.
- Upload Hack - if your uploaded image doesn’t quite look after the compression compared to when it’s opened on your computer, try doubling the size (amount of pixels) and reducing the quality further. You might end up with a better result.

WordPress Image Requirements

  • at least 800x800px

  • supports PNGs, JPGs and GIFs

  • Wordpress websites are highly customisable and like many other website platforms, it depends on your users as to how large your images really need to be. If they are all visiting using large desktop computers, you can use larger images. If some are using laptops and some are using mobile phones, you need to use a slightly smaller image. Use your website analytics to determine what size screens are visiting your website and optimise for the majority to receive the best experience. In Google Analytics, select a date range to cover then Audience > Overview > scroll down to select Screen Resolution.

Amazon Image Requirements

  • Image Size: The recommended size is 2560px width (anything less than 500px won’t be accepted)

  • Image frame: fill out 85%

  • Background colour: All images need to have a pure white background to be accepted

  • File format: JPG, PNG, GIF, TIFF

TradeMe Image Requirements

  • File format: JPG, PNG, BMP, GIF

  • Max. 5 MB

  • When uploading an image, Trade Me crops and resizes it for display in the visual layout

  • Where cropping is required a 4:3 ratio is used

Etsy Image Requirements

  • Listings should at least be 2000 px wide (this will allow shoppers to use the zoom function)

  • dimensions for thumbnails 75x75 px

  • dimensions for images on listing pages 170x135 px or 155x125 px

The Iconic Image Requirements

  • Must be 1600 wide x 2000 tall images

  • Leave a 200px from outer canvas edges must be blank space around product. Top, bottom, left and right. Unless detail shot.

  • Working RGB - sRGB colour profile

  • RGB Grey value 230.230.230 as background colour for clear cut products, similar light grey range for studio-shot products and models.




Sam Clode