DevToolbox

Hero Image Responsive Markup — Optimize for LCP

Generate optimal responsive markup for hero images with eager loading, high fetch priority, and proper srcset to maximize LCP performance.

Best Practices

Detailed Explanation

Optimizing Hero Images for LCP

The hero image is often the Largest Contentful Paint element, making its responsive markup critical for Core Web Vitals.

Optimal Hero Image Markup

<img
  src="hero-1280w.webp"
  srcset="hero-640w.webp 640w,
          hero-768w.webp 768w,
          hero-1024w.webp 1024w,
          hero-1280w.webp 1280w,
          hero-1536w.webp 1536w"
  sizes="100vw"
  alt="Main hero banner"
  loading="eager"
  decoding="async"
  fetchpriority="high"
  width="1536"
  height="600"
/>

Key Attributes for LCP

Attribute Value Reason
loading eager Don't lazy-load above-the-fold content
fetchpriority high Prioritize over other resources
decoding async Don't block the main thread
width + height Intrinsic dimensions Prevents layout shift (CLS)

Preloading the Hero Image

For maximum LCP performance, add a preload hint in the <head>:

<link
  rel="preload"
  as="image"
  href="hero-1280w.webp"
  imagesrcset="hero-640w.webp 640w,
               hero-1024w.webp 1024w,
               hero-1280w.webp 1280w,
               hero-1536w.webp 1536w"
  imagesizes="100vw"
  fetchpriority="high"
/>

Common Mistakes

  1. Using loading="lazy" — This delays the hero image, hurting LCP
  2. Missing width and height — Causes layout shift as the image loads
  3. Too many srcset entries — 4-6 widths are sufficient; more just increases HTML size
  4. Not preloading — The browser can't discover the image until it parses the HTML

Use Case

Every website with a hero banner should follow this pattern. Hero images are typically the LCP element on 60-70% of web pages, making their responsive markup one of the highest-impact performance optimizations available.

Try It — Responsive Image Srcset Generator

Open full tool →

Related Topics

The srcset Attribute Explained — Width Descriptors and Resolution Switching

Fundamentals

The sizes Attribute — Telling the Browser How Big Your Image Will Be

Fundamentals

Lazy Loading Responsive Images — loading='lazy' Best Practices

Best Practices

Using fetchpriority='high' for Critical Images

Best Practices

Responsive Images in CSS Grid and Flexbox Layouts

Use Cases