Core Web Vitals: How Image Optimization Can Boost Your Google Rankings

What Are Core Web Vitals?

Core Web Vitals are a set of real-world, user-centric performance metrics that Google uses to evaluate the quality of a page's experience. Since 2021, they have been an official Google ranking signal — meaning websites with poor scores are ranked lower than comparable sites with strong scores, all else being equal.

There are three Core Web Vitals: Largest Contentful Paint (LCP), which measures loading performance; Cumulative Layout Shift (CLS), which measures visual stability; and Interaction to Next Paint (INP), which measures responsiveness. Images are the single biggest factor affecting all three metrics simultaneously. A website with unoptimized images almost certainly has poor Core Web Vitals scores, regardless of how fast its server is.

Understanding how images affect each metric — and knowing the specific thresholds Google uses — is the first step to improving your site's search rankings through image optimization.

LCP: The Metric Most Affected by Images

Largest Contentful Paint measures how long it takes for the largest visible element on the page to fully load and render. For the vast majority of web pages — estimated at over 70% by Google's own data — that element is an image: a hero banner, a product photograph, a featured blog image, or a logo.

Google's thresholds for LCP are: under 2.5 seconds is Good, 2.5 to 4.0 seconds is Needs Improvement, and over 4.0 seconds is Poor. A Poor LCP score is a direct ranking penalty in competitive search results.

The most common cause of a Poor LCP score is a large, uncompressed image being served as the hero element. A 4MB JPG photograph — the kind that comes directly off a modern smartphone camera — can take 8 to 12 seconds to load on a mobile connection. That same image, compressed to 400KB at 85% quality, loads in under a second on the same connection. The visual difference on screen is imperceptible to most users. The performance difference is dramatic.

How to Identify Your LCP Element

To find out which element is your LCP element, open Chrome DevTools, go to the Performance tab, record a page load, and look for the LCP marker in the timeline. Alternatively, run your page through Google's PageSpeed Insights (pagespeed.web.dev), which identifies the LCP element in its report and shows you exactly which image or text block is slowing things down.

Once you know which image is your LCP element, the optimization strategy is clear: compress it, convert it to WEBP, specify its dimensions explicitly in HTML, and if possible, preload it using a link tag with rel="preload". These four steps alone can reduce LCP by 50 to 80% in most cases.

CLS: Why Image Dimensions Matter More Than You Think

Cumulative Layout Shift measures the total amount of unexpected visual movement on a page as it loads. When an image loads without explicit width and height attributes in the HTML, the browser has no way to reserve space for it before the image downloads. The result is a layout shift: text jumps down, buttons move, users accidentally click the wrong thing.

This is one of the most frustrating experiences in web browsing, and Google penalizes it heavily. The Good threshold for CLS is under 0.1. A score above 0.25 is considered Poor.

The fix is straightforward: always include width and height attributes on every image tag. This allows browsers to calculate the aspect ratio and reserve the correct space before the image loads, eliminating the shift entirely. Even if you use responsive CSS to scale images, the width and height attributes still serve as aspect ratio hints.

• Always write img width="800" height="600" for every image, even with responsive CSS
• For dynamically loaded images, use CSS aspect-ratio containers as a fallback
• Avoid inserting images above existing content after page load — this is the most severe form of CLS
• Test for CLS using Chrome's Layout Instability API in DevTools or the CLS report in Search Console

The WEBP Advantage: Smaller Files, Same Quality

WEBP is an image format developed by Google specifically for the web. It uses more advanced compression algorithms than JPG or PNG, producing files that are 25 to 35% smaller than equivalent JPG files at the same visual quality. For lossless content (graphics, logos, screenshots), WEBP is typically 26% smaller than PNG.

Browser support for WEBP is now over 95% globally, covering all modern versions of Chrome, Firefox, Safari, and Edge. If you are still serving JPG for all images, your users are downloading roughly 30% more data than they need to.

Converting your existing JPG and PNG images to WEBP is one of the highest-impact, lowest-effort image optimizations you can make. It requires no changes to your HTML (other than updating the file extension) and produces immediate improvements in page weight and LCP scores.

You can convert your images to WEBP for free using SiteConversor's WEBP Converter tool, which handles batches of JPG and PNG files and processes everything locally in your browser with no upload required.

Image Resizing: Serving the Right Dimensions

One of the most overlooked performance problems is serving images at a much larger size than they are displayed. If your website shows a product thumbnail at 300 pixels wide, but the actual image file is 2,400 pixels wide, you are making the browser download 64 times more pixel data than needed. The browser then scales it down to 300px — discarding the extra resolution.

This is called oversized images and it is flagged as a specific issue in Google's PageSpeed Insights under the "Properly size images" recommendation. The fix is to resize images to their actual display dimensions before serving them.

For responsive designs where the same image might display at different sizes on different devices, the ideal solution is to use the HTML srcset attribute to serve different image sizes to different devices. At minimum, you should create a version sized for desktop (typically 1200-1400px wide) and a version sized for mobile (typically 600-800px wide).

SiteConversor's Image Resizer tool lets you resize images to exact pixel dimensions or by percentage, with optional aspect ratio locking, directly in your browser.

Compression Settings: Finding the Right Balance

Image compression involves a trade-off between file size and visual quality. The key insight is that this trade-off is highly non-linear: reducing JPG quality from 100% to 85% typically reduces file size by 60 to 75% while producing almost no visible quality difference to human eyes. Reducing from 85% to 70% reduces size by another 15 to 20% with minimal visible impact. Going below 60% quality starts to produce visible compression artifacts.

Practical compression targets for different use cases:

• Hero / LCP images: 85% JPG quality or WEBP equivalent. Target under 500KB, ideally under 200KB for mobile.
• Thumbnail / gallery images: 80% JPG quality. Target under 100KB each.
• Background images: 75% JPG quality. These are decorative and quality matters less. Target under 150KB.
• Icons and logos: Use SVG if possible. If raster, use PNG for transparency. Size should be under 50KB.
• Blog article images: 82% JPG quality. Target under 200KB per image.

Lazy Loading: Don't Load What Users Can't See

Lazy loading is the practice of deferring the loading of images that are below the fold — outside the user's initial viewport — until the user scrolls close to them. This dramatically reduces the amount of data loaded on page initialization, which directly improves LCP and overall page load time.

Implementing lazy loading in modern HTML requires just one attribute: loading="lazy". Add this to every image that is not visible in the initial viewport. Do not add it to your LCP image (the hero image), as that would delay its loading and worsen your LCP score.

For a blog post with 10 images, lazy loading the 9 images below the hero can reduce initial page weight by 70 to 90% of image payload, which directly translates to faster LCP and a better user experience on slow connections.

Complete Image Optimization Checklist

Applying all of these optimizations in sequence typically moves a site's Core Web Vitals from "Needs Improvement" or "Poor" to "Good" within 24 to 48 hours of deploying the changes. Work through this checklist for every page on your site:

• Compress all images before uploading — target 85% JPG quality for photographs
• Convert photographic images to WEBP for an additional 25–35% size reduction
• Resize images to their actual display dimensions before serving
• Add explicit width and height attributes to every img tag to prevent CLS
• Add loading="lazy" to all images below the fold
• Add fetchpriority="high" to your LCP image to prioritize its loading
• Consider preloading the LCP image using a link rel="preload" tag in the head
• Serve images from a CDN if your site has international traffic

Measuring Your Results

After optimizing your images, measure your Core Web Vitals using Google's PageSpeed Insights at pagespeed.web.dev. Test both the mobile and desktop versions, as they are scored independently. The report provides specific recommendations, identifies the LCP element, and shows before/after comparisons if you test the same URL twice.

For ongoing monitoring, use Google Search Console's Core Web Vitals report under the Experience section. This shows field data collected from real Chrome users visiting your site, segmented by Good, Needs Improvement, and Poor. Changes you deploy typically appear in this report within 28 days, as Google uses a rolling 28-day window of field data.

Image optimization is one of the highest-ROI technical SEO tasks available to most websites. It requires no code changes to your backend, no infrastructure upgrades, and produces measurable improvements in both rankings and user experience. The tools are free — including the image compressor, WEBP converter, and image resizer available right here at SiteConversor.