How do you determine a good set of breakpoints for srcset image sizes

My website right now is marginal for page loading speed on mobile. Originally written for desktop, I use a lot of images that are relatively high resolution, and only lightly compressed.

I’d like provide srcset images at various resolutions, but before I start, what are the optimum sizes, and how are they determined?

First approximation that occurs to me is (image as % of screen) * (viewport in pixels) and then calculate this for typical (and what is that, this week?) screen resolutions of desktop, tablet and phone.

On reflection, this approximation is naive.

  • Reducing the resolution of an image that’s too big will give better results than increasing one that is too small.

  • There aren’t really three situations to consider, but five, as both mobile and tablet can be use in either orientation. I don’t want the mobile user to have to slurp up new images when they rotate their phone. This isn’t as big a concern for tablets most of the time, as the bulk of tablet usage is on wifi.

  • Desktop usage has another factor: While screens have gotten wider, many users will have a browser up at less than full width. This one may not matter that much, as desktops have both the bandwidth and the processing speed to resize images.

  • Phones now come in a bewildering range of sizes and resolutions.

At present I’m looking at producing images at widths of 1300, 800, 500, 300 and setting cutoffs at 900 600 and 350, but this is little more than a WAG.