Why do my images make my website so slow?
asked 4 months ago596 viewsen
Lighthouse gives my homepage a performance score of 34. The main issue listed is images: "Properly size images" and "Serve images in next-gen formats". What should I do?
AI diagnosis
AI-generated. Not an answer — the community below confirms or corrects it. Always verify before relying on it.
1 Answer
Images are usually the biggest part of page weight. The fixes:
1. Right size: don't serve a 4000px photo into a 400px slot. Generate a few sizes and let the browser choose:
<img src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="450" alt="...">2. Modern formats: WebP or AVIF are typically 30–60% smaller than JPEG at similar quality. 3. Lazy-load below-the-fold images with loading="lazy". Do not lazy-load the main hero image; give it fetchpriority="high" instead. 4. Always set width and height so the layout doesn't jump (CLS). 5. Automate it: Next.js <Image>, a CDN image service, or sharp in your build.
For users on mobile data, this is often the single biggest performance and cost win.
Sign in to tell others whether this worked.
Sign in and verify your email to post an answer.