I'm struggling to see how this feature will be effective if it has to fetch the first 2KB of all images on page-load, just to determine what images are in viewport. Let's say I have 20 images stacked on top of each other ... The browser will need to make 20 image requests to determine which images are in viewport, and only then will it start loading the full images that are within viewport. That's 22 server requests even if there are only 2 images in viewport, something which might slow down the response. And it means 40 server requests for 20 images on a page in total, basically doubling the amount requests.
One could include correct intrinsic placeholders for the images in the layout, but then what would be the point of the browser pre-fetching 2KB data from each image in the first place? Waste of requests and bandwidth.
For now, modern JS IntersectionObserver seems more effective, causing much less requests, only for images in viewport.
Versatile software engineer with a background in .NET consulting and CMS development. Working on regaining my embedded development skills to get more involved with IoT opportunities.
You bring up a very valid point, but I think that the amount of image bloat on most sites these days still makes it a huge net gain at the end of the day.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm struggling to see how this feature will be effective if it has to fetch the first 2KB of all images on page-load, just to determine what images are in viewport. Let's say I have 20 images stacked on top of each other ... The browser will need to make 20 image requests to determine which images are in viewport, and only then will it start loading the full images that are within viewport. That's 22 server requests even if there are only 2 images in viewport, something which might slow down the response. And it means 40 server requests for 20 images on a page in total, basically doubling the amount requests.
One could include correct intrinsic placeholders for the images in the layout, but then what would be the point of the browser pre-fetching 2KB data from each image in the first place? Waste of requests and bandwidth.
For now, modern JS IntersectionObserver seems more effective, causing much less requests, only for images in viewport.
Did I miss something?
You bring up a very valid point, but I think that the amount of image bloat on most sites these days still makes it a huge net gain at the end of the day.