next-optimized-images icon indicating copy to clipboard operation
next-optimized-images copied to clipboard

[canary] Img component bloats page JS files by inlining alternative images in the srcset

Open tilman opened this issue 3 years ago • 2 comments

I noticed that my Page get's very large if using the new Img Component. If using only a few Img Elements with each a few combinations of density, webp and sizes, the component will inline all alternative images from the srcset which are under 8Kb, even if they may never be used because of the wrong screen size or density. Hence that, I would suggest to turn off inlining of the images for the srcset by default or to add a new option which controls if the srcset alternatives should be inlined or not.

In my case I decreased my index page from 250kb to 80kb and increased the page speed from 60 to 95 just by lowering the inline limit to 1kb so that no alternatives are getting inlined.

tilman avatar Jul 24 '20 13:07 tilman

Thank you for the report 👍 Yes, I think it makes sense to disable automatic inlining if there are more than 1 images in the srcset. I'll do that in the next canary version.

cyrilwanner avatar Jul 25 '20 12:07 cyrilwanner

3.0.0-canary.4 should now work as you suggested it. Can you try it again and confirm that it now works as you would expect it to work? Thanks!

cyrilwanner avatar Jul 27 '20 22:07 cyrilwanner