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?