search

Hivekind / hivekind.com

0 stars 0 forks source link

convert all local images to webp #90

Closed parasquid closed 2 months ago

parasquid commented 3 months ago

aside from that, use local imports for better optimization: https://nextjs.org/docs/pages/building-your-application/optimizing/images

we currently use a custom loader for all images which is fine for remote images but local images can be optimized further by doing a local import since nextjs will have more information about the image during build time

with local imports we can also use https://nextjs.org/docs/pages/api-reference/components/image#placeholder a blur placeholder which allows a fast loading of a small payload which then gets replaced by the original image, making for a faster perceived load time

parasquid commented 3 months ago

https://github.com/cyrilwanner/next-optimized-images

(was unable to make this work)

parasquid commented 3 months ago

https://developers.cloudflare.com/images/get-started/ might be better (instead of manually optimizing each image, just use cloudflare image api as a custom loader)

(won't work since we need to "purchase" access even if it's $0)

parasquid commented 3 months ago

https://next-export-optimize-images.vercel.app/docs/getting-started might be a good choice, but this also means the images are optimized at build time (meaning it's using cloudfflare pages builder) and can lengthen deployment.

This probably means we should just optimize the images locally and check optimized images in the repo.