To enable browsers to automatically choose a suitable CSS background-image
depending on supported formats (such as WebP and JPG for instance), you can use the CSS image-set()
function. This function allows you to offer multiple image choices, and define their matching formats using the type()
function:
background-image: image-set( url('image.webp') type('image/webp'), url('image.jpg') type('image/jpeg') );
In the example above, using the image-set()
and type()
functions together allows the browser to choose the most appropriate image format based on its support. If the browser supports WebP, it will choose the "image.webp
" option. Otherwise, it will use the "image.jpg
" option.
If you wish to support browsers that do not support image-set()
, you may have to add vendor prefixes and/or include a fallback before the "image-set()
" declaration.
For example, you can add a fallback before the "image-set()
" declaration in the following way:
.foo { background-image: url('image.jpg'); /* fallback for browsers that do not support `image-set()` */ background-image: image-set( url('image.webp') type('image/webp'), url('image.jpg') type('image/jpeg') ); }
This ensures that browsers that do not support image-set()
will still display the background image as expected.
This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.