Lazy Loading Images in WordPress: Beyond the Basics

Since WordPress 5.5, images get loading="lazy" automatically. Problem solved, right? Not quite. Native lazy loading is a good start, but there are several performance wins most WordPress sites are leaving on the table.

The LCP Problem

Largest Contentful Paint (LCP) is a Core Web Vital that measures how quickly the main content appears. If your hero image has loading="lazy", the browser will not start downloading it until it appears in the viewport — which means it loads late and tanks your LCP score.

WordPress 6.3+ handles this for featured images in the main content, but if your theme uses custom hero sections, you need to explicitly mark above-the-fold images:

<img src="hero.jpg" loading="eager" fetchpriority="high" alt="Hero">

The fetchpriority="high" attribute tells the browser to prioritize this image over other resources.

Responsive Images with srcset

WordPress generates multiple image sizes and adds srcset attributes automatically. But I often see themes that bypass this by hardcoding image URLs. Always use wp_get_attachment_image() instead of building <img> tags manually:

echo wp_get_attachment_image($attachment_id, "large", false, [
    "loading" => "lazy",
    "sizes"   => "(max-width: 768px) 100vw, 50vw",
]);

The sizes attribute is critical — it tells the browser which image size to download based on the viewport. Without it, the browser defaults to the full-width image even on mobile.

WebP and AVIF Conversion

Modern image formats can cut file sizes by 30-50% compared to JPEG. WordPress 6.1+ supports WebP output for new uploads if the server has the right libraries. For AVIF support and converting existing images, I use a build-time approach rather than a plugin:

# Convert all JPEGs to WebP
find wp-content/uploads -name "*.jpg" -exec cwebp -q 80 {} -o {}.webp ;

Combined with an Nginx configuration that serves WebP when the browser supports it, this approach is faster and more reliable than real-time conversion plugins.

The Impact

On a recent portfolio site, combining proper lazy loading, responsive images, and WebP conversion improved the PageSpeed score from 62 to 94 on mobile. Image optimization is low-hanging fruit that most WordPress sites are not fully utilizing.