Large images slow down websites, hurt search rankings, and increase bounce rates. But compress too aggressively and photos look blocky and amateur. The goal is to find the quality threshold where the image is indistinguishable from the original at the size it will actually be displayed — and stop there. This guide explains how to find that point reliably.
What compression actually does
Image compression reduces file size by removing data. The question is which data. Lossless compression removes mathematical redundancy — repeated patterns and predictable sequences — without changing any pixel values. Lossy compression discards image information that is statistically unlikely to be visible to a human viewer.
For JPEG and WebP in lossy mode, a quality setting (typically 0–100) controls how aggressively information is discarded. Quality 100 retains almost everything and produces large files. Quality 50 discards a lot and produces small files with visible artifacts. Quality 80 discards just enough that most viewers cannot see the difference at normal viewing sizes — and produces files that are 60–80% smaller than quality 100.
Choose the right format before compressing
Compression settings only matter after you have chosen the right format. Starting with the wrong format limits how small you can get before quality becomes unacceptable.
- Photographs: Use JPEG or WebP in lossy mode. WebP typically produces files 25–35% smaller than JPEG at equivalent visual quality.
- Screenshots, diagrams, text overlays: Use PNG or lossless WebP. Lossy compression on these content types produces visible artifacts on sharp edges at almost any quality setting.
- Images needing transparency: Use WebP or PNG. JPEG does not support alpha channels.
- Maximum compression for modern browsers: Use AVIF. It typically beats WebP by 30–50% but encodes slowly.
The quality setting: what numbers actually mean
Quality settings are not standardized across tools — a JPEG at quality 80 in one encoder may not match quality 80 in another. What matters is the visual output and the resulting file size, not the number itself. Use the number as a starting point, then judge the result.
Practical guidelines:
- Hero images and product photos (viewed large, examined closely): quality 82–88.
- Standard content images (article photos, blog thumbnails, gallery images): quality 75–82.
- Thumbnails and small previews (displayed under 300 pixels wide): quality 65–75. Artifacts are less visible at small sizes.
- Background images (full-width, no fine detail visible): quality 60–70.
WebP quality settings are not directly comparable to JPEG quality numbers. WebP at quality 80 typically looks better than JPEG at quality 80 and produces a smaller file. Experiment with the actual output rather than relying on the number alone.
Resize before you compress
Compression reduces visual information within a fixed pixel count. Resizing reduces the pixel count itself. Both reduce file size, but they work at different levels and resizing typically has a much larger impact.
A photo from a modern smartphone is 4000–8000 pixels wide. If it will be displayed at 800 pixels wide on a web page, uploading the original means transferring 25–100× more pixels than necessary. Resizing to 1600 pixels wide (2× the display width for retina screens) before compression can reduce file size by 85–95% before quality settings are even applied.
Always resize first, then compress. Compressing a 6000-pixel image at quality 85 and resizing a 1600-pixel image at quality 80 will often produce a better-looking, smaller result from the second approach.
Strip metadata to save extra bytes
EXIF metadata — GPS coordinates, camera model, capture time, lens settings — adds bytes to every JPEG file without contributing anything to what the viewer sees. Stripping it typically saves 10–50 KB per image. That is modest compared to the savings from resizing and quality adjustments, but it is free, takes no effort, and removes potentially sensitive location data from publicly accessible files.
PhotoTools strips EXIF automatically when you use the compress tool. The exported file contains image data only.
How to compare compression results
The most common mistake when evaluating compression is comparing the compressed image to the original at full resolution zoom. At 100% zoom of a 4000-pixel image on a 1440-pixel screen, every compression artifact is magnified. At the actual display size — 800 pixels wide in a browser — those same artifacts are invisible.
Compare images at the size they will actually be displayed. Open both in a browser at the intended layout width, not at full zoom. Check areas with smooth gradients (sky, skin), fine detail (hair, fabric texture), and high-contrast edges (text, logos). If you cannot see a difference at the display size, the compressed version is acceptable.
Target file sizes for web images
- Thumbnail (under 300 px wide): under 30 KB
- Content image (600–900 px wide): 50–150 KB
- Full-width hero (1400–1600 px wide): 150–350 KB
- Product photo (800–1200 px wide): 80–200 KB
These are targets, not hard limits. Complex, detail-rich photos will be larger. Simple, smooth-gradient images can often be smaller. Use these as a benchmark to identify images that are significantly over-compressed or under-compressed.
A repeatable workflow
- Start from the original, full-resolution source file. Never compress a file that has already been compressed.
- Choose the output format based on content type: WebP for photographs, PNG for graphics.
- Resize to approximately 2× the maximum CSS display width.
- Set quality to 80 as a starting point and adjust based on visual comparison.
- Compare at the actual display size, not at full zoom.
- Verify the output file size against the targets above before publishing.
The compression tool on PhotoTools handles format selection, quality adjustment, and EXIF stripping in your browser without uploading files to a server. Use the resize tool first if the source image is much larger than the intended display size.
Frequently asked questions
How do I compress images for a website without losing quality?
Find the quality threshold where the image looks identical at the size it will be displayed, then stop there. In practice: resize to about 2× the display width, set quality near 80, and compare at the rendered size rather than at full zoom.
What is the best compression quality for web images?
Quality 75–85 suits most web photos. Use 82–88 for hero and product images viewed closely, and 65–75 for thumbnails where artifacts are less visible.
Should I resize or compress images for the web?
Both, in order: resize to the largest size the image will be displayed first, then compress. Resizing usually removes far more bytes than quality settings alone, and doing it first produces a cleaner, smaller result.
Why do my images look bad after compressing?
Usually because you are judging them at full-resolution zoom. Compare at the actual display width — artifacts that are obvious at 100% zoom typically vanish at the size the image renders on the page.