Workflow6 min read·Updated

Hero Images: WebP Settings That Protect LCP

If Largest Contentful Paint is a photo, that photo's bytes are the whole game. Convert the hero to WebP at 1600–1920 px (or 2400 px for true full-bleed retina) and quality 72–80. Then preload that exact URL.

Heroes are not galleries

You get one (maybe two) above-the-fold images. They should be the most carefully sized files on the site. Everything else can lazy-load.

Why it matters

  • Google measures LCP on mobile first.
  • CSS background heroes often skip srcset.
  • A 3 MB PNG hero cannot be saved by minifying CSS.

How to do it

  1. Measure the rendered CSS width at your largest breakpoint.
  2. Convert at that width × 1–1.5, quality 75–80.
  3. Preload the WebP. Set width/height or aspect-ratio to stop CLS.

Settings that work

Soft backgrounds (gradients, blur) can go to 70%. Faces and type in the hero: 80–85%.

Convert a batch in your browser. Nothing is uploaded.
Open the converter

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

Only if you already produce AVIF. WebP is enough to pass most LCP budgets.

Prefer `<img>` so you get srcset, alt, and easier LCP targeting.

Keep reading

Performance6 min read

Fix image LCP

If LCP is a photo or PNG, convert it to WebP at the rendered width, preload it, and stop lazy-loading the hero.

Read more
Performance6 min read

Landing page WebP

Paid landing pages should convert the hero, logo row and proof shots to WebP before you touch the headline.

Read more
Performance6 min read

Retina and WebP

How to handle 2× and 3× displays with WebP without shipping 3× PNG screenshots.

Read more