Posts Learn Components Snippets Categories Tags Tools About
/

How To Implement Responsive Images For Different Screen Sizes

Learn How To Implement Responsive Images For Different Screen Sizes the easy way to have optimised Image in your site

Created on Jun 23, 2022

69 views

In this short snippet, you will learn the ways to Implement Responsive Images For Different Screen Sizes and ensure that your images are well optimized for the right screen size.
Let's right away jump into the code.
<picture>
	<source srcset="xl-img.jpg" media="(min-width: 1200px)">
	<source srcset="lg-img.jpg" media="(min-width: 1000px)">
	<source srcset="md-img.jpg" media="(min-width: 800px)">
	<source srcset="sm-img.jpg" media="(min-width: 600px)">
	<img src="xs-img.jpg" alt="Small Image Alt Tag Here" style="width: auto;">
</picture>
The code above makes use of the picture tag with multiple source tag that has different image media query. Now depending on the screen size, the image source will be automatically updated.

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)