Responsive images are the next evolution in web design. Learn how to implement them today, with these real-life best practice scenarios for implementing responsive images in production sites.
- [Voiceover] Hi, I'm Morten Rand-Hendriksen, staff author here and Lynda.com and this is Responsive Images. In this course, I'll show you how to use responsive images today. We'll start by looking at how images work on the responsive web. I'll introduce you to the Picturefill polyfill that will allow us to use responsive images on the web today. Then we'll take an in-depth look at responsive images markup and how to use the source set and size as attributes. Finally, we'll top off the course with a look at the picture element and how we can use it for art direction and progressive enhancement.
Responsive images are an exciting new evolution of the responsive web that is ready to use today, and I'm here to show you how to do it right. So let's get crackin' with Responsive Images.
- 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).