Join Morten Rand-Hendriksen for an in-depth discussion in this video Identifying breakpoints and layout changes for your images, part of Responsive Images.
- Designing a website where we will be…using the picture element means we…have to completely rethink how we…design the content of our site.…Normally, when you add an image…to a webpage, it would say, here's…the image I'm going to display,…and at most I'll be able to squish it down…or maybe resize it to fit with whatever…screen size that we currently have.…But, when we're working with a picture element,…you can, as you've seen, swap out the images…depending on the screen sizes.…But that means you have to rethink…both your layouts, and also the images themselves…to figure out exactly how they're going to work.…
Now this process involves art direction,…design, and designing in the browser.…When I do this, I find it easiest to start out…by making some overall mockups of…the different types of layouts I want.…So here you can see I have the small screen,…where I have basically a square image.…I have the medium screen, where I have…this long tall image, and then I have the…wide screen, where I have a wide and short image.…
- 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).