Improving Responsive Images with the Picture Element

Originally published at: http://www.sitepoint.com/improving-responsive-images-picture-element/

A while ago I wrote an article about the srcset attribute. This is an attribute of the img element designed to serve the right image to a specific device. The srcset attribute allows developers to specify a list of sources for an image from which one will be chosen based on the pixel density or size of the user’s screen and displayed to the user.

The browser is provided with a set of “suggestions” about the correct behavior with certain types of images, thus improving the loading time of a page. This technique reduces the weight of a website for devices with small screens (that we tend to think of as devices with a slow connection), and so improves user experience. At the time of writing that article this attribute was a standalone proposal but has since been incorporated into a wider proposal, the picture element.

In this tutorial I’ll give an overview of the picture element, describing its main features and advantages.

Continue reading this article on SitePoint
2 Likes

Hi Annarita, great article!!
In “Starting from version 28, Firefox will support picture by default too”, I think you meant to say “version 38”, right?

Following your examples, I managed to implement picture correctly.
But I couldn’t make the img with srcset work…
Do you know what I did wrong?
http://codepen.io/saviomd/pen/GgYgLd
(picture is working in chrome 41, img with srcset don’t)

Hi savio.
The code is correct. If you copy it in Codepen it works and shows you how the image changes based on the screen. Actually I don’t know why there are some problems from time to time, maybe it’s something related to Chrome.
And yes, I meant version 38, thank you!

@saviomd, your code works just fine for me as well; tested with Firefox 39 and Chrome 41 on Mac.

@ATranfici @retrovertigo the first image (using the img tag, not wrapped by the picture tag) is working for you too?
Like I said, the one using the picture tag is working perfectly, the other one don’t.
When Chrome started to support srcset, it didn’t supported the width attribute, only the pixel density.
From what I can tell, it looks like that’s still the case…

@saviomd your code is working fine for me too.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.