Hello, my name is: Amy

Responsive Images

Here goes my first time using a responsive image using srcset for images rather than just letting it scale down (fluid width).

Examples of using srcset to display images.

Saving Web Images in General

Always save web images at 72ppi. (Yep, even for retina.) Try to get the highest quality file with the lowest image size. For JPEG images, try experimenting around 50-70% to get the highest quality for smallest file size. Not including meta-data and using sRGB are also good practices.

Now, for the Magic

There's multiple reasons you'd might want to use something other than fluid width for responsive images. (Art Direction, Pixel Density, File Type, and Resolution.) Right now I'm really just concerned with serving the smallest possible file size to get the job done.

This process, though, is manual on an image by image basis. There's no magic max-width: 100%; to swoop in and save the day. So, in the above image what I needed to figure out is how large it ever could be. Since I've restricted the width of the these articles to 550px, my article image size will be capped at 550px as well.

The Code

Inside srcset itself, goes each image you've created along with an identifier of what width it is. What goes in src is the fall back image should srcset not be supported. With sizes you have tell the browser what size that the image will be displayed at. Based on this knowledge, the browser will pick an appropriate one from your srcset list.

A little curve ball though, is that the browser starts to load images before css so it doesn't know anything other than the width of the viewport. You cannot use percentages in the sizes field, as there is no reference to what it would be relative to.

You can use media queries, though. Since I know these images will be capped at 550px, I set a media query that for anything under 550px the images should be displayed at 100vw and the default would be 500px. I think this process would be much more challenging with different image use cases.

<img srcset="assets/images/responsive_300w.jpg 300w, 
             assets/images/responsive_450w.jpg 450w, 
             assets/images/responsive_550w.jpg 550w,
             assets/images/responsive_1100w.jpg 1100w,
             assets/images/responsive_1650w.jpg 1650w"  
        sizes="(max-width: 800px) 100vw, 550px" 
        src="assets/images/responsive_550w.jpg" 
        alt="Examples of using srcset to display images.">

OK, Great. So How Many Images?

This part is hard, and involves feelings. There's an idea floating around about a performance budget, and Jason Grigsby has written an article where he suggests that the idea should be applied to responsive images. I find this idea particularly charming as I tend to like rules better than feelings.

Basically, the idea is to step your images so the files sizes are no larger than 20K (or a different determined amount) apart. Jason also has a great sample page showing this process with different images. Doing this, the browser will pick the smallest image to do the job.

Creating The Images

First Step: Create your default, in this case, 550px width. This is the image that browsers will fall back on if they don't support srcset.

Next: 'Retinaify' it. Retina displays are referred to as 2x and 3x because of their pixel density. So, in order to save this image for a 2x device it needs to be 2x the width. I saved one image at 1100px for 2x, and just for kicks I saved one at 1650 for 3x devices.

Now for the smaller images. The image at 550px was 60k. I fiddled around and found that 450px wide is 42k and 300px wide is 19k. So, if I stick with this logic I'd never need to go below 20k. (So some basic images, ie. a logo, could be 20k at the widest size and thus you'd only need one image.)

I'm not sure if this is the best process for longevity's sake as it does require a lot of thought and labor for each image. It will be interesting to see what methods are created to help with this process.


The Details

I read quite a bit about this in order to wrap my head around it. Here's some of the highlights:

Comments