Join Morten Rand-Hendriksen for an in-depth discussion in this video Introducing srcset and w, part of Responsive Images.
- Now it's time to take a closer look…at the markup that goes into responsive images.…In their most basic form…responsive images consists of a regular img tag…containing a traditional src attribute,…an alt attribute, and now the new srcset attribute…containing a comma separated list of image URLs…and their respective width descriptors.…The image URL is familiar,…it can be an absolute, a root relative, or a relative link…to any image on the web.…The width descriptor, a number followed by a lower-case w,…is the actual pixel width of the image listed.…
So, an image that is 600 pixels wide,…will have its width descriptor set to 600w.…Now for how all this works.…When the browser loads the page…it finds an img tag in the markup…and within it a src attribute and a srcset list.…If the browser has no support for srcset,…it will just load the file referenced…in the original src attribute.…If, on the other hand, it supports srcset,…it will take note of the viewport width of the browser,…look for the width descriptors…for each of the URLs in the srcset list,…
- 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).