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
I will cover the most common web image formats in this small guide:
JPG, PNG, (GIF) and WebP*
JPG/JPEG
Most common and used format. Especially your phone/camera provides this format. JPG/JPEG format is a lossy compressed file format that is totally fine and desired for photographs.
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.
PNG
PNG format is a lossless compression file format. Therefore PNG is a way to go for line drawings, text, and iconic graphics at small file sizes.
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.
GIF
GIF become less popular on the web than PNG in 2013.
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*
Still a rising star. Due to the lack of browser support (Safari/IE) you still need the image in another legacy format (JPG/PNG) as a fall back. So your Page needs some extra code. But performance-wise it’s worth it!
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).
What to use matrix
If you stick to this matrix you are good to go.
Animation
This article is focusing primarily on static images. I will cover animation in another article.
Image Compression
Tools like Affinity Photo, Photoshop, Gimp, etc. would slightly be an overkill for just only compressing an image. I can recommend squoosh.app for just doing this task manually.
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
You can use different tools to track your site performance. In this case, I’m using SpeedCurve. The following images show different colored curves. Each color represents a different competitor. In this case, I’m testing their start page.
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)
After (WebP)
According to the articles at the beginning, we would have a potential increase in revenue of 7 to 10% (using a rule of three). Even an increase of 1 to 4% would be totally worth it. So what’s your excuse for not using WebP? Better to fix bad behavior due to browsers through a fallback than to limit the best possible experience. Good user experience always wins and pays back.
On mobile, per session, users who experienced fast rendering times bring 75% more revenue than average and 327% more revenue than slow. - Link
Sources:
