Use Picture tag to create responsive image (html)

<picture> 
 <!-- Default low resolution image -->
 <source srcset="small.jpg" type="image/jpg">
 
 <!-- Medium resolution image -->
 <source srcset="medium.jpg" media="(min-width: 768px)">
 
 <!--High resolution Image -->
 <source srcset="large.jpg" media="(min-width: 1200px)">
 
 <!-- Fallback image incase the picture element is not supported --> 
 <img src="small.jpg" alt="description of image"> 
</picture>

Posted

in

by

Comments

Leave a Reply