LCP Image Playbook 2026: Fix Slow Hero Images in 30 Minutes
Fix slow hero images fast. A 30-minute LCP image playbook for 2026 with priority loading, responsive sizing, and compression best practices.
Fix slow hero images fast. A 30-minute LCP image playbook for 2026 with priority loading, responsive sizing, and compression best practices.
Why hero images dominate LCP
The LCP element is the largest visible item during initial load. On most pages, that is your hero image, a product shot, or a featured thumbnail. If that asset is oversized, lazy-loaded, or discovered late, LCP will be slow no matter how fast your server is.
If you want the full Core Web Vitals context, start with Core Web Vitals Optimization: LCP, INP, CLS. For a broader image speed plan, see Optimize Images for Website Speed and SEO.
The 30-minute fix plan
Minute 1-5: Find the LCP image
Identify the hero image on the page and confirm it is the LCP element. If it's a background image, convert it to an inline <img>.
Minute 6-15: Right-size and compress
Export the hero image at the exact rendered size. Convert to WebP for a smaller file without visible loss.
Minute 16-25: Prioritize the request
Ensure the hero image is eager-loaded and visible early in the HTML to speed up discovery.
Minute 26-30: Add responsive sources
Use srcset so mobile devices download smaller files while desktop keeps crisp quality.
Priority loading checklist
- Hero image is in the HTML, not set as a CSS background.
- Hero image is not lazy-loaded.
- Hero image has explicit
widthandheight. - Hero image is placed high in the HTML so the browser discovers it early.
- Hero image uses WebP (with JPG fallback if needed).
Need help fixing layout shifts too? Read Lazy Loading Images for SEO and Performance and Responsive Images with srcset and sizes.
Resize and compress without quality loss
Most hero images are far larger than they appear on screen. That wasted size is the fastest LCP win available. Resize the image to match its display width, then compress it to reduce bytes.
Quick sizing rules
- Desktop hero: 1600-2000px wide (only if it truly displays at that size).
- Mobile hero: 700-1000px wide.
- Keep aspect ratios consistent to avoid CLS.
Use the free tools to convert and compress:
- JPG to WebP for fast hero photos.
- PNG to WebP when transparency is required.
- JPG to PNG for text-heavy graphics.
- PNG to JPG if transparency is not needed.
More compression tactics: Reduce JPG File Size, Reduce PNG File Size, and Optimize GIF File Size.
Responsive image recipe
Serve the right hero image size to each device so the LCP image downloads faster on mobile without losing sharpness on desktop.
<picture>
<source
srcset="hero-640.webp 640w, hero-960.webp 960w, hero-1280.webp 1280w, hero-1920.webp 1920w"
sizes="(max-width: 640px) 100vw, (max-width: 1200px) 80vw, 1200px"
type="image/webp">
<img src="hero-1280.jpg" width="1200" height="700" alt="Hero image">
</picture>Keep the sizes values aligned with your actual layout to prevent oversized downloads.
Get the full walkthrough in Responsive Images with srcset, sizes, and picture.
Common mistakes that slow LCP
- Lazy-loading the hero image delays the most important asset.
- Using CSS background images makes the hero harder for the browser to prioritize.
- Serving a single giant image forces mobile users to download too much.
- Missing width/height causes layout shifts and extra reflow.
- Overusing PNG inflates file sizes for photos.
FAQ
Should the hero image be lazy-loaded?
No. Lazy loading the LCP image usually delays LCP and hurts performance.
Is WebP enough in 2026?
WebP is still the most reliable modern format. AVIF can be smaller, but WebP has broader support and faster encoding.
How do I measure LCP improvements?
Run a before/after test in your performance tooling and compare the LCP element and timing. Confirm with real-user data when possible.
Ship a faster hero image today
Convert and compress your hero assets with our free tools.
Related articles
Ready to optimize?
Use Convert a Document to shrink files without sacrificing quality.