How to Compress Images for a Faster Website
Large images are the single biggest cause of slow-loading web pages. What actually moves the needle for page speed, and what's a waste of time.
Page speed audits consistently point to the same culprit: images. A single uncompressed 4MB photo can outweigh an entire page's HTML, CSS, and JavaScript combined many times over — and most website images are far larger than the space they're actually displayed at.
The biggest win: match the display size
A photo uploaded straight from a phone camera is routinely 3000-4000px wide. If it's displayed on the page at 800px wide, the browser is downloading 4-6x more pixel data than it will ever show — pure waste. Resizing to something close to the actual display size, before compressing, is the single highest-impact step:
Then compress
After resizing to a sensible dimension, compress for file size on top of that:
A rough target: most web photos look fine well under 200KB at reasonable display sizes; hero/banner images that fill the whole viewport width can reasonably go up to 300-500KB. Thumbnails and icons should be a fraction of that.
Format matters too
-
JPG for photos — the best balance of size and quality for photographic content
-
PNG only for things that actually need it: logos, icons, screenshots, anything with transparency or flat colors and sharp edges
-
WebP if your hosting/CMS supports it — generally 25-35% smaller than an equivalent-quality JPG, with essentially universal browser support now
-
Convert WebP to JPG — useful in the other direction, if a WebP image needs to go somewhere that only accepts JPG
What doesn't actually help much
Compressing HTML/CSS/JS matters for page speed too, but on a typical image-heavy page, images are usually 70%+ of total page weight — optimizing everything except images and expecting a fast page rarely works. Similarly, a CDN speeds up delivery of an image but doesn't shrink it — an unoptimized 4MB image served from a fast CDN is still a 4MB image.
A simple workflow
- Resize to roughly the actual display dimensions
- Compress to a reasonable target size for that use (thumbnail, body image, hero banner)
- Use JPG for photos, PNG only when you need transparency/sharp edges, WebP if supported
All of this runs in your browser — no upload needed to resize or compress.