Happy holiday folks! All the best from us at Digitpaint
🎄

Day 24

Ultimate image compression with CSS filters

Una Kravets recently discovered a new way to optimize images, where she removes the contrast and brightness from the image itself, and restores it with CSS filters. According to her findings this can reduce image file size up to 50%!

Images take up the largest part (around 60%) of the data that needs to be transferred to the user when a webpage is loaded. By reducing the file sizes of these images, you can save huge amounts of bytes that need to be downloaded, resulting in a faster loading page for your user.

A 50% reduction in file size is a pretty big deal! But does the image still look good? We wanted to dig deeper into this technique and investigate what it does with visual quality and file size compared to other optimization methods.

Comparison

Original

File size: 344 KB

Optimized

File size: 105KB
SSIM: 0.871349
Butteraugli: 8.633034

Una's technique

Una's technique is based on reducing the contrast and brightness of the image, and compensating for this with CSS filters.

For the demo above we took the original and applied a brightness/contrast reduction with Imagemagick and then compressed the JPEG image with jpeg-compress.

convert -quality 100 original.png -brightness-contrast -25x-50 conv-una.png

To compensate for this reduction in contrast and brightness, we added a CSS Filter:

.show-filter .figure--optimized::before {
  filter: contrast(1.3) brightness(1.8);
}

While JPEG is an OK format for photo image compression, WebP generally can achieve much larger savings in bytes. That's why we also did a test run with WebP in combination with Una's technique.

Visual comparison

At certain point, compressing an image even further results in loss of visual quality. While we can of course subjectively look at an image to see if it still looks "good", it's kind of hard to quantify. Luckily, a number of methods exist to measure the visual difference between a compressed image and its original. We've used SSIM (structural similarity) and Butteraugli to compare the different compression methods we used.

In the table below we show the results of our tests. We compared file size, file size reduction, Butteraugli and SSIM scores with the original uncompressed file.

Optimization File size File size reduction Butteraugli SSIM
JPEG (original) 344 KB - - -
Una's technique 307 KB 11% 8.471975 0.917958
JPEG (recompress) 154 KB 55% 4.500707 0.96664
JPEG (recompress) + Una's technique 105 KB 69% 8.633034 0.871394
WebP 60 KB 82% 6.802282 0.94324
WebP + Una's technique 28 KB 91% 9.356158 0.851146

As you can see, Una's technique scores the worst but also achieves the most size reduction when properly compressed. The 91% reduction when using WebP is quite impressive.

Conclusion

Based on the numbers, the visual quality of images optimized with Una's technique may not make these image suitable for highly detailed images. Looking at the difference in the example above we can see that there is a difference between the original and the filtered image (especially contrast/brightness wise) but when we're not doing a side-by-side comparison this is probably not even noticable to most people.

The good thing is that browser support for the CSS filter property is quite good. Of course IE doesn't play ball but when using these image as backgrounds in CSS you can quite easily use them as a progressive enhancement by using @supports.

So it it worth all this effor? It depends…

We do think that saving a few extra bytes can sometimes be worth the trade-off. Especially if you have a lot of images. We also found that the savings with larger images are a bit bigger than with smaller images.

Browser compatibility for CSS Filter Effects

  • Edge
  • FireFox
  • Chrome
  • Safari
  • iOS Safari
  • Chrome for Android
  • Samsung Internet prefix

Further reading

Used images & scripts

In the process we generated the low brightness/contrast image using ImageMagick, converted those into the respective formats, took screenshots with Puppetteer and finally compared them with ImageMagick and butteraugli.

Compression algorithms

JPEG

JPEG is a widely used image file format. Its lossy compression algorithm leaves out information in order to reduce file size. It is mostly used for images with a large number of color regions, like photographs. The higher the compression rate, the lower the file size but at certain point it visual quality will decrease dramatically.

WebP

WebP is an image format developed by Google in 2010, that supports both lossless (reduction in size without loss of quality) and lossy (a compromise between quality and size) compression. The compression algorithm is based on block prediction: it predicts the values of colors of neighbouring pixels, and only encodes the difference between the actual values and predictions. It is currently only supported by Blink-based browsers.

Comparison methods

SSIM

The structural similarity index (SSIM) is a method for measuring the deviation of one image with respect to the other, given the other one is considered 'perfect'. SSIM scores range from 0 (100% deviation) to 1 (no deviations).

Butteraugli

Butteraugli is a project by Google that estimates the psychovisual difference between images, the point at which a user starts to notice a visual difference between the two images. Together with a scalar value defining the differences, the tool also creates a heatmap. While SSIM looks at the total of errors in an image, Butteraugli only looks at the worst part.

Back to home