Next.js
/Intermediate
Image Optimization
Definition
The under-the-hood process where Next.js uses the Sharp library on the server to dynamically resize, compress, and convert images to modern formats like WebP or AVIF.
Explain Like I'm New
You don't need Photoshop to save 5 different sizes of an image anymore. You just upload one massive, high-quality image to your server. Next.js does the Photoshop work automatically, on-the-fly, generating a tiny mobile version for iPhones and a large version for Desktop monitors.
Real World Example
A user on an old 3G network visits your site. Next.js `<Image>` automatically detects this and serves them a highly compressed WebP image, saving their data plan.
Common Use Cases
- •Automated performance scaling
- •Next-gen image formats
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- What modern image format does Next.js automatically convert JPEG/PNG files into by default?
intermediate
- Does the image optimization process happen at Build Time (`npm run build`) or Runtime?