Anjanesh Lekshminarayanan


Using image-set to display images based on file type

Display best-fit background images in CSS

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·May 28, 2021·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

CSS's image-set using different image formats (CSS Images Module Level 4 - has arrived in FireFox 89 ( I am not sure why this is not there in Google Canary.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
    background-image: image-set(
        url("") type("image/avif"),
        url("") type("image/webp"),
        url("") type("image/jpeg")

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

    <h2>HTML5 picture</h2>
        <source type="image/avif" srcset="" style="width:500px;" />
        <source type="image/webp" srcset="" style="width:500px;" />
        <img src="" alt="island" style="width:500px;" />


Share this