Open gevuong opened 2 months ago
This repo uses the same image optimizer package, just a slightly older version. If you inspect the home page's header image, it has the srcset
property set to multiple webp
files and renders the optimized image, not the original .png
file..
maybe something can be learned by investigating their implementation..
https://github.com/porscheofficial/porscheofficial.github.io/tree/feat/art-direction
To see an example of this package in action, open dev tools at this url, https://reactapp.dev/next-image-export-optimizer. When you slide the slider horizontally, a new request is made to fetch a smaller or larger image.
I think what's causing this issue is that the optimized images are being searched in a directory that cannot be found due to the base path being prefixed to the target directory. I suspect that once a custom domain is used and the base path is removed, optimized images generated during build will be used.
The optimized image are generated at build time after static exporting, but those images are not used when the pages are rendered. Instead, the non-optimized, original images are used, impacting performance..
Ideally, I think we would want an srcset assigned to multiple sizes of an image so that the browser will determine which sized image to render based on the user's screen. If a user is viewing the site on mobile, then render a smaller image. If on desktop, render a larger image.
For more details, I created an issue in
next-image-export-optimizer
documenting my findings and asking for help: https://github.com/Niels-IO/next-image-export-optimizer/issues/227