← Lessons

quiz vs the machine

Platinum1740

System Design

Image Optimization at Edge

Resizing and reformatting images at the PoP for each device.

5 min read · advanced · beat Platinum to climb

The image weight problem

Images are often the heaviest part of a page. Shipping one huge master image to phones, laptops, and tablets wastes bandwidth and slows pages. Edge image optimization transforms images at the PoP to fit each request.

What the edge does

  • Resize to the displayed dimensions for the device.
  • Reformat to modern codecs like webp or avif when the browser supports them.
  • Recompress to a quality target that balances size and clarity.

How it caches

The transformed result is cached at the edge keyed by its parameters, so the first request pays the transform cost and the rest hit. The browser accept header drives format selection, which becomes a controlled vary dimension.

Why do it at the edge

Doing this at the origin means precomputing many variants or scaling compute centrally. At the edge, transforms run on demand near the user and cache locally, so you store one master and derive the rest. This shrinks payloads and keeps origin storage simple.

Key idea

Edge image optimization derives device sized, modern format variants from one master on demand and caches them near users, shrinking page weight.

Check yourself

Answer to earn rating on the learn ladder.

1. What drives the edge to pick webp or avif?

2. What is the storage benefit of edge image optimization?