That's what srcset & <source> were invented for.
> Furthermore, 30% of images on web pages are outside of the initial viewport, meaning the browser loads images that a user does not see until they scroll further down the page.
That's why we now have a loading=lazy HTML attribute
> When using the next/image component, images are automatically lazy-loaded, meaning they're only rendered when the user is close to seeing the image. This prevents loading that 30% of images outside of the initial viewport.
This has been done many times before. For images outside the viewport it's great; for images which are in the viewport, the browser isn't able to discover the image until the JS has loaded and decided which image size to fetch. In my experience this slows down the overall rendering of the page.
I see the Google Chrome team was involved in creating this component so I'd like to know what's different this time, because they have the data.
> Developers can mark images that are in the initial viewport, allowing Next.js to automatically preload these images. Preloading images in the initial viewport has shown improvements to the Largest Contentful Paint by up to 50%.
How can smart preloading work when the image size isn't known until the JS component runs? If we're back to loading the 2000px image then we're losing a lot of optimization.
If they're relying on client hints [1] then we can get as far as an image as wide as the browser window width, but no more - at the price of poor browser compatibility.
Preloading also has its own costs, as it messes with the browser's prioritization of page content. I've found it easy to prioritize something you know is essential and unintentionally increase load time metrics.