Responsive Images with <picture> in HTML5

By responsive images here we don't mean just fluid images that fits in its container, but images that actually responds to the query or conditions passed to it as in CSS Media Queries. With the new <picture> element it is possible without the use of any JavaScript.

Where could you use it? In a plenty of use cases, think of the picture element as CSS Media Queries but at the level of HTML where specific styles are applied for different conditions like min-width, max-width, device orientation, device dpi and much more.

Live Demo Download Files

Using It

The syntax is pretty simple, here's a basic example from the demo (URL might be different in the demo)

<picture>        
    <source srcset='img/image-normal.jpg' media='(min-width: 640px)'>
    <source srcset='img/image-smaller.jpg' media='(min-width: 450px)'>   
    <img src='img/image-smallest.jpg' class='img-responsive'>
</picture>

That's it, a few lines of extra markup and responsive images are all set to work depending on how you set it.

Mostly this could be used for art-direction as HTML5Rocks suggested, definitely, you could use different cropped, aligned and sized copies of the main picture to be used on varying screen sizes when fitting an image on the view-port is not enough.

Over-viewing the properties

The <picture> element is not limited to media queries, it also gives you the option to check for type of images browser support for instance a webp image, you can tell the browser to use that version of the image if it's supported. Here's an example:

<picture>
    <source type="image/webp" srcset="img/photo.webp">
    <img src="img/photo.jpg">
</picture>

In case browser doesn't understand what webp format is, the browser then serves you the default jpg image.

Whereas the <picture> has no special property of its own, the children <source> elements are what actually controls the functioning. HTML5Rocks explained the properties in its main article on this topic in detail:
http://www.html5rocks.com/en/tutorials/responsive/picture-element/#toc-syntax

Ready to use?

Supported in Chrome, Mozilla Firefox and Opera. How'd you use it depends on the use case, sometimes other methods like the JS way seems to be more valid and that's where you have to decide that.

At least you could and should start experimenting if you are moving forward to a more advanced web where new APIs and features awaits in the future. Even if we talk about search engine optimization then Google is going to emphasize on how well sites are optimized for mobiles and the changing trend can make this a plus point in the near future

Common Problem(s)

List of problems that might occur (with solution)

1. Not able to correctly get the value of the current image in DOM

Trying to get the value of the src attribute will always return you the default value you set, to get the evaluated value you have should use currentSrc

This could be done on the backend or with JavaScript

You are right, and to be honest images are one of the basic concern of every website developer who wants to keep website fast even on mobile devices.

Backend

Currently yes, this is mostly done on the backend to load images optimized for mobile devices based on user agent details the backend scripts get but that's only for the backend but it has it's own drawbacks. Without using the picture element you can't properly set different image sources when a condition is changed on the front-end, no PHP or Python will be there to help you in that except for JavaScript on the front-end.

Let's come to JavaScript

Other than the back-end method you could use JavaScript to load different images based on desired conditions by attaching event handlers to window.resize or any other similar function to check for various states of the window and then change the URL of the src field.


Share you opinions and experiments in comments.