Your Images Are Probably the Slowest Thing on Your Website

Developers usually look at code first when a page feels slow, but the bottleneck is more often in the media library. A homepage that takes over four seconds to load frequently has perfectly fine HTML, CSS, and JavaScript — the problem is a hero image at 3 MB, a product grid with twelve 800 KB PNGs, and a background pattern served as an unoptimised high-resolution JPEG.

How to Confirm Images Are the Bottleneck

Open Chrome DevTools → Network tab → reload the page. Sort by "Size" column (descending). If the top five entries are images, you've found your problem. Check the "Waterfall" column — images that start loading late or block other resources are structural issues, not just size issues.

// In the browser console — list all images by transferred size
performance.getEntriesByType('resource')
  .filter(e => e.initiatorType === 'img' || e.name.match(/\.(jpg|jpeg|png|webp|avif|gif)/i))
  .sort((a, b) => b.transferSize - a.transferSize)
  .slice(0, 10)
  .forEach(e => {
    console.log(
      Math.round(e.transferSize / 1024) + ' KB',
      e.name.split('/').pop(),
      Math.round(e.duration) + 'ms'
    );
  });

The Three Most Common Image Performance Problems

1. Oversized Source Images

A 4000×3000px image displayed at 400×300px wastes 100× the memory and roughly 10× the bandwidth. Resize to display dimensions. The browser does not do this automatically — it downloads the full-resolution source regardless of how small the CSS renders it.

2. Wrong Format for Content Type

PNG for photographs is typically 3–5× larger than equivalent-quality JPEG, and 4–7× larger than WebP. PNG is correct for screenshots, logos with transparency, and pixel art. For everything else, JPEG or WebP saves significant bandwidth.

3. No Lazy Loading Below the Fold

Without lazy loading, every image on the page — including those 5 scrolls down — is downloaded on initial page load, competing with critical above-fold resources. loading="lazy" defers off-screen images until the user scrolls toward them.

The Correct Optimisation Order

1. 1.Right-size: Resize images to display dimensions — this has the largest impact
2. 2.Right-format: Switch photographs from PNG to WebP or JPEG
3. 3.Compress: Apply lossy compression at quality 75–80 for photos
4. 4.Lazy load: Add loading="lazy" to all below-fold images
5. 5.Preload: Add fetchpriority="high" to the LCP image

Measuring the Impact

After making changes, measure with PageSpeed Insights (real-user Chrome data) rather than just Lighthouse. The "Largest Contentful Paint" score and the "Total Blocking Time" score are the most meaningful metrics. Image optimisation typically improves LCP by 0.5–2 seconds and Performance score by 10–25 points on image-heavy pages.

Quick Audit for Any Website

• ●Run PageSpeed Insights → check "Opportunities" for image-specific items
• ●Open DevTools → Network → sort by Size → find images over 200 KB
• ●Check your LCP element — is it an image? Is it lazy-loaded? Does it have fetchpriority="high"?
• ●Use the Coverage tab in DevTools to see which images are in the initial viewport

Start with your largest images first — the ones in the top five by transferred size. Compress and right-size those, then re-run PageSpeed Insights to measure the improvement. Compress your images here — no upload, no account.