Increase your conversion rate and revenue by using the right image format.

Speed and performance are essential for good user experience. Image sizes are a big chunk of the transferred data of your e-commerce site or web page. Therefore you should try to keep it as small as possible.

Amazon: Every 100ms of latency cost them 1% in Sales. - Link

Walmart: Every 100ms improvement brings up to 1% incremental revenue - Link

Zalando: 100ms loading time improvement led to a 0.7% uplift in revenue per session. - Link

Unfortunately, there is a big misunderstanding on the web when it comes to image formats and when to use them for the last few years. Even to this day, I see images in the wrong format from big clients which also have on top an external agency.

I did some research and stumbled across many pages which advertise that you should save images in a *.PNG format for the web in general. These are mostly pages targeting people who are running ad campaigns or are working in general on social media sites like Facebook. So a lot of people think *.PNG is the best image format for the web in general. Sorry but you’re wrong. It may apply to Facebook and their way of compressing and handling images but not for the web in general.

Ideal World
In an ideal world, your shop system or CMS should take care of the compression. But sometimes you also have third party plugins for marketing campaigns which lack this kind of feature.

This article will be a quick guide for you to choose the right format and compression for your images on your e-commerce shop or web page and to show the performance impact.

Image Formats

JPG/JPEG

Do and dont’s: Use JPG for Photography not for Illustration or text.

Pro: Diverse small file size for images and photographs. For images with a large range of different colors and shades.

Con: Loss of details due to a lossy form of compression. Recognizable on line drawings, logos, text, icons, etc.

Example when using it on wrong images
Quality suffers.

Do and dont’s: JPG vs PNG. JPG looks blurry.

PNG

Do and dont’s: Use PNG for illustrations but not for photography

Pro: Versatile, supports transparency

Con: Not recommended for photographs. Especially for images with a large range of different colors and shades.

Example when using it on wrong images
File size becomes unnecessarily large.

File Size comparison between JPG and PNG

GIF

Do and dont’s: Use GIF only for animation

Pro: Small file size, animation
Con: Loss of quality.

Animation
Only use it if you know what you are doing. This leads to big file sizes and high distraction.

WebP*

Do and dont’s: Use WebP for everything except for animation.

Pro: Versatile, smaller file size, supports transparency, up to 25–35% smaller than JPG/PNG

Con: Lack of browser support, need legacy formats like JPG or PNG as a fallback

Example
Saves you some kilobytes (KB).

File Size comparison between WebP, JPG and PNG

What to use matrix

Matrix: What format to use in which case.

Animation
This article is focusing primarily on static images. I will cover animation in another article.

Image Compression

Some settings I’m using for compressing an image on the fly with squoosh :

JPG/JPEG
Compress: Browser JPEG
Quality: 0,80 to 0,90

PNG
Compress: OptiPNG
Effort: 3 to 5

GIF (Animation)
Not supported. Just don’t use this stuff on an e-commerce page anyways. 💩

WebP
a) PNG to WebP
Compress: WebP
Lossless: Checked
Effort: 3 to 5

b) JPG to WebP
Compress: WebP
Lossless: Unchecked
Effort: 3 to 5
Quality: 0,85 to 0,95

For bulk compression, you should check this article - Link.

Performance impact

Red curve
The shop start page is displaying around 35–40 images. As we can see due to the implementation of WebP on the 4th/5th February the total image size is cut in half and the total load time is reduced by 1 sec <.

Before (JPG/PNG)

Total Image size (JPG/PNG)
Total Image size (JPG/PNG)
Total load time
Total load time

After (WebP)

Total Image size (WebP, 50% smaller)
Total Image size (WebP, 50% smaller)
Total load time (1.34 sec less)
Total load time (1.34 sec less)