I'm currently working with Next.js and the next/image component for image rendering. I've been using it to optimize image loading in my application, but I'm curious about the technical details of how it works under the hood. Specifically, I'd like to know if it makes any API calls during the optimization process.
Here's what I understand so far:
However, I couldn't find information on whether next/image makes any API calls during this optimization process. My goal is to gain a deeper understanding of its internal workings. Any insights or resources on this topic would be greatly appreciated.
When you have code like this:
<Image width={180} height={37} src="/test.jpg" />
When the component is rendered, default loader will change the src url to /_next/image?url=/test.jpg&w=384&q=75 which in turn contains all the parameters needed for optimization, like quality and width. On the server side NextJS will then optimize and crop/resize the image using sharp. These optimized images are then cached so that subsequent requests to the same image don't require optimizing it again. If you're hosting on Vercel, it would use Vercel's own image optimization service.
Note that it's also possible to make custom loader for image optimization. This will allow you to use any image optimization service you want. Custom loaders are implemented by simply giving the image component a function which takes src, width, quality and returns the url where to load the optimized image. Typically you put the quality and width as url params just like the default loader does.
const imageLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}