How should you decide what image sizes to generate for responsive design?

Content
1

This is a question that I struggle with every time I create a new responsive website.

Thanks to srcset (and picturefill), it is now very easy to serve different size images to different devices. srcset even has built in retina control, so devices which want higher quality images can be served them. WordPress has a plugin, soon to be integrated into core, for automatically adding srcset tags to all of your images.

The question nobody seems to answer - which size images should you actually create to begin with? (I’m talking about photos here, not SVGs).

As an example, let’s say I’m serving very large images to desktop users (say, 1400px wide). I don’t want to serve that to all mobiles as well, so I need to generate some smaller sizes. Maybe I arbitrarily choose 1024px to cover tablets, 600px wide for some larger phones, and 320px wide for the smallest phones.

Wait, but now using srcset, 320px wide mobiles with 2x retina quality want a 640px wide image, so are going to be served the way-too-big 1024px instead. OK, so let me change 600px to 640px. Wait, but now there are 375px wide iPhones, and 414px wide iPhones - and any combination of 1x, 2x, and 3x retina quality! Let alone when those devices are rotated or new ones come out, or when you consider that images (eg featured images for a blog post) may appear at different sizes in different places throughout the website before responsiveness even comes into the equation.

The more sizes I create, the more my server gets unnecessarily filled up with giant numbers of images. Do I really need to generate 20 different image sizes? How do I balance creating a new size vs having an unnecessary large download for a certain device?

At this point, I usually end up thinking I should avoid srcset, and use the picture element. This way I can just generate a small number of sizes - 320, 640, 1024 (though whether those are good choices I don’t know) - and ensure that mobiles get served the smallest one that will fit, ignoring the retina side of things. That might result in slightly blurry images due to the lack of retina quality, but a much faster page load, a key factor on mobiles.

And then of course I read https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/, which says you shouldn’t do that at all.

Does anyone have any advice on this matter?

2

There’s no “ideal” for this yet! For most projects I create a number of images then use a best fit principle based on content and design.

Typically I may create something like this for each images group:

General images

  1. Original
  2. Large (say 1600px wide)
  3. Medium (say 960px wide)
  4. Small (say 480px wide)
  5. Thumb (say 220x220 square)

Galleries

  1. Original
  2. Large (say 1200px wide)
  3. Medium (say 600px wide)
  4. Thumb (say 220x220 square)

Misc

  1. Originals
  2. 960x320 for feature header images
  3. sized to 100px tall for things like logos where they need to be presented in rows of the same height
    … etc

Of course it really depends what the site needs as to how many variations you need. So long as you have the originals and you need a new size, or existing size altering its normally easy to add or regenerate them.

3

Thanks for the reply. I’m not 100% sure if you understood what I’m referring to though, since there’s no connection at all between the sizes to generate and the site layout/requirements - this is solely about performance optimisation.

That is, take your original image and apply max-width:100% - it will display at any width between 320px and the original size based on the device being used. If I add 480px and 960px wide versions to the srcset, this will be the result:

iPhone 4: displays at 320px, looks for 640px due to 2x retina, downloads the 960px
iPhone 6: displays at 375px, looks for 750px due to 2x retina, downloads the 960px
iPhone 6 Plus: displays at 414px, looks for 1242px due to 3x retina, downloads the 1600px
iPad vertical: displays at 768px, looks for 1536px due to 2x retina, downloads the 1600px
iPad horizontal: displays at 1024px, looks for 2048px due to 2x retina, downloads the original
typical desktop: displays at 1366px, downloads the 1600px wide version

The small thumbnail size hasn’t been used at all; a horizontal iPad loads a bigger image than desktop screens, and all devices are downloading images considerably larger than necessary.

With the aim being to generate a ‘lighter/faster’ mobile experience, the end result is very few improvements over just serving the desktop sized image to everyone (in some case, made it worse).

4

I do understand :smile:

For you example iPhone4 you’d likely need a 640px image, so when screen size is 320 the x2 version needs to be 640px which you’re not using?

I’d suggest to get the best all round solution you’d need say:

320px
640px
960px
1180px
1500px
1920px

…to cover most bases including x2 images where applicable. You could of course throw in mid point sizes such as 480px but that’s yet another size to create.

Another possibility is to use dynamic on the fly sizing (and caching sized images), that way you only create and cache what you need.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.