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.

Quick answer

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.

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

Browser-based workflows for hero image weight budgets for marketing pages depend on file size, browser memory, and how the source file was created. Very large files, password-protected inputs, or unusual encodings may fail without a desktop alternative. Always keep an original copy before batch processing.

When not to use this approach

Skip browser-only processing when compliance requires audit logs, when files exceed practical browser limits, or when you need features your browser tool does not expose (bookmarks, form fields, digital signatures). In those cases, use dedicated desktop software or an approved enterprise pipeline.

Related tools

• Resize Image
• WebP Converter
• Compress Image

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.

Putting this into practice this week

Pick one workflow from this article and run it on a real task today — not a hypothetical. If the guide covers PDF export, export one document you already need for work. If it covers image naming, rename one messy folder. Knowledge retained from doing beats knowledge retained from reading.

Questions to ask before you delegate

When handing a process to a teammate or virtual assistant, ask: "What would break if you skipped step three?" If they can't answer, the process isn't documented enough. Add the missing step to your internal wiki with a link to this guide and the relevant tool page.

How this connects to the broader site

Utility-first sites win when guides and tools reinforce each other. Bookmark the tool URL alongside this article. Share the article link when onboarding someone who'll use the tool weekly — context reduces support messages asking the same formatting question twice.

Common "it worked yesterday" causes

Software updates change export defaults. Browser updates change PDF print behavior. CDN cache serves old image after you uploaded new asset. When workflows break without code changes, check version changelogs before blaming user error. First troubleshooting step: reproduce in clean browser profile with extensions disabled.

When to escalate to a specialist

Tax, legal, medical, and enterprise security topics in adjacent guides sometimes require professional advice. Articles like this explain operational literacy — not professional services. Escalate when stakes exceed convenience (court filing, audit response, M&A data room, HIPAA-covered PHI).

Quick reference checklist

Before you close the tab, confirm the basics from this guide:

• You know which tool or export path applies to your exact file type
• You've tested output on the device or platform your audience uses
• Filename, margins, or metadata won't embarrass you in a professional context
• You've linked related guides for the next step in the workflow
• Sensitive data stayed in the processing tier your policy allows (browser vs cloud)

Print or save this checklist for onboarding teammates — utility workflows fail from skipped verification, not missing features.

Related reading on this site

Browse the blog category cluster this article belongs to for deeper dives. Tool pages linked in-body are the fastest path from reading to doing. If something in the workflow still feels fuzzy, that's a signal to run one real file through the pipeline and note where friction appeared — then re-read the section that matches that step.

Final reminder

Good document and media hygiene compounds. An extra ninety seconds at export time prevents ninety minutes of rework when a client, professor, printer, or auditor sends the file back. The tools exist to make that ninety seconds painless — use them deliberately rather than hoping defaults match your stakes.