Diagnosis & performance

Why your images slow down your website (and how to fix it)

You've compressed your images. Your website is still slow. This guide identifies the 4 distinct causes, not always the ones you think, and gives a precise treatment order to fix the problem without starting over.

10 min read

The 4 real causes of an image slowing your site

When PageSpeed Insights reports an image problem, it identifies one or more of these four causes. They can coexist, and often, they do.

1. Excessive weight. A 1.5 MB JPEG on a product sheet is 8 to 10 times what the page needs. The browser downloads it entirely before displaying.

2. Wrong format. PNG on a color photo is the least suitable format. PNG is designed for illustrations with flat colors and transparency, not photographs. A well-compressed JPEG or WebP will look the same for 60 to 80% less weight, depending on content.

3. Dimensions too large. A 3,000 × 2,000 px image displayed in a 600 px-wide column. The browser downloads all 6 megapixels, then reduces the display to 600 px. The excess resolution is useless, and it weighs.

4. Absent lazy loading. All page images load at once on first access, including those 3 scrolls below the fold. The loading="lazy" attribute fixes this: off-screen images only load when about to become visible.

Weight or resolution: which mistake causes more damage?

Common guides emphasize compression. In practice, excessive resolution often creates more weight than poor compression.

Concrete example: a product photo at 4,096 × 2,731 px (typical iPhone 15 Pro output) weighs 4-6 MB in original-quality JPEG. Resized to 800 × 534 px (actual display size on most content columns), it drops to 60-90 KB before any aggressive compression. Compressing the original file to 40% quality might get you 800 KB. Resizing first gives you 80 KB at identical on-screen quality.

The ratio is 1 to 10. Resolution wins.

Direct impact on LCP

LCP (Largest Contentful Paint) measures the time needed to display the largest element visible without scroll. In the vast majority of pages, that element is an image: the hero, cover photo, or first article image.

Google considers an LCP below 2.5 seconds satisfactory. Between 2.5 and 4 seconds, there’s room for improvement. Beyond 4 seconds, it’s a ranking signal penalty.

A poorly-optimized LCP image often combines all 4 problems at once: too large, wrong format, too heavy, and sometimes lazy-loaded by mistake. Fixing one without the others improves the score, but not enough.

Compress vs resize: what order and why

Order isn’t trivial. Compressing a 4,000 px-wide image means working with far more data than necessary. The result will be worse for the same quality level.

Which format to choose for your case

Format choice is the second optimization lever after resolution. In practice, three formats cover 95% of web needs.

WebP is the right default choice. 97% browser support, efficient compression, transparency supported. AVIF is technically superior, but encoding is slower and real gain depends on content. In some contexts, encoding overhead may exceed the benefit.

Lazy loading and responsive images: what many forget

Two HTML attributes radically change image loading behavior. They need no external tool — just a code addition.

loading="lazy": tells the browser to load the image only when it enters the viewport. Use on all images below the fold. Never use on the hero image or LCP image.

srcset and sizes: serve multiple image versions by screen resolution. A mobile visitor gets 480 px. A desktop visitor gets 1,200 px. Bandwidth is used efficiently in both cases.

<img
  src="image-800.webp"
  srcset="image-480.webp 480w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
  loading="lazy"
  width="800"
  height="534"
  alt="Image description"
/>

The width and height attributes also deserve mention. Their absence causes CLS (Cumulative Layout Shift) visible as page “jumps” during loading. Stating dimensions upfront reserves space and eliminates this issue.

Diagnosis: measure image impact with PageSpeed

Before fixing anything, measure. Google PageSpeed Insights is free and accessible from any browser. It precisely identifies problematic images, their current weight, and estimated gain after optimization.

Three sections to prioritize in the report:

“Properly size images”: lists images whose dimensions exceed actual display. Resizing fixes this.

“Serve images in next-gen formats”: lists images not converted to WebP or AVIF. Estimated Ko gain is displayed directly.

“Defer offscreen images”: lists images without loading="lazy" below the fold.

Chrome DevTools goes further: the Network tab with “Img” filter shows each image’s actual weight and load time. The Performance tab identifies the LCP image and its precise render time.

Compress and convert images directly in your browser: use Impmage — 100% local processing, no data sent →

GlitchGhost

Independent developer

Independent developer specializing in web performance tools and image optimization.

Web developerPerformance specialistImpmage creator