Responsive Images
Overview
Responsive images are the next evolution in web design. Learn how to implement them today, with real-life best practice scenarios for implementing responsive images in your sites.
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. Morten Rand-Hendriksen explains what responsive images are and how they work, and how to use the Picturefill JavaScript polyfill to get responsive images to work in browsers that do not yet support them. Then explore the two main types of responsive images (using the tag with srcset and w and the new tag), and work with the production-ready code examples in the practice window to get hands-on implementation experience.
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. Morten Rand-Hendriksen explains what responsive images are and how they work, and how to use the Picturefill JavaScript polyfill to get responsive images to work in browsers that do not yet support them. Then explore the two main types of responsive images (using the tag with srcset and w and the new tag), and work with the production-ready code examples in the practice window to get hands-on implementation experience.
Syllabus
Introduction
- Welcome
- Who is this course for?
- How images on the web work
- How responsive images work
- New attributes and terminology for responsive images
- What is Picturefill?
- Adding Picturefill to your site
- Testing to make sure Picturefill works
- When to use responsive images with the <img> tag
- Preparing images for responsive display
- Introducing srcset and w
- Using srcset and w
- Introducing sizes
- Using sizes
- Advanced layouts with srcset and sizes
- Targeting resolution density with x
- Introducing the <picture> element
- Identifying breakpoints and layout changes for your images
- Preparing images for <picture> element
- Using the <picture> element
- Challenges with responsive images in art direction
- Using the <picture> element for image type fallbacks
- Responsive images are part of the new world of RWD
Taught by
Morten Rand-Hendriksen
Never Stop Learning!
