Amazing “picture” tag and its use cases

The <picture> tag allows to define different images to be used for different devices. Now instead of having one image that is scaled up and down based on the viewport size, multiple images can be used. 

For example, you can have a big landscape image for desktop and a nice small flower image for mobile. 

The obvious benefit: You save on bandwidth, your page loads faster and you can have different assets for different devices. 

Now, how to use it: 

  <source media="(min-width: 900px)" srcset="landscape.jpg">
  <source media="(min-width: 465px)" srcset="flower.jpg">
  <img src=“sky.jpg" alt=“Sky”>

The browser will use the <source> value to load the most appropriate image. The URL you define in a required attribute srcset.  If you have multiple images that fit the requirement then the first <source> will be used. You also have to define an <img> for browsers that don’t support the <picture> tag.