4 ms·

The image component works fine when self-hosting, I use it on several production sites. What is it that doesn't work well without their cloud service? The defa

by cyral 3y ago

The image component works fine when self-hosting, I use it on several production sites. What is it that doesn't work well without their cloud service? The default bundle size is also nowhere near 1MB. Next 13 and server components entire point is to reduce the bundle size by not shipping JS that is only ever called on the server.

leerob 3y ago
next/image optimization works by default when self-hosting. You can optionally use basically any image service you want through a “loader file”. https://nextjs.org/docs/app/api-reference/components/image#loaderfile https://nextjs.org/docs/app/api-reference/components/image#l...
- orf 3y ago
  > Instead of optimizing images at build time, Next.js optimizes images on-demand as users request them.
orf 3y ago
How do I optimise and convert all my static image files to webp with a PNG fallback, then render them as a srcset so the client can pick the best image? I.e everything that’s done here[1] Oh no. You can’t. You need to set “images.unoptimized = true” and be happy about it if you’re not using a cloud image service. 1. https://docs.astro.build/en/guides/images/#properties https://docs.astro.build/en/guides/images/#properties
- cyral 3y ago
  I'm not sure why this is your experience, but the site I am referencing does exactly that. The images are even being pulled from an external domain. They are not PNGs but I am not sure if that makes a difference (they are 100 quality .webp), they get optimized to a lower quality and have srcset, no vercel involved because I do not want a dependency on Vercel.
- 5Qn8mNbc2FNCiVV 3y ago
  You just use the image component and specify the sizes. The png fallback is provided via the server looking for the Accept header so when it supports webp it gives you webp, otherwise you get png (or jpg depending on the original extension)

by cyral 3y ago

leerob 3y ago

next/image optimization works by default when self-hosting. You can optionally use basically any image service you want through a “loader file”. https://nextjs.org/docs/app/api-reference/components/image#loaderfile https://nextjs.org/docs/app/api-reference/components/image#l...

orf 3y ago
> Instead of optimizing images at build time, Next.js optimizes images on-demand as users request them.

orf 3y ago

How do I optimise and convert all my static image files to webp with a PNG fallback, then render them as a srcset so the client can pick the best image? I.e everything that’s done here[1] Oh no. You can’t. You need to set “images.unoptimized = true” and be happy about it if you’re not using a cloud image service. 1. https://docs.astro.build/en/guides/images/#properties https://docs.astro.build/en/guides/images/#properties

cyral 3y ago
I'm not sure why this is your experience, but the site I am referencing does exactly that. The images are even being pulled from an external domain. They are not PNGs but I am not sure if that makes a difference (they are 100 quality .webp), they get optimized to a lower quality and have srcset, no vercel involved because I do not want a dependency on Vercel.
5Qn8mNbc2FNCiVV 3y ago
You just use the image component and specify the sizes. The png fallback is provided via the server looking for the Accept header so when it supports webp it gives you webp, otherwise you get png (or jpg depending on the original extension)