Image CDN Optimization Engine

Automated image optimization and delivery toolkit covering format conversion, responsive sizing, lazy loading, CDN configuration, and image processing pipelines for optimal web performance.

When to Use This Skill

Choose Image CDN Optimization when:

• Optimizing image delivery for web performance (Core Web Vitals)
• Setting up image transformation CDNs (Cloudinary, imgix, Cloudflare Images)
• Implementing responsive images with srcset and sizes
• Automating image format conversion (WebP, AVIF)
• Building image processing pipelines for user-uploaded content

Consider alternatives when:

• Need image editing — use image editor tools
• Need AI-generated images — use image generation models
• Need video optimization — use video CDN solutions

Quick Start

Copy
# Activate image CDN optimization
claude skill activate smart-image-cdn-optimization-engine

# Optimize image delivery
claude "Set up image optimization for our Next.js e-commerce site"

Example: Responsive Image Implementation

Copy
// Next.js optimized image component
import Image from 'next/image';

function ProductImage({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={600}
      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
      placeholder="blur"
      blurDataURL="data:image/svg+xml;base64,..."
      loading="lazy"
      quality={80}
    />
  );
}

// HTML responsive images with modern formats
function ResponsiveImage({ basePath, alt }: { basePath: string; alt: string }) {
  return (
    <picture>
      <source
        type="image/avif"
        srcSet={`
          ${basePath}?w=320&f=avif 320w,
          ${basePath}?w=640&f=avif 640w,
          ${basePath}?w=1024&f=avif 1024w,
          ${basePath}?w=1920&f=avif 1920w
        `}
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
      />
      <source
        type="image/webp"
        srcSet={`
          ${basePath}?w=320&f=webp 320w,
          ${basePath}?w=640&f=webp 640w,
          ${basePath}?w=1024&f=webp 1024w,
          ${basePath}?w=1920&f=webp 1920w
        `}
        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
      />
      <img
        src={`${basePath}?w=800&f=jpeg`}
        alt={alt}
        loading="lazy"
        decoding="async"
        width={800}
        height={600}
      />
    </picture>
  );
}

Core Concepts

Image Format Selection

Format	Best For	Compression	Support
AVIF	Photos, complex images	Best (50% smaller than JPEG)	92%+
WebP	General purpose	Great (25-35% smaller than JPEG)	97%+
JPEG	Universal fallback	Good (baseline)	100%
PNG	Transparency, screenshots	Lossless (large)	100%
SVG	Icons, logos, illustrations	Vector (tiny)	100%

CDN Image Services

Service	Features	Pricing Model
Cloudflare Images	Transform, resize, variant management	Per-image stored + delivered
Cloudinary	Transform, AI crop, effects, video	Credit-based
imgix	Real-time URL-based transforms	Per-master-image
Next.js Image	Built-in, automatic optimization	Free (self-hosted)
Vercel Image Optimization	Next.js integrated, global CDN	Per-source-image

Configuration

Parameter	Description	Default
default_format	Auto-negotiate or fixed format	auto (content negotiation)
default_quality	JPEG/WebP quality (1-100)	80
max_width	Maximum output width	1920
breakpoints	Responsive breakpoints	[320, 640, 1024, 1440, 1920]
lazy_loading	Enable lazy loading by default	true
placeholder	Placeholder type: blur, color, none	blur
cache_ttl	CDN cache duration	30 days

Best Practices

1. Serve AVIF with WebP and JPEG fallbacks using <picture> — AVIF offers 50% compression improvement over JPEG. Use content negotiation (Accept: image/avif) or the <picture> element with source type hints to serve the best format per browser.

2. Always specify width, height, and sizes attributes — These prevent Cumulative Layout Shift (CLS) by reserving space before the image loads. The sizes attribute tells the browser which srcset variant to download, preventing oversized downloads.

3. Use blur-up placeholders for perceived performance — Generate a tiny (20-40 byte) blurred placeholder inline in the HTML. Display it immediately, then fade in the full image when loaded. This eliminates the jarring pop-in effect of lazy-loaded images.

4. Set Cache-Control headers for immutable image URLs — Use content-hash URLs (/images/hero-a1b2c3.webp) with Cache-Control: public, max-age=31536000, immutable. This allows indefinite caching without stale content risk.

5. Implement automatic responsive image generation in the build pipeline — Generate all responsive variants at build time or upload time, not on-the-fly. This eliminates cold start delays and ensures consistent processing. Use sharp or an image CDN for automatic resizing.

Common Issues

Images cause poor LCP (Largest Contentful Paint) scores. Preload the LCP image with <link rel="preload" as="image" href="hero.webp">. Don't lazy-load above-the-fold images. Set fetchpriority="high" on the LCP image element.

Different image CDN URLs cause cache fragmentation. Normalize image URLs to a single canonical form. Handle query parameter ordering consistently. Use CDN-level URL normalization to collapse variations like case differences and parameter ordering.

User-uploaded images have inconsistent quality and dimensions. Process all uploads through a normalization pipeline: validate file type, strip EXIF metadata (privacy), resize to maximum dimensions, convert to WebP, and generate responsive variants. Store originals separately for reprocessing.