Hero and above-fold images use an optimized format and pipeline

Hero images are the single most common LCP element and the single largest contributor to page weight on marketing pages — a 1.2MB JPEG hero consumes more bandwidth than the entire rest of a well-optimised page combined. ISO-25010 resource-utilisation measures how efficiently a system uses network bandwidth; serving a full-resolution uncompressed JPEG to every visitor regardless of device is a direct violation. WebP at quality 80 is typically 60–70% smaller than an equivalent JPEG; AVIF can reach 80% smaller. On a 4G connection, the difference between a 200KB WebP and a 1.2MB JPEG is approximately 800ms of LCP penalty — enough to move a page from 'good' to 'needs improvement' on Google's scale.

Convert the hero image to WebP and route it through the Next.js Image component with priority set — this handles format serving, responsive resizing, and preloading in one step.

import Image from 'next/image'

// src/components/hero.tsx
<Image
  src="/hero.webp"
  alt="Hero description"
  width={1200}
  height={630}
  priority
  quality={85}
/>

Convert an existing JPEG in bulk:

npx sharp-cli --input public/hero.jpg --output public/hero.webp --format webp

Target under 200KB for the 1x hero. If the converted WebP still exceeds that, reduce quality to 75 or crop to the displayed dimensions — serving a 2400px image in a 1200px slot wastes half the pixels.

• ID: marketing-page-speed.resource-optimization.hero-image-format

• Severity: high

• What to look for: Identify the hero image and any other images visible above the fold. Check: (1) file format — is it WebP or AVIF? JPEG/PNG without optimization is suboptimal. (2) Is it served through Next.js Image, Astro Image, Nuxt img, or equivalent? (3) Is there an image CDN (Cloudinary, Imgix, Vercel Image Optimization) in the pipeline? (4) What is the file size? Hero images over 200KB are a performance liability. Count every image on the marketing landing page and enumerate each with its format, dimensions, and file size. Classify as optimized or unoptimized.

• Pass criteria: Hero image uses WebP or AVIF format, OR is served through a framework image optimization component or image CDN that converts and compresses automatically. Effective file size ≤ 200KB for the hero at 1x. Report even on pass: "X of Y images use modern formats (WebP/AVIF). Total image weight: Z KB." At least 1 implementation must be confirmed.

• Fail criteria: Hero image is an unoptimized JPEG or PNG over 200KB, served without a framework image component or CDN optimization pipeline.

• Skip (N/A) when: Marketing pages use no images (text-only or SVG-only design).

• Cross-reference: The lcp-threshold check in Core Web Vitals measures the user-facing impact of the image optimization verified here.

• Detail on fail: "Hero image is a 1.2MB JPEG in public/ without Next.js Image component or CDN. At this size, it will be the dominant contributor to LCP delay."

• Remediation: Optimize the hero image specifically — it is the single highest-impact image on the page:

  // Use Next.js Image with priority for the hero
  import Image from 'next/image'
  <Image
    src="/hero.webp"          // convert JPEG → WebP (use squoosh.app or sharp)
    alt="Hero description"
    width={1200}
    height={630}
    priority                   // preloads the image
    quality={85}               // reduce quality if file still large
  />
  

  For bulk conversion: npx sharp-cli --input public/hero.jpg --output public/hero.webp --format webp

  For a deeper analysis of image delivery infrastructure, the Infrastructure category of this audit covers image CDN configuration.