Responsive Images

1h 22mIntermediate2015-06-05

Authors

Morten Rand-Hendriksen

Senior Staff Instructor, Speaker, Web Designer, and Software Developer

Course details

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

Skills covered

Responsive Web DesignWeb GraphicsCSSWeb DesignWeb DevelopmentOpen SourceOne-Off

Concepts

0. Introduction

01 - Welcome
02 - Who is this course for

1. Responsive Images - An Introduction

03 - How images on the web work
04 - How responsive images work
05 - New attributes and terminology for responsive images

2. Making Responsive Images Work with Picturefill

06 - What is Picturefill
07 - Adding Picturefill to your site
08 - Testing to make sure Picturefill works

3. Making Regular Images Responsive

09 - When to use responsive images with the &lt img&gt tag
10 - Preparing images for responsive display
11 - Introducing srcset and w
12 - Using srcset and w
13 - Introducing sizes
14 - Using sizes
15 - Advanced layouts with srcset and sizes
16 - Targeting resolution density with x

4. Responsive Images for Art Direction

17 - Introducing the &lt picture&gt element
18 - Identifying breakpoints and layout changes for your images
19 - Preparing images for &lt picture&gt element
20 - Using the &lt picture&gt element
21 - Challenges with responsive images in art direction

5. Beyond Traditional Image Formats

22 - Using the &lt picture&gt element for image type fallbacks

Going Further

23 - Responsive images are part of the new world of RWD