I am seeking information regarding the handling of srcset by various browsers when implemented through JavaScript, specifically using new Image().srcset. My primary interest lies in understanding whether browsers effectively download only the necessary image files based on the specified criteria.
Here is a code example for reference:
let img = new Image();
img.srcset = "image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w";
img.sizes = "(max-width: 320px) 280px, (max-width: 480px) 440px, 800px";
img.src = "image-800w.jpg"; // Fallback source
Context: My objective is to preload images without attaching them to the current DOM, while ensuring that srcset functionality and responsive loading based on viewport size are appropriately respected.
I would greatly appreciate any insights or resources regarding browser support and behavior in this context.