Perfect pictures with picture element

One of the biggest challenge of responsive web design are images. In the quest ofpicture tag in html5 delivering crisp images web designers and developers have increased the size of data being transferred for images. Since images attribute to 60% of the bandwidth used to optimize the user experience it is important to have the ability to show different image sizes on different devices.  Images are one of the biggest obstacles in implementing truly responsive web design. Different solutions have been suggested to overcome the problem of implementing responsive images in web design. One of the solution, using srcset attribute, was discussed in a earlier post

Another solution is the picture HTML5 tag (<picture>) which was part of the HTML5 specification. Finally browsers are implementing support for the picture tag and it’s implementation is being recommended though with caution.  In fact using srcset attribute with picture tag is ideal to ensure that appropriate images are displayed by different devices depending on the device’s screen size and device pixel ratio.

Purpose of the picture element

The picture element is a container which provides multiples sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.Whatwg

What this means is that inside the picture element there are set of source tags. Each source tag has a set of rules and the image to use in case the set of rules are true. An image tag is also needed as a fall back in case a browser does not support the picture tag.  The browser reads the rules and as soon as a set of rules is matched the matching image is displayed. If none of the rules match then the image specified in the img tag is shown.

The process of displaying different images based on device characteristics is called art direction. The picture HTML5 tag helps in implementing art direction.

Example of picture HTML5 tag

<picture>

<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">

<source media="(min-width: 450px)" srcset="head-small.jpg. head-small-2x.jpg 2x">

<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x">

</picture>

In the above example if the screen width is at least 800 pixels either head.jpg or head-2x.jpg is shown depending on the device-pixel-ratio. If the screen width is between 450 and 800 pixels then either head-small.jpg or head-small-2x.jpg is shown depending on the device-pixel-ratio. If the screen size of the device does not match either criteria then the head-fb.jpg or head-fb-2x.jpg is shown depending on the device-pixel-ratio.

Using this method images are truly responsive because this method checks for both the screen width and device-pixel-ratio to determine the image that has to be rendered.

Further reading to understand picture HTML5 tag

One thought on “Perfect pictures with picture element

  1. It’s nice the see all your expereince of broadbrand service of many service provider. Same here, I will never recommend any person to go for DATA CARD service of AIRTEL.It was really awful and torturing experince.It was quite ok for a week. Then the trouble started creeping in. The speed was too slow to open and window. U will be surprice to learn that it took ten minutes to open ant site. I complained a lot.But the game of hide and seek. They blamed each department. I mean service provider blamed the hard ware manufacture and vice versa.nEven after the complaint of ten days, there was no response from the side of service provider.I love to tell the details but at the moment I need to go somewhere… so next time in details. Come on http://tropaadet.dk/cyndicarrillo39204081815

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s