Using image-set to display images based on file type
Display best-fit background images in CSS
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
Comments
Join the discussionNo comments yet. Be the first to comment.





