Reducing bandwidth with smaller images

The Yireo_Webp2 extension for Magento 2 turns JPGs and PNGs into WebP images. This simple optimization reduces network bandwidth and is generally a good idea: Smaller images means faster user experience means better conversion.

Image optimization is a thing on its own: Color depths can be reduced, quality can go down, comments can be removed and images can be compressed using more advanced techniques as well. However, by switching from JPG to WebP, usually the image size goes down dramatically, simply by picking another image format.

Next generation images

WebP is not the only new image format out there. There are also JPEG-2000 and JPEG XR. However, when you compare them, WebP is the winner. So back in the days, I decided to write a Magento 1 extension for WebP (now, gone with the wind) and later a Magento 2 extension.

The extension quickly checked the browser capabilities to see if WebP support was available. And if so, it would replace the image URLs in the HTML and generating the required WebP image on the fly as well. Beautiful.

Bad review because of browser support

The story was not that perfect. Not all browsers supported WebP. For instance, Internet Explorer did not support WebP. This didn't matter, though: If 30% of your visitors were using a WebP-capable browser, they would benefit perhaps from a 50% performance boost, which meant 15% less bandwidth. Pity for the other browsers, but good for you and good for those using modern-day browsers.

Some nitwit on the old Magento Connect extension site thought differently: The most negative rating ever, because that person simply complained that not all browsers were supporting WebP. It destroyed part of my joy of building extensions for a living. Pity that nitwit.

From JS detection to a simple <picture> tag

One of the things I always found annoying was the browser coverage. Another annoying thing was the detection of whether a certain browser supported WebP. I used JavaScript for that. But over the years, the picture tag was adopted better and better in browsers.

So somewhere along the line, I redesigned the Magento 2 extension to turn a simple HTML tag like this:

<img src="example.jpg">

into this:

<picture>
  <source srcset="example.webp" type="image/webp">
  <source srcset="example.jpg" type="image/jpeg">
  <img src="example.jpg">
</picture>

It allowed for a cleaning up to do, but also to look into the future. To boldly go where nobody has gone before: AVIF.

Meet AVIF

New image formats are always experimented with. But either they don't help too much or they are simply not adopted too much yet. There is a new kid on the block, or to put it more in the right terms, a new alien ship in the alpha quadrant: AVIF.

AVIF is said to be much much smaller than WebP and therefore, it could be replacing WebP on the long run. The picture tag approach already allows for supporting such a new format nicely, for those browsers that support it caniuse.com/?search=avif (TL;DR: Chrome).

To install AVIF support on your server (so that images can be converted into that format) is hard. It involves installing sources, that have dependencies that not all Linux distributions support. ImageMagick support is still lacking. And forget about PHP. But simply by calling upon a simple binary should get you going. The idea for a new Yireo_Avif extension has been more (just a placeholder for now).

Yireo_WebP2 turns into Yireo_NextGenImages

However, the architecture of the Yireo WebP2 extension didn't support this move yet. Either the AVIF support was hacked into the WebP2 extension, or a lot of code needed to be duplicated. So I sat down and created a new extension Yireo_NextGenImages which kind of serves as the common functionality of both Yireo_Webp2, Yireo_Avif and theoretically other image formats still to come.

The new Yireo NextGenImages extension went live already a month ago. And version 0.9.0 of the WebP2 extension (released on November 30th 2020) was released, because of this major code change. Nice. Nice enough to dedicate an article on this, right before Christmas.

Using this extension is a must?

While I would say that using this extension is a must, there are peeps that point to flaws as well: Having smaller images is a no-brainer. But if you have a catalog of 100.000 products, with each product having perhaps 3 images, this leads into the generation of 300.000 WebP images, which could flood the memory and CPU of your server. Perhaps more images, if you are a dumbass that didn't optimize the themes etc/view.xml yet to remove all the non-sense image proportions that lead into even more resource consumption.

In the near future, the extensions might include a CLI to generate those images beforehand, instead of on-the-fly. But if you are seeing this as an issue, don't skip this extension (which reduces network bandwidth dramatically), but write your own little shell script around cwebp. Or use this (not perfect, but it took me 10 seconds):

find . -type f -name \*.png | while read OLD_IMAGE; do
    cwebp $OLD_IMAGE -o ${NEW_IMAGE/.png/.webp}
done

No excuse to use older image formats.