← Lessons

quiz vs the machine

Platinum1780

Networking

Image Transformation At The Edge

Resizing and reformatting images on the fly near the user.

6 min read · advanced · beat Platinum to climb

One Source Many Forms

A site needs each image in many sizes and formats for different devices. Edge image transformation stores one master image and derives variants on demand, near the user.

How A Variant Is Made

A request encodes the wanted transform, usually in the URL or query, such as width 400 in a modern format.

  • The edge checks its cache for that exact variant.
  • On a miss it fetches the master, applies the transform, and caches the result.
  • The next request for the same variant is served straight from cache.

So transformation cost is paid once per variant, then amortized.

Format And Quality Negotiation

The edge can pick the best format for each client.

  • Read the Accept header to see which modern formats the browser supports.
  • Serve a newer compact format to capable clients and a fallback to others.
  • Vary the cache key on the chosen format so each client gets a valid file.

Controlling The Variant Explosion

Allowing arbitrary widths and parameters can create a huge number of variants, each a cache entry and a transform job.

  • Restrict to an allow list of sizes.
  • Normalize parameters so equivalent requests share one entry.
  • Treat transform parameters as part of the cache key, but keep that key narrow.

This keeps hit rate high and limits compute spent generating rarely reused variants.

Key idea

Edge image transformation keeps one master and derives sized, reformatted variants on demand, caching each so the cost is paid once, while allow lists keep the variant count under control.

Check yourself

Answer to earn rating on the learn ladder.

1. How is image transform cost amortized at the edge?

2. Why restrict transforms to an allow list of sizes?