February, 2023

Using image format webp in 2023

WebP is an image format developed by Google that provides efficient compression of digital images while maintaining high quality. It uses both lossless and lossy compression techniques and is designed to be a replacement for the older JPEG and PNG image formats. WebP images can be up to 34% smaller than comparable JPEG images, which can lead to faster loading times and reduced data usage on websites. The format is supported by a growing number of web browsers, image editors, and other software applications.

Since we are using Thumbor as an image server it’s just a matter of changing the default format to webp and all images are 30% smaller. According to caniuse, the support is 97.41% percent. However, everything earlier than Big Sur on macOS has no support for webp, even if it’s a recent version of Safari.

Therefore I want to provide alternative fallbacks for browsers that do not support the format, and found a few options:

Provide an alternative image format, such as JPEG or PNG, using the HTML “picture” element’s “srcset” attribute. This way, if the browser doesn’t support WebP, it can fall back to the alternative format.

<picture>
<source srcset="a-webp-for-most-browsers.webp" type="image/webp">
<source srcset="a-png-for-safari.png" type="image/png"> 
<img src="a-png-for-safari.png" alt="My Image">
</picture>

Note that you need to provide a image type

This is easy. However, if we move on to css background images it gets tricker:

CSS image-set still has pretty low support at present
CSS feature queries using @supports do not extend to image formats.

In my testing, I have none of these work properly in Chrome, Safari, or Firefox at the same time.

JS via Modernizer

To me, this feels a bit 2010-ish but a solution to the problem involved using some JavaScript and was inspired by the no-js/js issue that Modernizr has addressed for a long time. A custom build was created to detect WebP support exclusively, and a no-webp class was used to load JPEGs where WebP was not supported. The HTML markup required a minor change, but it was not a significant one.

.bg-image {
   background-image: url('/images/background.webp');
}
.no-webp {
   .bg-image {
      background-image: url('/images/background.jpg');
   }
}

What are your conclusions? Let me now. Mastodon: @[email protected]. Twitter

← → Top