Hero images are often the largest byte tax on a marketing site — and the Largest Contentful Paint element. Google’s Web Vitals guidance treats LCP as a core user-experience signal; an unoptimized multi-megabyte PNG is not a design detail. It is a product defect.

Build a pipeline: source → transform → deliver → measure.

Print stack with indigo clip

Every surface gets a prepared print, not the raw negative.

Pipeline stages

Image pipeline diagram

  1. Source — high-quality master in DAM or repo; color space known
  2. Transform — resize to needed widths; compress; modern formats (AVIF/WebP) with fallback
  3. Mark up — width/height or aspect-ratio to limit CLS; srcset/sizes; lazy below the fold
  4. Priority — only the true LCP image gets elevated fetch priority
  5. Cache — fingerprinted URLs, long TTL for immutables
  6. Budget — max KB per slot (hero, card, thumbnail)

Author experience

Authors should pick intent (“hero”, “card”, “thumbnail”), not pixel math. The system maps intent to renditions. If authors upload straight from a phone dump into the page, the pipeline never runs and performance becomes a heroics project every quarter.

Review and CI

Pull requests and CMS publishes should surface image weight where possible. A visual QA process that ignores bytes will ship beautiful, slow pages forever. Pair with the performance budget practice: if the hero exceeds the ceiling, the change does not merge without an exception.

Common failure modes

  • One 3000px asset scaled down in CSS
  • Lazy-loading the LCP image
  • Missing dimensions → layout shift when media arrives
  • Serving desktop crops to mobile without sizes
  • Editors re-uploading instead of reusing DAM masters

Closing

Stop treating exports as the delivery format. Treat delivery as an engineered path with budgets — the same seriousness you give JavaScript bundles.

Need an image pipeline on a CMS or static site? Start a project inquiry with your current hero weights from three templates.

Markup patterns that protect LCP and CLS

  • Set explicit dimensions or CSS aspect-ratio before paint
  • Use fetchpriority="high" only on the true LCP candidate
  • Lazy-load below-fold images; never the primary hero
  • Prefer responsive srcset over one oversized asset
  • Avoid CSS background images for critical content when SEO/a11y need real img

CDN and cache

Fingerprinted image URLs with long cache headers. HTML references update on publish. Purging “all images” after every content edit is a smell — fix addressing instead.

CMS integration

Wire the CMS to the pipeline: when an author selects “hero,” the system stores the master and serves correct renditions. Reject uploads that exceed max dimension or fail virus/type checks.

Hero KB ceilings belong in the same budget board as JS. If design wants a full-bleed video poster, trade something else or accept a written exception with an expiry.

QA

Check three templates on a throttled mobile profile: homepage, article, service. Note LCP element identity. If LCP is a third-party embed, redesign the above-the-fold composition.

Accessibility of images

Informative images need meaningful alt. Decorative images should not pollute the accessibility tree. Charts need text alternatives. The pipeline can enforce presence of alt in CMS fields; humans still write the words.