Join Morten Rand-Hendriksen for an in-depth discussion in this video Introducing the <picture> element, part of Responsive Images.
- So far in the course, I've talked about…the image element and source set and sizes…and how these can create responsive images.…But responsive images also gives us a whole new element,…known as the picture element.…In this chapter, we'll talk about the picture element…and how we can use it to add art direction…to your responsive images.…The picture element wraps around an image element.…So, as you can see here,…we start with a picture.…Then, we have the image element…and here, we can see, the markup…is exactly the same as what we've been…talking about previously in the course.…
We have a source attribute, an alt attribute…and if you want to, you can also add a srcset attribute.…In this case, I've added a 2x version of the image.…But then, we have these additional source tags…within the picture tag…that lists out other source sets.…The trick with this source tag inside the picture element…is it allows us to provide media queries…for specific sources.…So, for example, in this example,…when the width is above 600 pixels,…
- How responsive images work
- Adding Picturefill to your site
- Making regular images responsive
- Using the <picture> element
- Identifying breakpoints and layout changes
- Using the <picture> elements for image type fallbacks
Skill Level Intermediate
Q: When I use Firefox's Responsive Design View, the images aren't automatically reloading when I resize the window. What do I do?
A: This is a known bug that only affects Firefox version 38. If you update to Firefox 39 or later, this should be resolved (at the time of writing, Firefox 39 is slated for release June 30, 2015).