next/image — image optimization

Resize + format conversion (WebP) served through /_bext/image?url=…&w=…&q=…. The endpoint reads from public/, resizes via Lanczos3, and re-encodes as WebP when the browser advertises it via Accept.

Tip
Responses carry cache-control: max-age=31536000, immutable — the same URL always produces the same bytes, so the browser never re-fetches. Change the dimensions (w=) to naturally bust the cache without a manual purge.

Three sizes from the same source

The source /sample-photo.jpg is 1600×900. Each img below is a separate /_bext/image request — open the devtools network panel to see WebP responses.

200px wide

w=200, q=70

400px wide

w=400, q=80

src/app/examples/image/page.tsxTSX
// next/image migration shim — URL → /_bext/image
 import Image from "@bext-stack/framework/next/image";
<Image src="/sample-photo.jpg" width={800} height={450} alt="..." />
// → <img src="/_bext/image?url=%2Fsample-photo.jpg&w=800" ... />

// Or call the endpoint directly:
<img
    src="/_bext/image?url=/sample-photo.jpg&w=400&q=80"
    alt="resized inline"
    loading="lazy"
/>

Related documentation

Image optimization