Join Morten Rand-Hendriksen for an in-depth discussion in this video Using the <picture> element for image type fallbacks, part of Responsive Images.
- Before I wrap up this course,…I want to plant an idea in your head.…I know it sounds nefarious, but it's not.…On the web, we now have a bunch of new types…of image formats that allow us to do new things with images.…The problem is, in many cases people are using…older browsers that don't support these types of formats.…What I'm talking about here are things like SVG,…or Scalable Vector Graphics.…Or the new image format called WebP,…which allows you to basically upload JPEGs…that have transparency layers and are a tenth of the size…of a regular JPEG and so on.…
- 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).