search

gevuong / minimal-i18n-with-app-router

Rebuilding the marketing site so it's deployable to GPages @virufy. It supports static exports with image optimization, and internationalized routing with App Router.
https://gevuong.github.io/minimal-i18n-with-app-router/en
MIT License
0 stars 2 forks source link

web pages are not automatically using optimized images from build #3

Open gevuong opened 2 months ago

gevuong commented 2 months ago

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

gevuong commented 1 month 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

gevuong commented 3 weeks ago

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.

gevuong commented 3 weeks ago

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.