Join Morten Rand-Hendriksen for an in-depth discussion in this video Challenges with responsive images in art direction, part of Responsive Images.
- Now that you've seen the power of the picture element…and what it can do for art direction,…let me bring up a couple of things you need to think about…when employing the picture element.…First of all, if you're choosing to display different…images the way I did in the first example,…you have to consider are the different images…communicating the same message?…In most cases, like the one I have it's roughly…the same message.…And in many cases you will only use the picture element…to maybe zoom in on an item.…And in that case you're not changing the message.…But if you are using the picture element for art direction…and you are swapping out the images,…you have to make sure that the message stays the same.…
Regardless of what image you're looking at.…Next you have to consider whether using the picture…element will provide an optimal experience for all users.…Whenever you add content to a webpage you have to…always assume that a user will only ever see…that content in one format.…So if you added six different images or maybe three…
- 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).