Originally posted here!
To parallelly process or decode the image to improve webpage performance, you can use the decoding attribute with the value of async on the HTML img tag.
Using the value of async on the decoding attribute will still download the images but the image's process will be done parallelly and thus the browser can resume the processes for other kinds of data such as the texts on the webpage. This will eliminate blocking the browser rendering and improve the perceived performance of the website.
NOTE: To know more about lazily loading the images as the user scrolls the webpage, see the blog on How to lazy load images in websites the easy way?
TL;DR
<html>
<!-- Basic styles for image -->
<style>
img {
max-inline-size: 30vw;
block-size: auto;
}
</style>
<body>
<!--
Add the `decoding` attribute with the value of `async`
to parallelly process or decode the image file.
-->
<img
decoding="async"
src="https://images.unsplash.com/photo-1666797630713-f5a2e54d3d23?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
/>
<p>Photo by Dimitry Anikin on Unsplash</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
expedita iusto cupiditate incidunt aliquid deserunt aut accusamus cum
dignissimos dolore aliquam ullam rerum aperiam alias tenetur saepe
laboriosam, tempora et illum voluptatum a! Adipisci, sapiente! Fuga ex
esse magni, non labore architecto iusto? Sequi saepe, laboriosam
reiciendis nisi vero aut eveniet amet labore voluptas ullam perspiciatis.
Voluptate, sit veritatis explicabo ullam praesentium beatae saepe aperiam?
</p>
</body>
</html>
For example, let's say we have a webpage with an image and a random paragraph like this,
<html>
<!-- Basic styles for image -->
<style>
img {
max-inline-size: 30vw;
block-size: auto;
}
</style>
<body>
<img
src="https://images.unsplash.com/photo-1666797630713-f5a2e54d3d23?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
/>
<p>Photo by Dimitry Anikin on Unsplash</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
expedita iusto cupiditate incidunt aliquid deserunt aut accusamus cum
dignissimos dolore aliquam ullam rerum aperiam alias tenetur saepe
laboriosam, tempora et illum voluptatum a! Adipisci, sapiente! Fuga ex
esse magni, non labore architecto iusto? Sequi saepe, laboriosam
reiciendis nisi vero aut eveniet amet labore voluptas ullam perspiciatis.
Voluptate, sit veritatis explicabo ullam praesentium beatae saepe aperiam?
</p>
</body>
</html>
As you can see from the above code we have given some basic styles to the image to make it responsive to the screen.
Now let's add the decoding attribute and use the value of async to the img HTML tag to instruct the browser to parallelly process or decode the image file.
It can be done like this,
<html>
<!-- Basic styles for image -->
<style>
img {
max-inline-size: 30vw;
block-size: auto;
}
</style>
<body>
<!--
Add the `decoding` attribute with the value of `async`
to parallelly process or decode the image file.
-->
<img
decoding="async"
src="https://images.unsplash.com/photo-1666797630713-f5a2e54d3d23?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
/>
<p>Photo by Dimitry Anikin on Unsplash</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
expedita iusto cupiditate incidunt aliquid deserunt aut accusamus cum
dignissimos dolore aliquam ullam rerum aperiam alias tenetur saepe
laboriosam, tempora et illum voluptatum a! Adipisci, sapiente! Fuga ex
esse magni, non labore architecto iusto? Sequi saepe, laboriosam
reiciendis nisi vero aut eveniet amet labore voluptas ullam perspiciatis.
Voluptate, sit veritatis explicabo ullam praesentium beatae saepe aperiam?
</p>
</body>
</html>
We have successfully decoded the image file parallelly and improved the webpage performance.
See the above code live in the codesandbox.
That's all 😃.
Top comments (0)