P2 · MediumPerformance

Oversized images

Image dimensions exceed display size

Code: oversized_image

Why it matters

Image dimensions exceed display size. Slow experiences increase bounce rates and hurt Core Web Vitals scores. Google uses these metrics as a direct ranking signal.

How to fix

Optimize large images with Next.js Image or picture element

html

<!-- Option 1: Next.js Image component (automatic optimization) -->
import Image from 'next/image';

<Image
  src="/photos/hero.jpg"
  alt="Description"
  width={1200}
  height={800}
  quality={80}
  sizes="(max-width: 768px) 100vw, 1200px"
/>

<!-- Option 2: HTML picture element with modern formats -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="1200" height="800" loading="lazy">
</picture>

Related checks in Performance

Slow First Contentful Paint

FCP exceeds 3 seconds

FCP needs improvement

FCP between 1.8-3 seconds

Slow Largest Contentful Paint

LCP exceeds 4 seconds

LCP needs improvement

LCP between 2.5-4 seconds

Poor Cumulative Layout Shift

CLS exceeds 0.25

Run a free scan to check your site

Get a complete audit in under 2 minutes. No account required.

Start Free Scan