Image Optimization in 2026: WebP/AVIF, DPR, and Lazy-Loading

Image optimization directly impacts Core Web Vitals and user experience. Here’s how to use WebP/AVIF, responsive delivery, and lazy-loading in 2026.

Performance impact

Images are typically the heaviest assets on a page. Large, unoptimized images hurt Largest Contentful Paint (LCP) and waste bandwidth. Proper optimization—format, size, and delivery—can cut page weight by 50-70% and improve LCP significantly.

For WordPress sites, images are often the easiest performance win. Small changes (converting to WebP, adding lazy-loading) deliver big CWV improvements.

Format comparison

JPEG: Old standard, widely supported, but inefficient. Use only for legacy browser support.

WebP: 25-35% smaller than JPEG at similar quality. Supported by all modern browsers (2026). Use this as your default format.

AVIF: 50% smaller than JPEG, better quality at low bitrates. Support is good but not universal—use with fallbacks.

Conversion strategy

Convert existing images to WebP as a baseline. For hero images and key visuals, also generate AVIF versions and serve them to supporting browsers via <picture> element:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="800">
</picture>

This delivers the best format each browser supports, with JPEG fallback for old browsers.

Serve the right size

Don’t send a 2000px image to a 400px mobile screen. Use srcset to provide multiple sizes and let the browser choose:

<img src="image-800w.webp"
     srcset="image-400w.webp 400w,
             image-800w.webp 800w,
             image-1200w.webp 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Product photo" width="800" height="600">

The sizes attribute tells the browser how wide the image will be displayed, and the browser selects the best srcset option.

Device Pixel Ratio (DPR) delivery

High-DPR screens (Retina, 4K) need higher-resolution images. Use 1.5x or 2x images for these devices, but compress them more aggressively—users on high-DPR screens often can’t see compression artifacts.

Native lazy-loading

Use the loading="lazy" attribute on images below the fold. This defers loading until the image is about to enter the viewport, saving bandwidth and improving LCP.

<img src="below-fold-image.webp" loading="lazy" alt="Supporting image" width="600" height="400">

Don’t lazy-load above-the-fold images (hero, logo)—this delays LCP.

JavaScript lazy-loading

For older browser support, use a JavaScript library like lazysizes. But in 2026, native lazy-loading is sufficient for most sites.

Compression targets

For WebP, aim for 75-85 quality. For AVIF, 60-70 quality often looks equivalent to JPEG 85.

Use tools like Squoosh or ImageOptim to test quality settings visually. Compress as much as you can without visible degradation.

WordPress plugins

Use plugins like ShortPixel or Smush to automate conversion and compression. These can bulk-convert existing images and handle new uploads automatically.

Why alt text matters

Alt text describes images for screen readers and displays when images fail to load. Every image needs descriptive alt text—it’s an accessibility requirement and an SEO benefit.

Good alt text: “WordPress dashboard showing Core Web Vitals metrics”
Bad alt text: “image123.jpg” or blank

WebP Image Format
AVIF Image Format
Google WebP Documentation

Key Takeaways

• Use WebP as default, AVIF for best quality/size ratio with fallbacks.
• Implement responsive images with srcset and sizes.
• Lazy-load below-the-fold images with loading="lazy".

Get performance optimization help