Join Morten Rand-Hendriksen for an in-depth discussion in this video Preparing images for <picture> element, part of Responsive Images.
- Based on mockups and experimentation in the browser,…you should be able to figure out roughly…what kind of layouts…and also what image sizes you're going to be tarketing…with your picture elements.…Once that's done, you can start creating preliminary images…that you'll be using as you build out the page.…And here it's important to remember…that as you build it out,…unless you have an actual set in stone design…and layout already,…you might have to regenerate these images later…to get the exact right sizes.…In the Exercise Files for this movie, 04_03,…you'll find a folder called art…that has the art direction example in it…and within that folder, you'll find the images folder…and here you see how I've handled the different images.…
You can see I have three different images,…the elemonkey-square, elemonkey-tall, and elemonkey-wide…and that I've created two versions of each of the images.…One for 1x screens and one for 2x screens,…and have named the one for 2x screens 2x.…Now when you do this on your own,…it's quite possible that you may feel inclined to just say,…
- 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).