Join Morten Rand-Hendriksen for an in-depth discussion in this video Advanced layouts with srcset and sizes, part of Responsive Images.
- When we work with responsive images…we have to make sure our HTML conforms…with the break points that we've set in our CSS.…This is where we're crossing that line…from basic markup to presentational markup,…and this is where a lot of the controversy is.…To show you what I'm talking about,…I've created a simple example.…I've changed my page a little bit,…so I've added some copies of the same image.…You see i have four versions of the same image…stacked below each other.…I've wrapped them in a div, I've given them a class,…and then I'm using some Flexbox CSS to create this layout.…
So when you get to a certain width,…you get the images next to one another,…two and two,…and then when you get a little bit broader,…they are split into three and three.…But you see that even though we're now displaying…the images quite small, we still get the queries…that change the image sizes,…and that's something that we have to fix.…If you want to follow along with this demo,…you can go get the exercise files for this movie,…which is 03_07.…
- 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).