#141: Getting the Images and Numbers for Responsive Images

Avatar of Chris Coyier
Chris Coyier on

You know about responsive images. It’s about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it too much or too little image data. It’s fantastic for performance.

You know that to get the most out of responsive images you should polyfill it with Picturefill. You download it, you include it on your page.

You have a plan. You know what you want your page to like at certain media query breakpoints. You have it all mocked up in Sketch or Photoshop.

You know what the syntax for responsive images is like. You’ll need something like the srcset/sizes syntax to describe your situation.

<img 
  sizes="(min-width: 700px) 468px, 90vw"
  srcset="
    sunset.jpg 468w,
    [email protected] 704w,
    [email protected] 938w"
  alt="Sunset">

This screencast is about all that stuff. It’s about tying it all together. It’s about connecting together the design workflow and the software used there with the front end workflow and the syntax used there. You need to know how to output the images in the formats and sizes you need. You need to know when you’ll get quality output and when you won’t. You need to know how to measure those images and use the right numbers where. You need to know how to connect your layout choices and media queries with those numbers. It’s all in here.

See the Pen Demo for Screencast on Getting the Numbers for Responsive Images by Chris Coyier (@chriscoyier) on CodePen.