Multiple image with HTML5.1 “picture” tag

HTML is always full of new tags and amazing improvements. Today we wanna talk about picture tag.

This new tag allow developers to manage multiple images for different screens.

It’s very close with CSS3 media queries and the behaviour is the same.

With its source attribute you’re allow to choose the best image for your screen. So let’s see a simple example of picture tag in action:

<picture>
  <source 
    media="(max-width: 760px)"
    srcset="tablet.jpg">
  <source 
    media="(max-width: 480px)"
    srcset="smartphone.jpg">
  <img 
    src="others.jpg">
</picture>

 

As I told you before, with the source attribute you can change image for any screen. Instead of source you can use  img to choose the image for all the others resolutions.

Simple. Isn’t it?