Image compression is the single highest-leverage optimisation for most websites. Photos straight from a camera or stock service are often 5–10 MB; the same images, compressed sensibly, drop to 200–500 KB with no visible quality loss. Page weight, load time, mobile data costs, and search ranking all improve directly. A compressor handles the arithmetic; the discipline is choosing the right balance for the image's role.

This guide explains how image compression works, when to use lossy versus lossless, the realistic size targets, and the pitfalls of over- or under-compression.

Why Compress Images

  • Faster page loads — Images are typically 50–70% of page weight
  • Better Core Web Vitals — LCP, CLS, INP all affected by image performance
  • Lower bandwidth costs — CDN bills scale with bytes served
  • Better mobile experience — Smaller files load faster on cellular
  • Email deliverability — Many email systems reject large attachments
  • Storage efficiency — Cumulative across galleries, archives, backups

Lossy vs Lossless Compression

Lossy

Removes data the eye is unlikely to notice. Significant size reduction. Quality drops at high compression. Used for JPEG, WebP, AVIF (configurable), animated GIF.

Lossless

Reconstructs the original exactly. Modest size reduction. Used for PNG, lossless WebP, lossless AVIF. Best for graphics, screenshots, source files.

Realistic Size Targets

  • Hero image (1920 px wide) — Aim for 150–300 KB
  • Article photo (1200 px wide) — Aim for 80–200 KB
  • Thumbnail (400 px wide) — Aim for 20–60 KB
  • Product image (800 px square) — Aim for 50–150 KB
  • Background pattern — Often under 30 KB possible

Resize Before Compressing

The single biggest win: don't serve a 4000×3000 image when the display area is 800×600. Resize to the actual display dimension (with 2× for retina if needed) before compressing.

Quality Settings by Content Type

  • Photographs — JPEG 75–85, WebP 75–85, AVIF 65–80
  • Graphics with text — Lossless PNG or WebP lossless
  • Screenshots — Lossless PNG (text remains crisp)
  • Logos — SVG if possible; lossless PNG otherwise
  • Thumbnails — Lower quality (60–70) acceptable

Format Choice Matters

The right format with default settings often beats aggressive compression in the wrong format:

  • A photograph as PNG: 5 MB
  • The same photograph as JPEG quality 85: 400 KB
  • The same photograph as WebP quality 80: 250 KB
  • The same photograph as AVIF quality 75: 150 KB

Optimisation Pipeline

  1. Start from highest-quality source available
  2. Resize to actual display dimensions (or 2× for retina)
  3. Choose format appropriate to content type
  4. Compress with sensible quality setting
  5. Visually compare with original
  6. Strip metadata if appropriate

Common Pitfalls

  • Compressing without resizing. A 4000-wide image compressed to 500 KB still loads slowly compared to a properly sized 800-wide one
  • Over-compression on faces. Banding and blocking very visible on skin tones
  • Compressing screenshots as JPEG. Text becomes fuzzy
  • Re-compressing already compressed. Cumulative quality loss
  • Forgetting alt text and image SEO. Compression is one factor; descriptive filenames and alt also matter
  • Using one quality setting universally. Hero needs higher quality than thumbnail
  • Stripping needed metadata. Copyright, attribution sometimes required

Automation

  • WordPress plugins (Smush, ShortPixel, Imagify) compress on upload
  • CDN image services (Cloudflare Polish, ImageKit) optimise on delivery
  • Build tools (imagemin, sharp) integrate into deployment pipelines
  • Manual compression suits small batches or content updates

Quick Tips

  • Resize before compressing — biggest gain
  • Match format to content (JPEG/WebP/AVIF for photos; PNG for graphics)
  • Quality 75–85 for photos is the sweet spot
  • Compare visually before committing
  • Automate where volume warrants; manual is fine for occasional uploads

Use the Image Compressor on Popupnote

The Image Compressor on Popupnote provides a clean tool for reducing image file size while preserving acceptable quality — for web pages, email attachments, content uploads, and anywhere image weight matters. The tool runs in your browser without any account required.