<b>The recipe blog paying for pixels nobody saw</b>

<b>The recipe blog paying for pixels nobody saw</b>

A recipe blog served 4000px hero JPEGs to phones rendering them at 380px. Their CDN cached faithfully — and faithfully shipped 1.8MB images to mobile users in Manila on 3G, where the page took 11 seconds to settle.

We moved format and resize decisions to the edge. The CDN now reads the <code>Accept</code> header, serves AVIF to Chrome and WebP to Safari, and resizes to the requested width via a query param the theme appends. Origin still stores one master file; the edge does the rest and caches each variant.

Mobile hero payload fell from 1.8MB to 94KB. Manila page-settle dropped from 11s to 2.4s. Bandwidth billing dropped 61% month over month because the edge stopped pushing desktop pixels to phones.

The number that mattered: 1.8MB to 94KB per hero image.