Hero Image Weight Budgets for Marketing Pages

A hero that is still downloading does not look sharper, and a late hero is a slow Largest Contentful Paint. Set a byte budget, serve a crop that matches the viewport, and load that file immediately. Compress Image, Resize Image, and WebP Converter are the local steps before the file goes into the page. One marketing page shipped a 2.4 MB hero because the uncompressed file looked sharper on a design screen. Lighthouse LCP was 4.8 seconds on 4G. On a phone the hero had not finished loading before people left.

Set a byte budget

Starting points, compressed over the wire:

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

Illustration-heavy art and photography do not share one number. Adjust. A hard cap of 300 KB needs executive sign-off to exceed.

A content marketing page, excluding third-party ads, can aim for about 400-600 KB of images in total. The hero should not take more than 30-40% of that image budget.

LCP connection

The LCP element is often the hero img or a CSS background-image. Background heroes are harder to prioritize. Prefer an img with fetchpriority="high".

Lazy Loading Mistakes: do not lazy-load the LCP hero. Lazy-load images below the fold.

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 covers CDNs that generate the widths. Resize Image and WebP Converter cover the same job on a static site.

Art direction crops

A mobile crop is not a desktop center slice. Ship separate assets:

• hero-mobile-800w.webp with the subject centered
• hero-desktop-1600w.webp for the wider scene

Image Aspect Ratios for Web and Crop Images for Social use the same crop thinking for different frames.

Compression without mush

Use Compress Image and read How Image Compression Affects Quality. For photos, try WebP around q=80-85 and check skin and sky gradients.

Text on the hero

WCAG Contrast on Image Text: a scrim adds little weight. Put the words in HTML so search and accessibility can read them. Do not bake the sentence into the image.

OG image is a separate file

Open Graph Image Sizing: do not reuse a 2 MB hero as og:image. Export a separate 1200×630 file.

Preload carefully

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

Preload only the real LCP candidate. Extra preloads spend bandwidth on files the first paint does not need.

Monitoring

A CI budget can look like this:

public/hero*.webp  max 200kb

Lighthouse CI on deploy can block the merge when the hero regresses.

Art direction collaboration

Ask the designer for three crops: mobile with the portrait subject centered, tablet, and a wide desktop. One crop hidden by a CSS mask often cuts the subject. Photographers can shoot with those crop safe zones in mind.

Video hero alternative

A looping MP4 hero can look better than a 2 MB WebP. Autoplay video still costs data on mobile, and it needs an accessibility path. Provide a static image for prefers-reduced-motion.

CDN image optimization services

Cloudinary or imgix can negotiate the format. The budget applies to bytes delivered, not bytes uploaded. Watch the bill when a post gets a traffic spike.

Worked example: landing page diet

A SaaS homepage shipped a 2.1 MB hero, a 3840px PNG. After the pipeline:

• Designer export at 1920px, WebP q=82, came out at 186 KB
• A separate mobile crop at 800px came out at 72 KB
• srcset plus fetchpriority="high" on the desktop default
• LCP dropped from 2.8s to 1.6s on Moto G4 throttling

The saving came from sending the file that matched the viewport, not from crushing quality.

Talking to stakeholders

"Compress the hero" often lands as "make it ugly." Put a byte budget next to a side-by-side at the actual display size. WebP around quality 85 is often indistinguishable from PNG at a 1200px display width. How Image Compression Affects Quality is the comparison to use in that argument.

CDN vs static hosting

A static site on GitHub Pages without an image CDN has a stricter hero budget, because you pay the bandwidth. Vercel or Cloudflare image optimization may serve WebP automatically. That is not a reason to upload an 8 MB source. Set a reasonable upload size anyway.

Limitations

Compressing a hero image below 150 KB helps network transfer time. If the image is lazy-loaded, or injected late by client-side JavaScript, Largest Contentful Paint still lags.

Treat 150-250 KB as the hero target, with a responsive srcset and WebP, and do not lazy-load the LCP image. Measure the LCP element's weight on every redesign. An uncompressed file does not look sharper to someone who left before it painted.