Hero Image Weight Budgets for Marketing Pages

Marketing shipped a 2.4 MB hero because "uncompressed looks sharper." Lighthouse LCP: 4.8 seconds on 4G. The hero wasn't sharper on phone — it hadn't finished loading before users bounced.

Hero images are performance contracts. Break the budget, break first impression.

Set a byte budget

Starting points (compressed over wire):

| Viewport target | Hero budget (WebP/JPEG) | | --- | --- | | Mobile 750px wide | 80–120 KB | | Tablet 1200px | 120–180 KB | | Desktop 1920px | 150–250 KB |

Adjust for illustration-heavy vs photo. Hard cap: 300 KB without executive sign-off.

Total page image budget ~400–600 KB for content marketing pages excluding third-party ads.

LCP connection

LCP element is often hero <img> or CSS background-image. Background heroes harder to prioritize — prefer <img> with fetchpriority="high".

Lazy Loading Mistakes — never lazy LCP hero.

Responsive delivery

<img
  srcset="hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 1200px"
  src="hero-1200.webp"
  alt="..."
  fetchpriority="high"
/>

Image CDN vs Browser Resize — CDN generates widths.

Resize Image + WebP Converter for static sites.

Art direction crops

Mobile crop ≠ desktop center slice — separate assets:

• hero-mobile-800w.webp — subject centered
• hero-desktop-1600w.webp — wider scene

Image Aspect Ratios for Web, Crop Images for Social — different goals but same crop thinking.

Compression without mush

Compress Image, How Image Compression Affects Quality.

Photos: WebP q=80–85. Test skin and sky gradients.

Text on hero

WCAG Contrast on Image Text — scrims add bytes minimally; text should be HTML not baked into image for SEO/accessibility.

OG image separate

Open Graph Image Sizing — don't reuse 2 MB hero as og:image without separate optimized 1200×630 export.

Preload carefully

<link rel="preload" as="image" href="hero-1200.webp" imagesrcset="..." imagesizes="...">

Only true LCP candidate — over-preload wastes bandwidth.

Monitoring

CI budget:

public/hero*.webp  max 200kb

Lighthouse CI on deploy — regressions block merge.

Troubleshooting

How big should a hero image file be? Target under 150–200 KB for typical full-width hero on fast connections, often less on mobile-specific crops. Total page weight matters too — heroes shouldn't consume more than 30–40% of total image budget on marketing pages.

What image format is best for hero images? WebP or AVIF with JPEG fallback via picture element for photos. PNG only for flat graphics. Serve responsive srcset so mobile doesn't download desktop 2560px file.

Does hero image affect SEO? Indirectly through Core Web Vitals especially LCP. Slow heroes hurt user experience signals. Alt text and relevance still matter for image search and accessibility.

Limitations

When not to use this approach

Conclusion

Budget bytes like budget dollars — 150–250 KB hero targets, responsive srcset, WebP, no lazy LCP.

Uncompressed doesn't look sharper if users leave before paint. Measure LCP element weight every redesign.

Art direction collaboration

Designer delivers 3 crops: mobile portrait subject center, tablet, desktop wide — not one crop CSS masks poorly. Photographer shoots with crop safe zones in mind.

Video hero alternative

Looping MP4 hero may beat 2 MB WebP on perceived quality — but autoplay video has accessibility and mobile data costs. prefers-reduced-motion fallback to static image required.

CDN image optimization services

Cloudinary/imgix auto-format negotiation — budget applies to delivered bytes; monitor bill when traffic spikes viral post.

Worked example: landing page diet

A SaaS homepage shipped with 2.1 MB hero (3840px PNG). After pipeline:

• Designer export 1920px WebP q=82 → 186 KB
• Mobile crop 800px separate file → 72 KB
• srcset + fetchpriority="high" on desktop default
• LCP dropped 2.8s → 1.6s on Moto G4 throttling

Savings came from right file for viewport, not extreme compression crushing quality.

Stakeholder communication

Designers hear "compress hero" as "make it ugly." Reframe as byte budget with side-by-side at actual display size — often 85 quality WebP indistinguishable from PNG at 1200px display width. How Image Compression Affects Quality settles disputes with evidence.

CDN vs static hosting

Static site on GitHub Pages without image CDN — hero budget stricter; you eat bandwidth. Vercel/Cloudflare image optimization may auto-serve WebP — still set reasonable source upload size; edge transform isn't excuse for 8 MB uploads.