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.
Overview
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
