Image optimization

Easel image optimization transforms source images into appropriately sized and encoded responses for supported framework integrations.

How it works

A framework image component generates an optimization request containing the source image and requested dimensions. Easel validates the request, retrieves or reads the source, performs the supported transformation, and caches 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 the framework-native image component when the matching Easel framework guide marks image optimization as supported.

Static applications can serve pre-generated responsive images directly from deployment assets.

Remote images

Remote image sources must match the framework and platform allowlist configuration. Restrict patterns to trusted hosts and paths. Broad remote-image patterns can allow unintended fetches and increase resource usage.

Cache behavior

Transformed variants are cached independently based on source, dimensions, format, and other supported transformation parameters. Updating a remote image at the same URL may not immediately invalidate previously cached variants.

Performance guidance

Provide explicit width and height to reduce layout shift.
Use responsive sizes values so browsers do not request unnecessarily large images.
Prefer modern source formats where practical.
Avoid generating excessive near-duplicate dimensions.
Keep remote origins reliable and cacheable.

Security

Image optimization fetches source images server-side. Restrict remote patterns to trusted hosts and paths. Prefer framework-native configuration documented in the matching framework guide.

Troubleshooting

Check the framework guide, remote-source allowlist, requested dimensions, source response headers, and related limits when an image returns an error or bypasses optimization.