Image optimization

Easel image optimization resizes and re-encodes source images for supported framework image components, such as next/image.

How it works

The framework image component requests an image with a source and target dimensions. Easel validates the request, checks its cache, and on a miss fetches or reads the source, resizes and encodes it, then caches and returns the result.

Browser image request
  ↓
Validate source and dimensions
  ↓
Optimization cache lookup
  ↓ miss
Fetch or read source image
  ↓
Resize and encode
  ↓
Cache and return response

Framework support

Use your framework's image component when its framework guide marks image optimization as supported. Static sites can serve pre-generated responsive images directly from deployment assets.

Remote images

Easel fetches remote source images server-side, so a remote source must match your framework's allowlist, such as images.remotePatterns in Next.js. Restrict patterns to trusted hosts and paths. Broad patterns allow unintended fetches and increase resource usage.

Cache behavior

Easel caches each transformed variant separately by source, dimensions, format, and other transformation parameters. Replacing a remote image at the same URL doesn't immediately invalidate variants that are already cached, so publish changed images at a new URL. See Caching for how the CDN caches responses.