Join Morten Rand-Hendriksen for an in-depth discussion in this video Introducing sizes, part of Responsive Images.
In the example we built in the previous movie,…I brought your attention to a logical fallacy…in using just SourceSet and the width descriptor,…to mark up responsive images.…Because we're only providing the browser with information…about the width of our image files,…and the only other width the browser has for reference…is it's own full viewport width,…it'll keep selecting larger and larger image files as the viewport grows.…Even if the actual displayed image stays the same size.…In this example, you can actually see it really well.…The display image never gets above 800 CSS pixels wide,…but even so, when I scale the browser window…to pass 800 pixels right here, we load in the large image…which is 1200 pixels wide, and then eventually…also the extra large image which is 1600 pixels wide.…
So we're loading in more images than we actually need.…And we're also loading in the wrong images,…because the size of the image is based…on the width of the view port, not the width…of the actual space the image will be displayed in.…
- 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).