WP Speed Guide 2026
Back to Guides
Media 12 min Updated 2026

Next-Gen Image Optimization

Compress images without losing quality, serve WebP/AVIF formats, and implement responsive images for lightning-fast visual loading.

Next-Gen Image Optimization for WordPress

Images often account for more than 50% of a page's total file size. Optimizing them is one of the easiest wins for performance. In this guide, we'll explore how to compress images, serve them in next-gen formats like WebP and AVIF, and implement responsive sizing.

Why Image Optimization Matters

Large, unoptimized images cause:

  • Slow LCP (Largest Contentful Paint): A core web vital that affects SEO.
  • High Bandwidth Usage: Costing you more money.
  • Poor Mobile Experience: Users on 4G/5G networks will bounce if images take too long to load.

Step 1: Choosing the Right Format

Forget JPEG and PNG for most use cases. It's 2026.

  • WebP: Supported by all modern browsers. significantly smaller than JPEG/PNG.
  • AVIF: The newest standard. Even smaller than WebP with better quality, but slightly less support (though mostly universal now).

Recommendation

Serve AVIF to browsers that support it, fall back to WebP, and finally JPEG/PNG for ancient devices.

Step 2: Automating Optimization with Plugins

You shouldn't manually optimize every image. Use a plugin to handle it on upload.

  1. ShortPixel Image Optimizer: Excellent compression algorithms (Glossy/Lossy).
  2. Imagify: Great integration with WP Rocket.
  3. EWWW Image Optimizer: Good for server-side optimization.

Configuration (ShortPixel Example)

  1. Install ShortPixel.
  2. Go to Settings > ShortPixel.
  3. Compression Type: Choose Glossy (best balance) or Lossy (max speed).
  4. Also create WebP versions of the images: Check this.
  5. Also create AVIF versions of the images: Check this (if your plan allows).
  6. Deliver the WebP/AVIF versions: Check this to rewrite HTML to serve these formats.

Step 3: Lazy Loading

Lazy loading defers the loading of off-screen images until the user scrolls near them.

WordPress 5.5+ has native lazy loading (loading="lazy"), but it's often too aggressive or not aggressive enough.

Refining Lazy Loading

If you use a performance plugin like WP Rocket or Perfmatters:

  1. Enable LazyLoad for Images.
  2. Exclude Leading Images: This is CRITICAL. You must exclude the first image (logo, hero image) from lazy loading to improve LCP.
    • Inspect your hero image, find its class or filename.
    • Add it to the "Excluded images" box.

Step 4: Responsive Images (srcset)

WordPress automatically generates multiple sizes of each uploaded image (Thumbnail, Medium, Large). It then uses the srcset attribute to tell the browser which one to download based on the screen width.

Ensure your theme supports this. Most modern themes do.

To check:

  1. Right-click an image on your site.
  2. Select Inspect.
  3. Look for the srcset attribute in the <img> tag.

If it's missing, your theme might be hardcoding image sources.

Step 5: Serving Images from a CDN

We'll cover CDNs in depth in the next guide, but for images, it's vital. A CDN serves your images from a server closest to the user.

Most image optimization plugins (like ShortPixel or Optimole) offer a CDN service.

Using Cloudflare Polish

If you use Cloudflare Pro:

  1. Go to Speed > Optimization.
  2. Enable Polish.
  3. Set to Lossy.
  4. Check WebP.

This automatically optimizes images at the edge, without needing a WordPress plugin.

Conclusion

By implementing AVIF/WebP formats, proper compression, and lazy loading (while excluding the hero image), you can cut your page weight in half.

Next, we'll look at Content Delivery Networks (CDNs) to serve these optimized assets globally.