-
The
next/imagecomponent is pretty awesome. I always knew it was clever but the more I drill into it, the better it gets -
If your app is deployed to Vecel, it will do the image optimisation for you using Vercels edge networks. i.e it will optimise the images via its edge functions on the fly to give users the optimum image their browser can support. https://vercel.com/docs/concepts/next.js/image-optimization#edge-network-optimization
-
Other things it does under the hood:
- Automatically serves the images in modern image formats like WebP, which is about 30% smaller than JPEG, if the browser supports it.
- Optimize images on demand. Build time won’t change.
- Lazy-load the image inside the page only when a certain threshold is reached while scrolling the viewport.
- You can decide to use it with Vercel’s internal CDN or other providers like Cloudinary or Akamai.
- You can specify different image sizes for different and custom resolutions to be used dynamically.
- Automatically changes the quality of the photo to a lower threshold set to 75%. This can be changed for each invocation.
https://betterprogramming.pub/how-to-use-next-js-10s-new-image-component-3b39dc4efe6f