How to serve different image formats in websites using the HTML5 picture tag?
Hi, I'm Melvin George! 🖐️. A web developer and a blogger.
I’ve written code for Mozilla, Qiskit, and an active contributor to many frontend open-source projects that are being used by millions of people around the world. 🚀
I love JavaScript, Rust, React.js, and many new exciting technologies that help society to find a solution to an existing problem 💖.
Come check out my blog to see more of software development posts on these technologies. 🦄
Why do we need to serve different image formats?
Since the introduction of WebP image format by Google, many of the sites are converting to use WebP format to increase performance, Since JPEG images are larger than WebP and the loading times are horrible for JPEG images.
But still, WebP is not supported by many of the browsers and we want to show the JPEG if the WebP image is not supported.
WebP Provides lossless and lossy compression to images.
To know more about the performance of WebP image format, you can check out the blog WebP Images & Performance on davidwalsh.name.
How to use this?
To serve different image formats, you use the <picture> HTML tag and provide different sources using the <source> tag. The source tag acts like fallbacks. Let's look at how it's done.
Let's say I have one image, one in jpeg format and one in webp format.
Our goal is to show the webp image if it is supported and if it's not supported by the browser then it should show the jpeg image.
First let's write the picture tag like this,
<picture>
<!-- Picture Tag -->
</picture>
After that you need to make a source tag and with srcset and type attribute like this,
<picture>
<source srcset="" type="" />
</picture>
You need to pass the source of the webp image in the srcset attribute and the type of the image i.e image/webp like this.
<picture>
<source srcset="myImage.webp" type="image/webp" />
</picture>
Let's also provide the jpeg format if the browser doesn't support the webp format.
<picture>
<source srcset="myImage.webp" type="image/webp" />
<source srcset="myImage.jpeg" type="image/jpeg" />
</picture>
It's actually done, But what if the browser doesn't support the <picture> tag itself so let's add an img tag inside the picture tag so that the image is guaranteed to show in every browser. 😃
<picture>
<source srcset="myImage.webp" type="image/webp" />
<source srcset="myImage.jpeg" type="image/jpeg" />
<img src="myImage.jpeg" alt="A JPEG Image" />
</picture>
That's all! 🌟.
To understand it better I have made this JSBin.
If you view this link in the Chrome browser it will show an image of a House (WebP Image) and if you view it in the Safari browser (Not supports WebP image format yet!) it will show an Image of a Squirrel (JPEG Image).
