Image Optimization

Performance

Reducing image file size at the CDN edge through format conversion (WebP, AVIF), responsive resizing, quality adjustment, and metadata stripping. Cuts bandwidth and improves Core Web Vitals without changing the source image.

Updated Mar 9, 2026

Full Explanation

Images are typically 50–70% of a web page's total bytes. Optimizing them at the CDN edge means you store one high-quality source and let the CDN transform it per-request: AVIF for Chrome, WebP for Safari, resized for mobile, compressed for slow connections.

Modern CDN image optimization includes: format conversion (JPEG → WebP saves 25–35%, JPEG → AVIF saves 40–50%), responsive resizing (no point sending a 4K image to a 375px phone screen), quality tuning (perceptual quality optimization finds the lowest file size that looks identical), and metadata stripping (EXIF data, ICC profiles).

The key is doing this at the edge, close to the user, so the smaller file travels over the network. Services like Cloudflare Images, imgix, Cloudinary, and Tinify handle this automatically. For self-hosted CDNs, libvips or sharp behind a caching proxy can do the same.

Try the interactive Compression Comparison animation in the course to compare file sizes and visual quality across different image formats and compression levels.

Examples

Cloudflare image resizing (URL-based):

<!-- Original: 2MB JPEG -->
<img src="/cdn-cgi/image/width=800,quality=80,format=auto/photos/hero.jpg">

<!-- Responsive with srcset -->
<img srcset="
    /cdn-cgi/image/width=400,format=auto/photos/hero.jpg 400w,
    /cdn-cgi/image/width=800,format=auto/photos/hero.jpg 800w,
    /cdn-cgi/image/width=1200,format=auto/photos/hero.jpg 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">

Nginx + libvips image optimization proxy:

# Using ngx_small_light module
location ~ ^/images/(.+)$ {
    small_light on;
    small_light_getparam_mode on;

    # /images/photo.jpg?w=400&q=80&of=webp
    small_light_material_dir /var/www/images;
}

Video Explanation

Frequently Asked Questions

Reducing image file size at the CDN edge through format conversion (WebP, AVIF), responsive resizing, quality adjustment, and metadata stripping. Cuts bandwidth and improves Core Web Vitals without changing the source image.

Cloudflare image resizing (URL-based):

<!-- Original: 2MB JPEG -->
<img src="/cdn-cgi/image/width=800,quality=80,format=auto/photos/hero.jpg">

<!-- Responsive with srcset -->
<img srcset="
    /cdn-cgi/image/width=400,format=auto/photos/hero.jpg 400w,
    /cdn-cgi/image/width=800,format=auto/photos/hero.jpg 800w,
    /cdn-cgi/image/width=1200,format=auto/photos/hero.jpg 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">

Nginx + libvips image optimization proxy:

# Using ngx_small_light module
location ~ ^/images/(.+)$ {
    small_light on;
    small_light_getparam_mode on;

    # /images/photo.jpg?w=400&q=80&of=webp
    small_light_material_dir /var/www/images;
}

Related CDN concepts include:

  • Content-Encoding — An HTTP response header indicating the compression algorithm applied to the response body. Common values: …
Previous Term HTTP Redirects
Next Term Internet Exchange Point (IXP)
Back to Glossary