Responsive Web Design has taken web developers and designers by storm, changing the way they approach the development of a website. However...
Responsive Web Design has taken web developers and designers by storm, changing the way they approach the development of a website. However, it isn't perfect and has its limitations. According to Archive.org, images constitute about 62% of the total weight of a webpage on average, suggesting that there's a need for a better way than CSS rules to deliver images responsively to a virtually infinite number of screen types and sizes. Meet the new HTML 5 Picture element.
Why need for a new element?
You may have implemented a responsive Web design, thinking that solves all your mobile problems. And it’s true that a responsive Web design solves some problems. It automatically arranges and displays your site elements to be viewed on smaller, narrower mobile screens.
But responsive Web design isn't the answer to everything. It doesn’t necessarily solve the image download issue. Even with responsive design, many times those heavyweight images still are downloaded anyway.
The <Picture> Element
According to the specification, "the picture element is intended to give authors a way to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format". It, "should be used when an image source exists in multiple densities, or when a responsive design dictates a somewhat different image on some types of screens ("art direction")".
The Picture element is about responsive images, not responsive design. But when it comes to your site’s performance on mobile devices, it could be significant.
The new markup element supposedly addresses the problems caused by images that were meant to be seen on a full-size monitor — images that don’t translate well to mobile devices. The <picture> markup code tells Web browsers such as Firefox to load and display the right (smaller) images as necessary.
Here's what it looks like;
<picture>
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<source media="(min-width: 480px)" srcset="medium.jpg 1x, medium-hd.jpg 2x">
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large-hd.jpg 2x.jpg">
<img src="fallback.png" alt="Sample ALT description">
</picture>
Compatibility
The <picture> markup element is not final yet, but is coming soon to browsers. Support for the element is expected to be turned on by default in Chrome and Firefox by the end of 2014 turned on by default in the Chrome and Firefox browsers. IE, Opera and Safari are also on their way.
An important thing to know is that <picture> markup could speed up your website, especially on mobile devices. That would be good for your site visitors.
Feel free to implement <picture> markup in your website code now. Even if a browser program doesn’t understand the new markup, there’s a fallback command to use standard HTML image tags (notice the <img> tag within the picture element). Support for the new element will come very soon. Good luck :)
COMMENTS