Responsive Images

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.

Introduction

• Welcome
• Who is this course for?

1. Responsive Images: An Introduction

• How images on the web work
• How responsive images work
• New attributes and terminology for responsive images

2. Making Responsive Images Work with Picturefill

• What is Picturefill?
• Adding Picturefill to your site
• Testing to make sure Picturefill works

3. Making Regular Images Responsive

• 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

4. Responsive Images for Art Direction

• 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

5. Beyond Traditional Image Formats

• Using the <picture> element for image type fallbacks

Going Further

• Responsive images are part of the new world of RWD