Your WordPress Images Are Killing Your Core Web Vitals — Here’s the Fix
Images are responsible for some of the best and worst WordPress SEO outcomes. When done right, they enhance content, drive image search traffic, and improve engagement. When done wrong — and on most WordPress sites they’re done spectacularly wrong — they decimate your Core Web Vitals scores, tank your LCP rating, and send your search rankings southbound. The fix isn’t complicated, but it requires understanding what’s actually happening under the hood.
The Core Web Vitals Image Problem
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on the page to fully render. On most websites, that element is an image — usually the hero image at the top of the page, or the featured image in a blog post. If that image is a 4MB PNG uploaded at 4000px wide and displayed at 800px, your LCP is going to be terrible. Google will mark your page as “Needs Improvement” or outright “Poor” — and that’s a direct ranking signal.
Cumulative Layout Shift (CLS) is the other image-related Core Web Vital that destroys WordPress sites. CLS measures how much page elements shift around during loading. When you embed images in your content without specifying their width and height attributes, the browser doesn’t know how much space to reserve for them until they load. So it renders the text, then shoves everything down when the image appears. That shift is CLS, and it’s infuriating for users and penalizing for SEO.
The Modern Image Format Revolution
JPEG and PNG are legacy formats. WebP offers 25-35% smaller file sizes at equivalent visual quality compared to JPEG. AVIF — the even newer format — can achieve 50% smaller files than JPEG. Modern browsers support both formats. Yet most WordPress sites are still serving JPEGs and PNGs because nobody ever bothered to change the default workflow.
The fix is to install an image optimization plugin that automatically converts uploads to WebP or AVIF and serves them to browsers that support the format while falling back to JPEG for older browsers. This should be a one-time setup that then runs on every upload automatically. Look for a plugin that handles both format conversion and aggressive compression — the combination of format change plus compression can reduce image sizes by 60-80% without any visible quality loss.
Lazy Loading: The Right Way
WordPress has had native lazy loading since version 5.5, which automatically adds loading=”lazy” to images that aren’t in the initial viewport. This is good, but there’s a critical mistake many sites make: lazy loading the above-the-fold hero image. If the largest image on your page is lazy loaded, the browser intentionally delays fetching it — which means your LCP score suffers because you’ve told the browser not to prioritize the most important image.
The fix is to use loading=”eager” or fetchpriority=”high” on your above-the-fold hero image and featured image, while keeping loading=”lazy” on everything below the fold. Some caching and performance plugins handle this automatically. If yours doesn’t, you may need to add a small code snippet to your theme that adds the fetchpriority=”high” attribute to the first image in your content and your featured image.
Responsive Images and the srcset Attribute
WordPress automatically generates multiple image sizes when you upload a file and uses the srcset attribute to serve the appropriately sized image based on the viewer’s screen size and resolution. This is excellent when it works — but it breaks down when themes and page builders bypass the standard WordPress image handling, or when you insert images using hardcoded img tags instead of the native media inserter.
Audit your pages for images without proper srcset attributes. In your browser dev tools, check if your images have srcset defined. If they don’t, you’re potentially serving desktop-sized images to mobile users — a massive unnecessary bandwidth cost that directly impacts your mobile LCP score. This is particularly common with hero images and banner images added directly in theme settings.
Defining Image Dimensions to Kill Layout Shift
Every image in your WordPress content should have explicit width and height attributes. Modern WordPress does this automatically when you insert images through the block editor. The problem is older content uploaded before WordPress managed this, images inserted via custom HTML blocks, or images added by plugins that don’t follow the standard. Run a site audit and find every image missing its dimensions. Add them. Your CLS score will drop and your user experience will improve immediately.
Image SEO is not a nice-to-have optimization anymore. With Core Web Vitals as a confirmed ranking signal, the difference between a site that handles images correctly and one that doesn’t can be the difference between page one and page three rankings for identical content. Get your images right and you’ve solved one of the most impactful technical SEO problems on the modern web.