Image Optimization for Core Web Vitals in 2026: The Complete Guide

Images are the Largest Contentful Paint (LCP) element on 85% of desktop pages and 76% of mobile pages. If your site loads slowly, images are almost certainly the reason.

Here's what actually moves the needle on Core Web Vitals in 2026.

The Three Image Mistakes That Kill Your LCP

1. Lazy-Loading the LCP Image

16% of pages still lazy-load their LCP image. This tells the browser to delay loading the most important image on the page — the exact opposite of what you want.

Fix: Never lazy-load above-the-fold images. Only lazy-load images below the fold.

<!-- Hero image — DO NOT lazy load -->
<img src="hero.avif" alt="..." fetchpriority="high" />

<!-- Below-fold images — lazy load these -->
<img src="product.avif" alt="..." loading="lazy" />

2. Not Using fetchpriority="high"

Only 17% of pages use the fetchpriority attribute. It tells the browser to prioritize downloading the LCP image before other resources like third-party scripts.

<img src="hero.avif" alt="..." fetchpriority="high" />

This single attribute can improve LCP by 200-500ms. It's supported in all modern browsers and costs nothing to implement.

3. Serving Unoptimized Formats

The median webpage still serves 1MB+ of image data. Converting from JPEG/PNG to WebP/AVIF typically cuts this by 40-60%.

Before	After	Savings
1.2 MB JPEG hero	500 KB AVIF	-58%
800 KB PNG logo	200 KB WebP	-75%
2 MB product grid	900 KB AVIF	-55%

The Optimization Checklist

Format Selection

1. Convert all photos to AVIF (with WebP fallback)
2. Convert all graphics/logos to WebP or keep as SVG
3. Remove PNG unless you need pixel-perfect lossless transparency
4. Eliminate GIF — use animated WebP or short video loops

Sizing

1. Never serve images larger than their display size. If an image displays at 800px wide, don't serve a 4000px original.
2. Use responsive images with srcset:

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

3. Target 2x DPR maximum. Serving 3x images wastes bytes with no visible quality improvement on most screens.

Compression

Target these quality settings:

Format	Quality	Use Case
AVIF	60-70	General web images
WebP	75-85	General web images
JPEG	80-85	Fallback/legacy

These settings produce visually identical results to higher quality while reducing file sizes by 30-50%.

Loading

1. fetchpriority="high" on the LCP image
2. loading="lazy" on everything below the fold
3. Explicit width and height on all images to prevent layout shift (CLS)
4. Preload critical images if they're CSS backgrounds:

<link rel="preload" as="image" href="hero.avif" type="image/avif" />

Measuring the Impact

Use these tools to verify your improvements:

• PageSpeed Insights — Google's official CWV measurement tool
• Chrome DevTools → Lighthouse — Local testing
• Chrome DevTools → Network tab — See actual image transfer sizes
• CrUX Dashboard — Real user data from Chrome users

Batch Converting Your Existing Images

If you have a site full of unoptimized JPEG and PNG images, here's the fastest path:

1. Export all images from your CMS or asset folder
2. Open Konvrt's batch processor
3. Set output to AVIF (or WebP for universal support)
4. Set quality to 65 (AVIF) or 80 (WebP)
5. Enable resize if images exceed your max display width
6. Convert all and re-upload to your site

This single step can cut your total page weight by 50-70% and meaningfully improve your LCP score.

The Bottom Line

Image optimization is the single highest-impact performance improvement for most websites. The combination of modern formats + proper compression + correct loading attributes can take a 3-second LCP to under 1.5 seconds.

Start with the three mistakes above. Fix those, and you've handled 80% of image-related performance issues.