Join Morten Rand-Hendriksen for an in-depth discussion in this video Using srcset and w, part of Responsive Images.
- With the theory in place,…let's look at the practical application…and implications of using source set…and the width attribute in a real project.…If you want to follow along,…go to the Exercise Files,…grab the files for 03_04,…and you'll get this in your browser.…This is the same project we've worked with before.…I've removed the responsive images code,…so now we have a static image size.…You can see that if you go anywhere,…click Inspect Element,…go to the Responsive Design mode,…and then try to change the view port width here.…You'll see the image stays the same,…or rather you see you get no changes…up here because the image isn't swapping out.…
Now it's time to add a source set attribute…with a list of different images…and their width descriptors…so that we can actually get this image…to become responsive.…In brackets, I'll scroll down until I find my img element.…It's right here, and we have the src attribute…and the alt attribute already in place.…Now I'm gonna add the third attribute,…srcset = ",…and I also have to end my quotations marks right away…
- 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).