The HTML5 doctype has come a long way since it was first released in 2008.  Many would say that it gained real attention in 2012 – when W3C finally recommended its use for modern website development. New sematic elements such as <header>, <footer>, and <nav> have become a valuable way to identify front-end function, as well as SEO markup and overall, clean coded websites.

HTML5 comes with many other advantages ( offline apps, canvas rendering, and web storage to name a few.. ) that just makes life a lot easier for fellow designers & developers.  However not all proposals from the new doctype were immediately picked up.

About that Picture Element

The Picture element is proposed to allow authors to define which image file to load on a users screen.  Based upon viewport size, device, or pixel density, the picture element would be a good way to cut back on load time, while providing clean code.

The common way to use responsive images:

 <!doctype html>
<html>
<head>
<style type="text/css">
img {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<img id="photo-one" src="photo1.jpg" width="60" height="60" alt="Photo One">
</body>
</html>
 @media screen and (min-width: 768px) and (max-width: 980px) {
img#photo-one {
width:30px;
height:30px;
}
}

*Note: The <picture> element is not meant to replace <img>, which should still be used for static websites or single-purpose images.

The New Way

 <picture>
<source media="(min-width: 980px)" srcset="large.jpg">
<source media="(min-width: 979px)" srcset="medium.jpg">
<source media="(min-width: 767px)" srcset="small.jpg">
<img src="small.jpg" alt="small image for smartphones.">
</picture>

You may notice that the <img> element is still being used. That is because it acts as a fallback for browsers that don’t recognize <picture>.  This is still a problem because it forces the more modern browsers to load two images at once. Still, this is a good time to start using the new element for your projects, rather than waiting until all browsers have adapted it, because it’s always good to stay ahead of the game!

Current Browser Support for the Picture Element

Google ChromeV.38+
Opera BrowserV.25+
Firefox V.38+

 

Leave a Reply

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>