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 — and a handful of massive, unoptimized images.
According to the HTTP Archive, images account for over 50% of the average web page's total transfer size. For media-heavy sites — e-commerce stores, portfolios, blogs — it can be 70% or more. No amount of JavaScript optimization will fix a page that's downloading 15 MB of uncompressed product photos.
The Real Cost of Large Images
Large images don't just slow down your page. They create a cascade of problems:
- Slow page load — Users abandon pages that take more than 3 seconds to load. Every additional megabyte of images adds loading time, especially on mobile networks where 3G speeds average 1–4 Mbps.
- Poor Core Web Vitals — Google's Largest Contentful Paint (LCP) metric measures how quickly the main content loads. Hero images are the most common LCP element, and if they're large, your LCP score suffers.
- Lower search rankings — Google uses page speed as a ranking factor. Slow pages rank lower, which means less organic traffic.
- Higher bandwidth costs — If you're paying for bandwidth (CDN, hosting, cloud services), serving uncompressed images is literally paying to deliver data your users don't need.
- Battery drain — On mobile devices, downloading and decoding large images consumes significant battery. Users notice when a site drains their phone.
The Most Common Mistakes
After auditing hundreds of websites, the same patterns show up repeatedly:
1. Serving full-resolution images
The most common mistake: uploading a 6000×4000 photo (12 MB) and displaying it at 600×400 on the page. The browser downloads 100× more pixels than it needs, then discards 99% of them during rendering.
The fix is simple: resize images to the largest size they'll actually be displayed at, then compress them. A 600×400 JPEG at quality 80 is typically 30–80 KB instead of 12 MB.
2. Using PNG for photos
PNG is lossless, which means it preserves every pixel perfectly. For photos, this is wasteful — the human eye can't distinguish between a PNG photo and a quality-80 JPEG, but the PNG might be 5–10× larger.
Use PNG for images with sharp edges, text, or limited colors (logos, icons, screenshots). Use JPEG or WebP for photographs.
3. Not using WebP
WebP produces files that are 25–35% smaller than JPEG at equivalent quality, and all modern browsers support it. There is almost no reason to serve JPEG when WebP is available.
Use the <picture> element to serve WebP with a JPEG fallback:
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="...">
</picture>
4. Ignoring responsive images
A desktop monitor is 1920px wide. A phone is 375px. Serving the same image to both wastes bandwidth on mobile and delivers blurry images on desktop.
The srcset attribute lets you provide multiple sizes and let the browser choose:
<img src="photo-800w.jpg"
srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1600w.jpg 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="...">
How Much Can You Save?
Here are typical compression results from CompactJPG:
- JPEG photo (5 MB) → quality 80: 1.5–2.5 MB (50–70% reduction)
- PNG screenshot (2 MB) → PNG8 256 colors: 300–600 KB (70–85% reduction)
- WebP photo (3 MB) → quality 80: 800 KB–1.5 MB (50–73% reduction)
- Large PNG photo (23 MB) → PNG8 256 colors: 1–1.5 MB (93–96% reduction)
For a typical e-commerce page with 8 product images, compressing from 5 MB each to 1.5 MB each reduces total page weight from 40 MB to 12 MB — a 70% reduction that can cut page load time in half.
The Quick Fix
If you're looking at your website and realizing your images need optimization, here's the fastest path to improvement:
- Identify the largest images — Use your browser's Network tab or Lighthouse audit to find the heaviest images.
- Resize them to their display size — Don't serve a 4000px image for a 400px display slot.
- Compress them with CompactJPG — Drop all your images, click Compress, download the results. Default quality 80 works for almost everything.
- Convert to WebP — For browsers that support it, WebP is strictly better than JPEG.
- Add width and height attributes — This prevents layout shifts as images load, improving your CLS (Cumulative Layout Shift) score.
The entire process takes minutes, and the impact on page speed — and your users' experience — is immediate.