Join Morten Rand-Hendriksen for an in-depth discussion in this video New attributes and terminology for responsive images, part of Responsive Images.
- The introduction of responsive images…brings with it some new terminology.…So, before we dive deeper, let me quickly introduce…you to our new friends.…srcset, width descriptor, pixel density descriptor,…sizes, and the element…and get a basic understanding…of what each of them does.…In a traditional img tag,…we have the obligatory src, or S-R-C, attribute…that provides the URL to the image file to be displayed.…In responsive images, we also have…a new attribute called srcset, or S-R-C set.…
The srcset attribute allows us to provide…a comma separated list, of one or more URLs…to images the user agent or browser can choose from.…The browser chooses the best suited image file from the list…and effectively replaces the original source URL…with a new one from the srcset list.…Within the srcset attribute,…we can add either, a width descriptor,…or a pixel density descriptor to each of the listed URLs.…The width descriptor is used…to provide the browser with the…actual width of an image file…in pixels before it's loaded.…
- 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).