What is image compression?
A digital image is made up of pixels, and each pixel stores color information — typically as red, green, and blue values (RGB). An uncompressed image stores every one of these values directly. A 1920×1080 image has over two million pixels; at 3 bytes each (8 bits per channel), that is more than 6MB of raw data before any compression.
Image compression works by finding and removing redundancy in that pixel data. Adjacent pixels in a photograph are often very similar — a clear blue sky might have thousands of pixels that are nearly the same shade. Compression algorithms exploit this similarity to represent the image with far fewer bits.
There are two fundamentally different approaches to removing redundancy: lossy compression and lossless compression.
Lossy compression: JPEG, WebP, AVIF
Lossy compression achieves smaller file sizes by permanently discarding some image data. The key word is permanently — once you save a JPEG, the discarded data is gone. Decompressing the file gives you a close approximation of the original, not an exact copy.
What gets discarded? Lossy codecs exploit limitations of human vision. The human eye is more sensitive to brightness changes than color changes, and more sensitive to gradual transitions than sharp edges. JPEG (and WebP/AVIF lossy modes) use transforms to separate brightness and color information, then apply more aggressive compression to the color components. High-frequency detail in smooth areas — the kind of detail your eye is least likely to notice — is discarded first.
How JPEG quality settings work
JPEG encoders use a quantization table to decide how much detail to discard. The "quality" setting (typically 0–100) adjusts how aggressively this table is applied. Higher quality means less data is discarded; lower quality means more is discarded and file sizes shrink further.
The relationship between quality setting and file size is not linear:
- Quality 90: Very little visible degradation. File size might be 2–3× larger than quality 80, for a marginal visual improvement.
- Quality 80: A good starting point for most web images. Artifacts are minimal on photographs and most users would not notice compression at normal viewing distances.
- Quality 75: Noticeably smaller files. Some artifacts may appear in smooth gradients or around high-contrast edges, but are often acceptable for thumbnails and non-critical images.
- Quality 70 and below: Compression artifacts become more visible — blocky patterns in smooth areas, ringing around text and edges. Usable for very small thumbnails, but generally not for hero images or product photos.
Practical starting point: Use quality 80–82 for photographs on web pages. Evaluate the output visually, then adjust up or down based on what you see. Do not pick a number and leave it — the same quality setting produces different visual results depending on image content.
WebP and AVIF lossy compression
WebP (developed by Google) and AVIF (based on the AV1 video codec) use more sophisticated compression algorithms than classic JPEG. Both formats analyze larger blocks of the image and use more advanced prediction and entropy coding techniques.
At equivalent visual quality, WebP typically produces files 25–35% smaller than JPEG. AVIF goes further — roughly 40–50% smaller than JPEG at comparable quality. This gap is most pronounced on photographic content with smooth gradients.
Lossless compression: PNG, WebP lossless
Lossless compression reduces file size without discarding any pixel data. Decompress a lossless file and you get back the exact original, pixel for pixel.
Lossless compression works by reorganizing data more efficiently, not by discarding it. Techniques like run-length encoding (representing repeated values as a count and a value) and dictionary-based compression (replacing repeated patterns with shorter codes) are common in lossless image codecs.
PNG is the standard lossless format for web images. It uses the DEFLATE compression algorithm, which is similar to what ZIP uses. PNG stores all pixel values exactly but represents them in a more compact form. A solid-color region that might take thousands of bytes as raw data might take just a few dozen bytes as PNG.
When to use lossless compression
- Screenshots with text. Lossy compression creates visible artifacts around text — blurry edges and color fringing. Lossless PNG keeps text sharp.
- Graphics and illustrations with flat colors. Logos, icons, and diagrams often compress very well as PNG and would show blocky artifacts as JPEG.
- Images you will edit and re-save. Each time you re-save a JPEG, you re-apply lossy compression. Over several saves, quality degrades noticeably. Store masters as PNG or TIFF.
- Transparency required. JPEG does not support transparency. PNG supports full 8-bit alpha transparency.
Lossless is not always smaller. For photographs, PNG is typically 3–5× larger than a JPEG at quality 80. Lossless compression removes coding redundancy but cannot discard visual data — photographs have very little coding redundancy, so lossless compression has little to work with.
Choosing a quality setting for your use case
There is no universal answer — the right setting depends on what the image is and how it will be used. That said, here are the ranges that work well in practice:
| Use case |
Format |
Quality range |
| Web page hero images |
WebP or JPEG |
78–85 |
| Product photos (e-commerce) |
WebP or JPEG |
80–88 |
| Blog post images |
WebP or JPEG |
75–82 |
| Thumbnails |
WebP or JPEG |
65–78 |
| Archival / print originals |
PNG or JPEG 92+ |
90–95 (or lossless) |
| Screenshots / UI mockups |
PNG |
Lossless |
File size targets for common use cases
Hitting a target file size often matters as much as choosing a quality setting. Here are practical targets for the most common scenarios:
- Email attachments: Under 500KB per image is a generally safe limit. Under 200KB is better for newsletters and HTML emails where multiple images appear.
- Social media uploads: Platforms like Twitter/X, Instagram, and LinkedIn re-compress images after upload. Uploading under 2MB ensures you are not hitting upload limits, but the platform will re-encode anyway.
- Web page hero images: Under 200KB is a good target; under 150KB is better. A full-width hero that takes 800KB will meaningfully hurt your LCP score.
- Blog and article images: Under 150KB for inline images; under 100KB for images appearing below the fold.
- Thumbnails and gallery images: Under 60KB each. If you have a grid of 12 thumbnails, even at 60KB each that is 720KB total.
- Favicons: Under 5KB.
To hit a specific file size target automatically, use the Compress Under 200KB tool, which iterates through quality settings to find the highest quality that still meets the target.
Converting to modern formats: WebP and AVIF
Switching from JPEG to WebP is the single highest-return change for most web images. At comparable visual quality, WebP files are typically 25–35% smaller. For a site with 100 images averaging 300KB as JPEG, converting to WebP could save 7–10MB of page weight across the site.
AVIF compresses even better — roughly 40–50% smaller than JPEG at comparable quality — but comes with trade-offs:
- Encoding is significantly slower. AVIF encoding can take 10–30× longer than JPEG for the same image.
- Browser support is now broad (Chrome 85+, Safari 16+, Firefox 113+) but not universal. Older Android browsers and some mobile browsers still lack support.
Both WebP and AVIF improve Core Web Vitals scores by reducing the time taken to download and decode images, which feeds directly into your Largest Contentful Paint (LCP) score.
When NOT to compress
Compression is not always the right move. Avoid compressing in these situations:
- Screenshots with text at small sizes. Even mild lossy compression creates visible artifacts around small text — compression artifacts that are easy to miss at full size but obvious when reading.
- Images you plan to edit further. Edit your master file, then compress at the end. Re-compressing a JPEG introduces a new round of quality loss.
- Already-compressed files. Re-compressing a JPEG that was already compressed at quality 75 will not make it significantly smaller — the redundancy has already been removed. You will only degrade quality further.
- Images for print. Print output is typically 300 DPI and lossy compression at web quality settings will produce visible artifacts in print.
- Medical or scientific images. Any context where accurate pixel values matter — radiography, microscopy, scientific visualization — use lossless formats or no compression.
FAQ
Does compressing a PNG give you a lossy result?
PNG compression is always lossless — you can compress a PNG at any setting and the pixel data will be identical when decompressed. The compression level in PNG only affects how much CPU time the encoder spends finding patterns; it does not affect quality. If you want lossy compression of a PNG, you would convert it to JPEG or WebP lossy mode.
Can I restore quality after saving a JPEG?
No. Once you save a JPEG, the discarded data is gone permanently. Increasing the quality setting on a re-save will make the file larger but will not restore lost detail — it just applies less additional compression to the already-degraded image. This is why it is important to keep original, uncompressed masters of photos you might want to re-use.
Why does the same quality setting produce different file sizes for different images?
Image content matters enormously. A photograph of a forest with complex texture and color variation compresses less efficiently than a photograph of a white wall. The forest has less pixel-to-pixel redundancy, so there is less to exploit. This is also why quality settings are just a starting point — you always need to check the output visually and see the actual file size for your specific image.
Is WebP always better than JPEG?
For most web images, WebP gives better results at smaller file sizes. The main exception is very high quality settings (90+), where the difference narrows significantly. WebP also adds transparency support that JPEG lacks. The only reason to prefer JPEG over WebP today is compatibility with very old software or systems that cannot process WebP files.
How does progressive JPEG work?
A standard (baseline) JPEG loads from top to bottom — you see a partial image as data arrives. A progressive JPEG renders the entire image at low quality first, then multiple passes refine the detail. Progressive JPEGs appear to load faster because users see the full composition immediately. They are usually slightly smaller than baseline JPEGs. However, for most modern web use, serving WebP with appropriate lazy loading is a more impactful optimization.