Skip to main content

Using image-set to display images based on file type

Display best-fit background images in CSS

Updated 1 min readMarkdown

CSS's image-set using different image formats (CSS Images Module Level 4 - https://drafts.csswg.org/css-images-4/#image-set-notation) has arrived in FireFox 89 (https://www.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>

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

About the author

  • I am a web developer from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in

No comments yet. Be the first to comment.