What are the best practices for the number of srcset items for a dynamically sized image?

I have the ability using server side rendering to render as many different source images as necessary, given that the library (in this case, sharp) can render any size requested. When is the overhead of having too many possible permutations of sizes a performance hinderance? It seems like no matter what if you are selecting only a handful of sizes, your images are not being optimally sized for every possible screen size. I've Google searched for any kind of best practice information on this topic and have come up dry in finding any official recommendation from Google, Apple, Mozilla, or other browser makers, or any of the HTML W3C Draft docs and discussions. It's only more complicated given the various pixel densities across all devices... I have <meta http-equiv="accept-ch" content="DPR, Width, Viewport-Width"> also in place, just in case that client hints might assist in some way to select the best possible image for the user/screen size - but that also seems a bit of a black box of uncertainty.
No description
1 Reply
dysbulic 🐙
dysbulic 🐙7mo ago
I'd look at the data size of the images you're generating. The point is to allow smaller downloads for smaller screens, but if there's only a difference of a few bytes between your versions there's no real point in having them. I'd shoot for at least a 20% difference in image (byte) sizes between versions.