How to Compress Images Without Losing Visible Quality
Images are usually the heaviest thing on a web page and the most common reason an email bounces for size. The good news is that most images are far larger than they need to be, and the savings are available without any visible loss — if you understand which lever to pull.
This guide covers the three levers that matter (dimensions, format and quality), the order to apply them in, and how to judge the result honestly rather than by file size alone.
Lever one: dimensions beat everything
A 6000 x 4000 photo contains 24 million pixels. Displayed in a 600-pixel-wide column on a high-density screen, only about 1.4 million of them can ever be seen. You are storing and transmitting roughly seventeen times more data than the viewer can perceive.
Always resize before you compress. Decide the largest size the image will ever be displayed at, double it for high-density screens, and resize to that. This single step routinely removes 80-95% of the file size, and unlike quality reduction it introduces no artefacts at all.
Lever two: pick the right format
Format choice is not a matter of taste; each format encodes a different kind of image efficiently.
- JPEG — photographs and any image with smooth gradients. Lossy, no transparency, universally supported.
- PNG — screenshots, logos, line art, anything with flat colour areas or sharp edges. Lossless, supports transparency, poor for photos.
- WebP — modern replacement for both. Typically 25-35% smaller than JPEG at equivalent quality, supports transparency and animation, supported by every current browser.
- SVG — logos, icons and diagrams that are drawn rather than photographed. Infinitely scalable and usually a few kilobytes.
Lever three: choose quality deliberately
JPEG and WebP quality settings run from 1 to 100, but the scale is not linear and the interesting region is narrow. Below about 60 you will see blocky artefacts in gradients such as skies and skin. Above about 90 you are paying a great deal of file size for differences almost nobody can see.
In practice, 75-85 is the working range for photographs. For screenshots containing text, either keep PNG or push WebP quality to 90 — text edges are exactly where lossy compression is most visible.
How to judge the result honestly
Do not evaluate a compressed image by looking at a thumbnail. Open the original and the compressed version at 100% zoom, side by side, and look specifically at the places compression fails first: smooth gradients, dark shadow areas, fine text and hard edges against flat backgrounds.
If you cannot tell them apart at 100%, the compression is free. If you can, step the quality up by five and try again. This loop takes under a minute and is far more reliable than trusting a preset.
Batch habits that keep files small
Set a maximum dimension policy for your project — for example, no image wider than 1600 pixels for content images and 2400 for full-bleed heroes — and apply it before anything reaches your library. Policies applied at the door are far easier than clean-up later.
Strip metadata when the image is going on the public web. EXIF blocks can add tens of kilobytes and, in the case of photographs taken on a phone, may contain GPS coordinates you did not intend to publish.
Frequently asked questions
- Is WebP safe to use now?
- Yes. Every current version of Chrome, Firefox, Safari and Edge supports WebP, and it typically saves 25-35% over JPEG at matched quality.
- Why did compressing my PNG barely help?
- PNG is lossless, so the only savings come from better prediction and palette reduction. For photographs stored as PNG, converting to JPEG or WebP is what produces the large win.
- Does resizing an image reduce quality?
- Downscaling discards pixels you cannot see at the display size, so it looks identical while being far smaller. Upscaling, by contrast, cannot add detail that was never captured.