Using image-set to display images based on file type

Display best-fit background images in CSS

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·

1 min read

CSS's image-set using different image formats (CSS Images Module Level 4 - drafts.csswg.org/css-images-4/#image-set-no..) has arrived in FireFox 89 (mozilla.org/en-US/firefox/developer). I am not sure why this is not there in Google Canary.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>image-set</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#island
{
    background-image: image-set(
        url("https://anjanesh.s3.amazonaws.com/island.avif") type("image/avif"),
        url("https://anjanesh.s3.amazonaws.com/island.webp") type("image/webp"),
        url("https://anjanesh.s3.amazonaws.com/island.jpg") type("image/jpeg")
    );

    background-repeat: no-repeat;
}
</style>
</head>
<body>
    <h2>CSS image-set</h2>
    <div id="island" style="width:100%;height:582px">Island</div>

    <h2>HTML5 picture</h2>
    <picture>
        <source type="image/avif" srcset="https://anjanesh.s3.amazonaws.com/island.avif" style="width:500px;" />
        <source type="image/webp" srcset="https://anjanesh.s3.amazonaws.com/island.webp" style="width:500px;" />
        <img src="https://anjanesh.s3.amazonaws.com/island.jpg" alt="island" style="width:500px;" />
    </picture>

</body>
</html>

anjanesh.s3.amazonaws.com/image-set.html

imagesCSSHTML5CSS3