Image Optimization for LCP — Formats, Preloading, and Responsive Images

Q: Image Optimization for LCP — Formats, Preloading, and Responsive Images

## Image Optimization for Better LCP Images are the LCP element on the majority of web pages. Optimizing how images are delivered is the single most impactful thing you can do for LCP. ### Modern Image Formats | Format | Compression | Browser Support | Best For | |--------|------------|-----------------|----------| | JPEG | Lossy | Universal | Photos | | PNG | Lossless | Universal | Graphics with transparency | | WebP | Both | 97%+ | General replacement for JPEG/PNG | | AVIF | Both | 92%+ | B

Optimize images to improve Largest Contentful Paint. Covers WebP/AVIF formats, preloading, responsive images with srcset, fetchpriority, and avoiding lazy-load on LCP images.

Optimization

Detailed Explanation

Image Optimization for Better LCP

Images are the LCP element on the majority of web pages. Optimizing how images are delivered is the single most impactful thing you can do for LCP.

Modern Image Formats

Format	Compression	Browser Support	Best For
JPEG	Lossy	Universal	Photos
PNG	Lossless	Universal	Graphics with transparency
WebP	Both	97%+	General replacement for JPEG/PNG
AVIF	Both	92%+	Best compression, slower encode

WebP typically achieves 25-35% smaller file sizes than JPEG at equivalent quality. AVIF achieves 50% smaller in many cases.

<!-- Progressive enhancement with fallbacks -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

Preloading the LCP Image

The browser cannot discover the LCP image until it has downloaded and parsed both the HTML and the CSS. Adding a preload hint in the <head> tells the browser to start downloading immediately:

<link
  rel="preload"
  as="image"
  href="/images/hero.webp"
  fetchpriority="high"
  type="image/webp"
>

For responsive images with srcset:

<link
  rel="preload"
  as="image"
  imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  imagesizes="100vw"
>

fetchpriority Attribute

The fetchpriority attribute tells the browser to prioritize the LCP image over other images:

<img
  src="hero.webp"
  alt="Hero"
  width="1200"
  height="600"
  fetchpriority="high"
>

<!-- Below-fold images should be low priority -->
<img
  src="gallery-1.webp"
  alt="Gallery"
  loading="lazy"
  fetchpriority="low"
>

Never Lazy-Load the LCP Image

loading="lazy" delays image loading until it enters the viewport. For the LCP image (which is already in the viewport on load), this adds an unnecessary delay. Only lazy-load images that are below the fold.

Responsive Images

Serve the right size for each viewport:

<img
  srcset="
    hero-400.webp 400w,
    hero-800.webp 800w,
    hero-1200.webp 1200w,
    hero-1600.webp 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px"
  src="hero-1200.webp"
  alt="Hero image"
  width="1200"
  height="600"
  fetchpriority="high"
>

Use Case

Image optimization for LCP applies to virtually every website with images. E-commerce product pages, portfolio sites, real estate listings, food blogs, and news sites all rely on images as the primary visual content. A 500KB JPEG hero image that could be a 150KB WebP directly impacts LCP by hundreds of milliseconds.

Try It — Web Vitals Reference

Open full tool →