Join Morten Rand-Hendriksen for an in-depth discussion in this video When to use responsive images with the <img> tag, part of Responsive Images.
- There are two main methods for adding…responsive images to a webpage.…You can either use the traditional <img> tag,…in conjunction with the srcset and sizes attributes.…Or, you can use the new <picture> tag,…and set up sources for different media queries.…In this chapter, we'll look at the most common option,…which is using an <img> tag and srcset and sizes.…But before we get to that point,…it's important to address two very important questions…that come up any time we talk about responsive images.…When do we use responsive images?…And which method do we use when we want to implement them?…Let me try to answer these questions as simply as possible.…
Whenever you have an image that's gonna…be displayed visibly large on the screen,…meaning it's a huge image,…or you have a really high-resolution image…where you want to retain the high resolution where possible,…you want to use the <img> tag along with srcset and sizes,…because what you're doing is telling the browser…to figure out what image is gonna work best…
- 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).