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.
Leave a reply