#141: Getting the Images and Numbers for Responsive Images

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,
    sunset@1.5x.jpg 704w,
    sunset@2x.jpg 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.

Comments

  1. User Avatar
    Andy
    Permalink to comment#

    Is this what I should be seeing? Taken from my iPad. http://i.imgur.com/ZGnI2cx.jpg

    • User Avatar
      James
      Permalink to comment#

      Snap

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Yes that’s probably correct. I didn’t really do much layout CSS in that example Pen. So Picturefill has decided which image is best based on the information we gave it in the syntax, and downloading/showing that image. Which happens to be the big one for you I guess, based on the browser/screen situation on your iPad.

      In reality you’d finish up the CSS so that it’s doing layout that matches exactly what you’ve described in the resp images syntax.

      I should have finished up that demo to do that… hopefully I can get to that soon.

  2. User Avatar
    Stefan
    Permalink to comment#

    Hi Chris! You should give Responsify WP a try on CSS-Tricks. Instant responsive images which works on existing content to! :)

  3. User Avatar
    Laura Patti
    Permalink to comment#

    Thanks for the workflow perspective—exactly what I was hunting for!

  4. User Avatar
    MatthewGrace
    Permalink to comment#

    Usefull information for web designing. Responsive web site its a mostly used in designing so responsive images are required for it. Its a best source for get it.Thanks for sharing.

  5. User Avatar
    Jan
    Permalink to comment#

    The example doesnt work in firefox.

  6. User Avatar
    Agustin
    Permalink to comment#

    Your hard drive is pretty full :)

  7. User Avatar
    Abcd
    Permalink to comment#

    Nice Information indeed.

  8. User Avatar
    Labonno
    Permalink to comment#

    those video are very inspiring about image and number for responsive images. thanks for share…

  9. User Avatar
    Steven Nangobe
    Permalink to comment#

    Hey Chris, i am currently learning how to create a website using Dreamweaver 8, do you think is the right program for a beginner like me?

  10. User Avatar
    Greysquirrel
    Permalink to comment#

    Regarding exporting multiple images from photoshop CC 2015 it can now be done auto-magically. You just need to turn on Generate Image Assets and carefully name your layers. See Chris Converse’s video on this page:

    https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

  11. User Avatar
    sathwika
    Permalink to comment#

    Hi,

    I started learning HTML and CSS recently. wanted to know, if we can make a website responsive without using Bootstrap or any other Framework!? if yes, can you tell me the guidelines for the same?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag