---
name: serve-images-from-a-cdn
description: "Compressed WebP copies on a CDN, originals kept, your app server serves zero image bytes."
---

# Serve images from a CDN

Purpose:: Project images load fast and cheap from a CDN; the app server serves zero image bytes.

Rules::
- Originals stay local; only compressed WebP copies go up
- One storage zone and one pull zone per project
- No images in the public folder, no proxy routes, no paid image optimizing

Inventory::
- A CDN with storage (Bunny, Cloudflare R2 or similar) and its API key
- Your image folder

Steps::
1. Create the storage and pull zone named after the project
2. Convert images to WebP (plus thumbnails if needed) and upload; skip files already there
3. Write a manifest JSON (url, size, thumb) the site reads
4. Allow the CDN host in the framework's image settings; turn off server optimizing
5. Check one URL answers 200 image/webp
6. Reply in one line: files uploaded, MB stored, sample URL

Metrics::
- Every image URL answers from the CDN
- Re-running uploads nothing twice

Source:: https://isklls.com/skills/serve-images-from-a-cdn (iSklls, free skill library)