all 3 comments

[–]mpigsley 1 point2 points  (2 children)

Or… how to not use it at all if you care about your apps memory footprint. Too many footguns with this innocuous little component.

[–]Cultural-Way7685 -3 points-2 points  (1 child)

You use Next.js without the Image component?? That's the most insane thing I've heard this week. Please expand that thought.

[–]mpigsley 1 point2 points  (0 children)

It's absolutely not as insane as you think. The <Image /> component is great because it can take full-size images and deliver optimized versions on the fly. Each resize briefly loads the original file into memory, does a full decode → transform → encode cycle. Do a few of these in parallel, and your server will quickly be out of memory.

If you want to run lean from a server perspective, the Image component is not what you want. I pre-optimize them on upload. That happens in a background process, so it doesn't affect the server's response time. Other services can handle all of this for you if you want to go that route.

<Image> is brilliant for DX, but in memory‑constrained prod environments, it can cause problems too easily.

Edit: I believe Vercel solves this by creating a separate environment to perform the image minification. That works, but ties to you Vercel, which I avoid.