Yoav's blog thing

Mastodon   RSS   Twitter   GitHub  

Images. Can we have less?

# Summary for the impatient

Lossless compression with current formats can reduce image size on the web by 12.5%.

PNG24 with an Alpha channel comprise 14% of images on the web. We can cut their size by 80% using WebP.

Savings from lossless optimization can save 1.5% of overall Internet traffic!*

Savings from conversion of PNG24 with an alpha channel to WebP can save 2.1% of overall Internet traffic!!!

That's 2.8 Tbps!!! That's over 10 million kitty photos per second**!!! Save bandwidth for the kittens!

# How it began

A couple of months ago, I attended (the awesome) Mobilism Conference in Amsterdam, and got introduced to the legendary Steve Souders. We got talking about images and the possibilities in lossless compression. He suggested to send me over the image URLs for the top 200K Alexa sites and that I'll run some lossless compression analysis on them. How can you say no to that?

So, 5.8M image URLs later, I started downloading, analyzing and optimizing images. That took ages, mostly because ls is slow with 5.8M files in a single directory. (I found a solution to that since)

# Results

# Bytes distribution according to type:

Image format% from overall images

# Lossless optimizations:

Optimization% savings
JPEG EXIF removal6.6%
JPEG EXIF removal & optimized Huffman13.3%
JPEG EXIF removal, optimized Huffman & Convert to progressive15.1%
PNG8 pngcrush2.6%
PNG24 pngcrush11%
PNG24α pngcrush14.4%

Overall it seems that with these lossless optimization techniques, about 12.5% of image data can be saved.

# Notes:

# PNG24α

PNG24 images with an alpha channel (PNG color type 6) are the only way to put high quality real life images with an alpha channel on the web today. This is the reason they comprise 14% of overall image traffic on the web. What distinguishes them from other image formats is that in most cases, they are the wrong format for the job. JPEGs represent real life images with significantly smaller byte sizes. The only reason they are used is their alpha channel. That's where WebP fits it.

# WebP

WebP is a new(ish) image format from Google. It is a derivative of their VP8 video codec, and provides significant image savings. One of the killer features of their latest release is an alpha channel. It means that PNG24α images can be converted to WebP (in its lossy variant) with minimal quality losses and huge savings.

# PNG24α => WebP

I ran that conversion on the set of 100K PNG24α images. What I got was 80% size reduction in average for these images. From looking at Google's latest research, even if they don't say it out loud, they get similar results in their latest study. (0.6 bits per pixel for lossy WebP vs. 3.6 bits per pixel for PNG)

# What's the catch?

There are 2 problems with deploying WebP today:

# What I did not yet test?

I did not yet test WebP's benefits for lossy images, which Google claim to be around 30%. These savings are likely to make WebP even more attractive.

# Conclusions

* Assuming that images comprise 15% of overall Internet traffic, which is a conservative assumption

** Assuming 35KB per kitty photo, similar to this one:

1 comment

← Home