Let’s say “WELCOME” to the new HTML5 element which will be released next month: picture!
Additional good news from HTML5: the picture element can finally mark a point on image responsivity. From the very first article on responsive web design, 4 years ago, we had to wait until this solution for having a really mobile friendly standard for images.
Images are the heaviest part of a web page, so in past developers used to create “M sites” optimized for mobile contexts and expecially without images or large images. Now we have responsive webpages, which are a good solution for developing, but a step bakwards for loading time and bandwidth consumption on mobile user experience.
So <PICTURE> is good news!
It’s good because we finally let the browser choose the right image we can load on the page depending on the sizes (tipically width) of the page or the element. No more scripts for taking this decision. No more unuseful effort by the developers.
This is an example of what this element can do for us:
<picture> <source media="(min-width: 64em)" src="high-res.jpg"> <source media="(min-width: 37em)" src="med-res.jpg"> <source src="low-res.jpg"> <img src="fallback.jpg" alt="Fallback picture for non-supporting browsers."> <p>Accessible text.</p> </picture>
Pretty simple, isn’t it? <img> tag is just the fallback. Picture sources for big screens are listed above it. And media
attribute contains the media queries logic as like the css.