WordPress Image Optimization: WebP, Lazy Loading & CDN

On average, images account for 51% of a webpage's total size. On WordPress sites with large hero images and photo-heavy blog posts, that can exceed 80%. Optimizing images is the highest-ROI performance improvement for most WordPress sites.

Step 1: Choose the right format

WebP — the gold standard

WebP offers 25-35% smaller file sizes than JPEG at the same visual quality, and supports transparency (unlike JPEG). All modern browsers support WebP. WordPress 5.8+ can natively convert uploaded images to WebP.

To enable WebP conversion in older setups, use a plugin: Smush, Imagify, or ShortPixel all handle automatic WebP conversion.

AVIF — the next step

AVIF is 50% smaller than JPEG and 20% smaller than WebP. Browser support is now widespread. Some optimization plugins (Imagify) support AVIF with a WebP fallback.

SVG for logos and icons

Never use PNG or JPEG for logos, icons, or simple graphics. SVG files are resolution-independent and often smaller than 1KB.

Step 2: Resize images before uploading

WordPress generates multiple sizes of every uploaded image (thumbnail, medium, large, full). If you upload a 6000×4000 DSLR photo for a blog post, you're storing 20MB+ of image data on disk. Before uploading:

• Resize to maximum display width (typically 1200-1600px for blog posts)
• Use tools like Squoosh.app, TinyPNG, or ImageOptim
• Target file size: under 150KB for typical blog images, under 300KB for hero images

Step 3: Enable lazy loading

Lazy loading defers off-screen images from loading until they're near the viewport. WordPress 5.5+ adds loading="lazy" to images automatically. Verify it's working by checking your page source.

For background images set via CSS, use the Intersection Observer API or a plugin like a3 Lazy Load.

Step 4: Serve from a CDN

A Content Delivery Network (CDN) serves your images from servers geographically close to each visitor, reducing latency. Popular options that work well with WordPress:

• Cloudflare — Free tier, images served from 250+ locations
• BunnyCDN — Very affordable ($0.01/GB), excellent performance
• Cloudinary — Image-specific CDN with automatic WebP conversion and resizing

Step 5: Set explicit dimensions

Always add width and height attributes to <img> tags. This allows the browser to reserve space before the image loads, preventing Cumulative Layout Shift (CLS) — a Core Web Vitals metric.

Recommended image optimization plugins

• Smush — Free tier is generous, automatic WebP, lazy loading
• Imagify — Excellent WebP + AVIF support, 25MB/month free
• ShortPixel — Competitive pricing, good compression ratios
• EWWW Image Optimizer — Free, open source, runs locally