Using the AVIF format for CSS background images

Today I learned that browser support for the AVIF image format has become excellent, with every major browser except Edge supporting it.

As I’m implementing a design with a big background image, this is great. At half the size of the JPEG, it offers way better quality. (WebP wasn’t noticeably better than JPEG in this case, btw)

So I also learned about the CSS function image-set() which allows us to give a browser multiple image formats (and/ or resolutions) and let it choose the most appropriate format. It also has great support, and a fallback is easily added in the form of a regular background image.

PS: If you’re looking for a tool to convert images to AVIF, Squoosh is a nice option.

Originally published at https://wentsch.me on August 1, 2023.