Why image size matters more than you think
I once audited a friend's portfolio site that took 11 seconds to load. The culprit wasn't the code or the hosting — it was six uncompressed PNG screenshots totalling 24 MB. After compressing them properly, the same page loaded in under 2 seconds and looked identical. Images are almost always the biggest bytes on a page, which makes compression the highest-leverage performance win available to most site owners.
The 3-step compression workflow
1. Pick the right format first. Format choice matters more than any quality slider. Photographs should be WebP or AVIF. Graphics with flat colours and text should be PNG (or SVG if they're vector). Never use BMP or TIFF on the web. If you're unsure, convert with our JPG to WebP converter and compare.
2. Resize before you compress. A 4000px photo displayed at 800px wide is carrying 25x more pixels than it needs. Resize to the display size first with our Image Resizer — this alone often cuts 80% of the file size.
3. Dial in quality with our compressor. Upload the resized image to our Image Compressor, set quality to 80, and compare before/after. For most photos, quality 75-85 is visually indistinguishable from 100 at a fraction of the size.
How low can you go?
Here's my practical rule of thumb from compressing thousands of images:
- Hero/banner photos: WebP at quality 80 — sharp on retina displays, typically 100-200 KB
- Blog content images: WebP at quality 75 — around 50-100 KB each
- Thumbnails: WebP at quality 70 — under 30 KB
- Logos/icons: SVG if possible, otherwise PNG — never JPEG for these
Lossy vs lossless: what actually happens
Lossy compression (JPEG, WebP at quality <100) permanently discards image data the human eye barely notices — subtle colour gradients get simplified. Lossless (PNG, WebP at 100) preserves every pixel but produces larger files. For the web, lossy at sensible quality settings wins every time. The "loss" is invisible; the speed gain is very visible in your bounce rate.
Frequently Asked Questions
- Will compressing my images make them look blurry?
- Not if you do it right. At WebP quality 80, differences from the original are essentially invisible to the human eye. Problems only appear below quality 60 or when you upscale a small image. Always keep your originals as backup.
- Should I compress PNG or convert to WebP instead?
- Convert to WebP. A PNG compressed as far as possible is still usually 2-3x larger than a WebP at equivalent visual quality. The only reason to keep PNG is when you need maximum compatibility with very old software.
- Does image compression affect SEO?
- Yes, positively. Google uses page speed (Core Web Vitals) as a ranking factor, and images are typically the largest contributor to slow loads. Compressed images also reduce bandwidth costs.