Image Optimization in WordPress: WebP & Lazy-Loading

Images often account for the majority of a webpage’s size, directly affecting speed, SEO, and user experience. Optimizing them can significantly boost your Core Web Vitals. This guide explains how to use WebP and lazy-loading in WordPress to achieve faster load times without sacrificing visual quality.

Why Image Optimization Matters

• Performance: Smaller images mean faster page loads.
• SEO: PageSpeed Insights and Google’s Core Web Vitals reward optimized images.
• User Experience: Faster sites have lower bounce rates and higher engagement.

What Is WebP?

WebP is a modern image format developed by Google that provides superior compression compared to JPEG and PNG. It can reduce file size by up to 30–40% while maintaining image quality.

Advantages of WebP

• Smaller file size with high visual quality.
• Supports both lossy and lossless compression.
• Transparency and animation support (replaces PNG and GIF).
• Fully supported by all modern browsers.

How to Enable WebP in WordPress (Built-In)

Since WordPress 5.8, WebP is natively supported. You can upload WebP files directly through the Media Library just like JPEGs or PNGs.

For older versions or automatic conversions, use plugins such as:

• ShortPixel Image Optimizer
• Imagify
• EWWW Image Optimizer
• WebP Express

Converting Existing Images to WebP (Without Plugin)

If you manage your own server and prefer a code-based solution, you can use cwebp (part of Google’s WebP utilities):

# Convert a JPEG to WebP
cwebp image.jpg -q 80 -o image.webp

Then update your theme to serve .webp versions when available.

Example: Conditional WebP Output in PHP

<?php
// Serve .webp version if supported and available
function serve_webp_image( $image_path ) {
    $webp_path = preg_replace( '/\.(jpg|jpeg|png)$/i', '.webp', $image_path );
    $webp_file = get_theme_file_path( $webp_path );
    if ( file_exists( $webp_file ) && strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
        return get_theme_file_uri( $webp_path );
    }
    return get_theme_file_uri( $image_path );
}
?>

Use it when outputting images:

<img src="<?php echo esc_url( serve_webp_image( 'assets/images/hero.jpg' ) ); ?>" alt="Hero Image">

What Is Lazy-Loading?

Lazy-loading delays image loading until the user scrolls near them. This reduces initial page size and speeds up rendering of above-the-fold content.

Native Lazy-Loading in WordPress

WordPress automatically adds loading="lazy" to images and iframes by default since version 5.5. You can confirm this by viewing your page source:

<img src="photo.jpg" alt="Example" loading="lazy">

When to Disable Lazy-Loading

For critical images like your site’s logo or hero image (Largest Contentful Paint), lazy-loading can delay rendering. You can disable it selectively:

<?php
// Disable lazy-loading for the first post thumbnail (LCP image)
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    if ( is_front_page() && ! empty( $attr['loading'] ) ) {
        static $count = 0;
        if ( $count === 0 ) {
            unset( $attr['loading'] ); // remove lazy
        }
        $count++;
    }
    return $attr;
}, 10, 3 );
?>

Advanced Lazy-Loading with JavaScript (Optional)

If you want finer control or advanced animations, you can use the IntersectionObserver API:

// lazyload.js
document.addEventListener('DOMContentLoaded', function () {
  const lazyImages = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  });
  lazyImages.forEach(img => observer.observe(img));
});

Use it with placeholder markup:

<img data-src="assets/images/feature.webp" alt="Feature" width="800" height="600">
<noscript><img src="assets/images/feature.webp" alt="Feature"></noscript>

Combining WebP and Lazy-Loading

You can safely use both optimizations together. WordPress will automatically handle lazy-loading while serving WebP images to supported browsers. For unsupported browsers, fallback images are shown seamlessly.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" loading="lazy" alt="Optimized image">
</picture>

Plugins for Automatic Optimization

• Smush — automatic compression and lazy-loading.
• ShortPixel — converts and serves WebP and AVIF formats.
• Imagify — image compression with CDN integration.
• EWWW Image Optimizer — server-side optimization and WebP generation.

Performance Tips

• Always define width and height to prevent layout shifts (CLS).
• Use responsive image sizes via srcset and sizes.
• Preload critical images such as hero or LCP visuals.
• Enable browser caching and CDN delivery for images.

Conclusion

Optimizing images with WebP and lazy-loading is one of the easiest ways to boost site performance. WebP drastically reduces file size, and lazy-loading ensures only visible images load initially. Together, they improve both speed and user experience — key factors for SEO and conversion. Start by enabling native WebP uploads, confirm lazy-loading behavior, and fine-tune for critical images to maximize your Core Web Vitals.

Faster images. Faster pages. Better experience.

🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.