Rendered image dimensions don't seem to match sizes attribute?
Hi, I'm building a website using Next.js and serving images using Cloudinary. I am using the
next/image component and can see the
srcset of 16, 32, 48, 64, 96, 128, 256, 384, 640w... in my rendered image's attributes. I am using
I'd like to know why the returned intrinsic size doesn't seem to have much relevance to the requested size I enter in the
sizes attribute? I'm entering a single value in the
sizes attribute for testing purposes. For example:
sizes="12px" returns the 32w src;
sizes="20px" returns 48w src; this carries on for all sizes, with the
src changing at seemingly unrelated breakpoints. I thought I had found a pattern for the breakpoints between
src 's, where the Retina (2x width) goes from being closer to the size below, to closer to the size above. But this pattern breaks at the 256w
I've included my test spreadsheet showing requested sizes, returned sizes and my guess for the pattern.
How can I predict which size will be served? This is causing my site to load much larger filesizes than needed, and page speed and performance scores to drop.