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.
Is this what I should be seeing? Taken from my iPad. http://i.imgur.com/ZGnI2cx.jpg
Snap
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.
Hi Chris! You should give Responsify WP a try on CSS-Tricks. Instant responsive images which works on existing content to! :)
Thanks for the workflow perspective—exactly what I was hunting for!
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.
The example doesnt work in firefox.
Could you be more specific?
I just popped it open for testing and it seems fine to me. http://d.pr/i/17u72/3MnOoQB1
Your hard drive is pretty full :)
Nice Information indeed.
those video are very inspiring about image and number for responsive images. thanks for share…
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?
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
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?