Deviopath › Next.js

Image Optimizer URL

Easy · Images

The <Image> component from next/image does not load your picture directly. It points the <img> to the built-in image optimizer, which resizes and compresses it: /_next/image?url=<encoded src>&w=<width>&q=<quality>.

Write imageUrl(src, width, quality) that builds this URL:

- url is src encoded with encodeURIComponent

- w is the width

- q is the quality; when quality is not given, use the default 75

Simplified: real Next.js also rounds the width to one of the configured sizes, and in Next.js 16 only qualities listed in images.qualities (default [75]) are allowed.

Next: Title Template