Optimizing images with the CSS image-set() function
I previously blogged about optimizing images with the HTML <picture> tag. Tl;dr the <picture>
tag lets you specify multiple sources for an image, and the browser will load the first one that it supports.
Short example:
<div class="bg-image"></div>
<style>
.bg-image {
background-image: url("./image.png");
/* Vendor prefix for chromium browsers */
background-image: -webkit-image-set(url("./image.avif") type("image/avif"), url("./image.webp") type("image/webp"));
background-image: image-set(url("./image.avif") type("image/avif"), url("./image.webp") type("image/webp"));
}
</style>
Supporting browsers will choose the first image format they support, and use it as the background-image.
You can inspect the image above to see the image-set
function in action.
Browser support for image-set()
is relatively poor, and Chromium browsers currently require the -webkit-
prefix. To make sure your images work everywhere, you need a separate declaration, in this example a background-image: url("...")
without an image-set()
.
But it's worth it for the browsers that do support it! At my company, we managed to reduce the combined image size on a page with lots of images by more than 97% in Firefox, by using AVIF instead of PNG.