Grid & Flexbox v3

Chapter 12: Responsive Images

Your images should flex and respond to your designs. Here's how to make it happen with HTML, via the <picture> element and the srcset and sizes attributes.

12a: Slides

These are new slides, just for responsive images.

Download Slides (PDF)

12b: Working with <picture>

Beginning CodePen

Demo of how the <picture> element might work with 4 different images.

Ending CodePen

12c: ResponsiveBreakpoints.com demo

ResponsiveBreakpoints.com is a website that will generate multiple images for you and generate code with srcset and sizes to work on your website. Jen will demonstrate how to use it.

Resources and references