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.