Join Morten Rand-Hendriksen for an in-depth discussion in this video Targeting resolution density with x, part of Responsive Images.
- In the very beginning of this course,…I mentioned for the source set attribute…we have two different types of descriptors we can use…to tell the browser how big an image is.…You have the width descriptor,…the W that we've been using so far,…and you also have the pixel density descriptor.…Now, I haven't talked about the…pixel density descriptor yet because…you don't use it all that often.…The pixel density descriptor allows you…to specify to the browser under what…pixel density conditions it should be loading up an image.…Well, the thing is, you would never use the width descriptor…and the pixel density descriptor at the same time.…
You would use one or the other.…And in most cases, you would have…flexible sized images that are flexing based on the CSS,…and in that case using the width descriptor…makes more sense because you can…clearly see what's going on.…The pixel density descriptor is normally only used…when you have some sort of fixed-width element…and you want to tell the browser,…"Well, this is a fixed-width item,…
- 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).