The clear explanation of lossy vs lossless compression, JPG's DCT blocks, PNG's DEFLATE, and how to reduce image file size without visible quality loss.
Permanently discards image data that the algorithm determines is imperceptible to human vision. Produces much smaller files. Quality cannot be fully recovered. Used by JPG and lossy WebP. Best for photographs where small file size matters most.
Reduces file size by encoding data more efficiently — without discarding any information. The original image can be reconstructed perfectly. Used by PNG and lossless WebP. Best for graphics, logos, and images that will be edited further.
The image is converted from RGB (red, green, blue) to YCbCr — a format that separates brightness (luma) from color information (chroma). The human eye is far more sensitive to brightness than to color, so this separation allows color data to be compressed more aggressively than brightness data.
The color channels (Cb and Cr) are reduced in resolution — typically to half size — while the brightness channel is kept at full resolution. Since our eyes don't notice color detail as sharply as brightness detail, this step alone typically reduces data by 50% with negligible visible impact on photographic content.
Each channel is divided into 8×8 pixel blocks. Each block is then processed by a Discrete Cosine Transform (DCT) — a mathematical operation that converts the spatial pixel values into frequency components. Low-frequency components describe broad color areas; high-frequency components describe fine detail and sharp edges.
This is the step that actually loses information. The DCT coefficients — especially the high-frequency ones — are divided by a quantization table and rounded to integers. The higher the compression level, the more aggressively coefficients are rounded, discarding fine detail. This step is irreversible. This is why JPG degrades with every re-save and why JPG compression causes blurring around sharp edges.
The quantized values are compressed further using Huffman coding — a lossless step that assigns shorter binary codes to more common values. This final step squeezes out remaining redundancy without any additional quality loss. The result is the final JPG file.
PNG uses an entirely different approach: lossless compression. No data is ever discarded. The PNG algorithm works in two stages. First, a filter is applied to each row of pixels to make the data more compressible. The filter predicts the value of each pixel based on its neighbors and stores only the difference (the "delta") rather than the absolute value. Images with smooth gradients and flat areas produce very small delta values that compress well.
Second, the filtered pixel data is compressed using DEFLATE — the same algorithm used in ZIP files. DEFLATE finds repeated patterns in the data and replaces them with shorter references. For images with large flat areas of the same color (logos, icons, screenshots), this produces dramatic size reductions. For photographs with complex natural variation in every pixel, DEFLATE finds few repeated patterns, producing large files.
Because no data is discarded, a PNG can always be decompressed back to the exact original pixel values. You can save, open, edit, and re-save a PNG file an unlimited number of times with zero quality degradation — unlike JPG.
WebP offers both lossy and lossless modes. Lossy WebP is based on the VP8 video codec's intra-frame compression — it uses a similar block-based DCT approach to JPG but with more sophisticated prediction and entropy coding, achieving roughly 25–35% smaller files than JPG at equivalent quality. The visual quality profile of lossy WebP also tends to be better than JPG — fewer ringing artifacts around sharp edges.
Lossless WebP uses a different algorithm called WebP Lossless, which applies more sophisticated spatial prediction than PNG's row-filter approach, plus a transform-based compression stage. The result is files approximately 26% smaller than equivalent PNG while perfectly preserving every pixel. WebP also supports animation (animated WebP) and alpha transparency in both lossy and lossless modes.
Quality 80 typically cuts a photo's file size by 60–70% versus quality 100 with no visible difference. Going below 70 starts to introduce noticeable artifacts. The sweet spot is 75–85 for most use cases.
WebP at quality 80 produces files 25–35% smaller than JPG at the same quality. Since all modern browsers support WebP, switching your web images to WebP is one of the highest-impact performance improvements you can make.
A 4000×3000px image displayed at 800×600px on screen wastes bandwidth. Resize the image to the maximum display size before compressing. This is often the single biggest file size reduction available — dimensions matter more than compression settings.
Each time you open and re-save a JPG, another round of lossy compression is applied on top of existing compression — causing cumulative generation loss. Always keep master files in PNG format and export to JPG only as a final delivery step.
PNG's lossless compression works well for graphics with flat colors but compresses photos poorly. A photograph saved as PNG is typically 3–5x larger than the same photo as JPG. Only use PNG for photos when you need to preserve absolute quality for further editing.
Photos contain EXIF metadata — camera settings, GPS coordinates, timestamps — that can add 30–100KB to a file. Removing metadata before publishing web images is a free size reduction with no visual impact. IMGVO removes metadata automatically when you compress.
AVIF (AV1 Image File Format) is the newest major image format and uses the most advanced compression available today. It's based on the AV1 video codec developed by the Alliance for Open Media — a coalition including Google, Netflix, Apple, and Amazon.
AVIF uses several advanced techniques that older formats lack: it can analyze larger blocks of pixels at once (up to 128×128 vs JPG's 8×8), uses more sophisticated prediction models, supports HDR and wide color gamut natively, and handles film grain efficiently without needing to encode every grain separately.
The result: AVIF is typically 50% smaller than JPG and 20–30% smaller than WebP at the same visual quality. The trade-off is encoding speed — AVIF takes significantly more CPU to compress than JPG or WebP, though decoding (what browsers do to display it) is fast.
These are two different techniques that both reduce file size:
| Technique | How it works | Affects dimensions? | Quality impact |
|---|---|---|---|
| Compression | Reduces data per pixel | No — same pixel dimensions | Possible (lossy) or none (lossless) |
| Resizing | Reduces total pixel count | Yes — smaller width × height | Yes — detail is permanently lost |
| Format change | Uses better algorithm | No | None (or less than old format) |
For web images, the ideal workflow combines all three: resize to the display dimensions, convert to WebP, and compress at 80–85% quality. This typically reduces file size by 80–95% compared to the original unoptimized image.
| Format | Use Case | Recommended Quality | Expected File Size* |
|---|---|---|---|
| WebP | Web photos | 75–80% | 150–250 KB |
| WebP | Web graphics / logos | Lossless | 15–40 KB |
| JPG | Social media photos | 80–85% | 200–350 KB |
| JPG | Email newsletters | 70–80% | 100–200 KB |
| PNG | Screenshots with text | Lossless | 300–700 KB |
| PNG | Logos with transparency | Lossless | 10–40 KB |
| AVIF | Hero images, performance-critical | 60–70% | 80–160 KB |
*Estimated for a typical 1920×1080 photograph. Actual sizes vary by image content.
Lossy compression permanently discards some image data to achieve smaller file sizes — JPG and WebP (in lossy mode) use this approach. Lossless compression reduces file size without discarding any data, so the image can be perfectly reconstructed — PNG uses lossless compression. Lossy files are smaller but cannot be restored to the original; lossless files are larger but preserve every pixel exactly.
It depends on the method. Lossy compression (JPG, lossy WebP) permanently removes some image data, which reduces quality — the degree of quality loss depends on the compression level. Lossless compression (PNG, lossless WebP) reduces file size without any quality loss at all. IMGVO lets you adjust the quality level when compressing, so you can find the right balance for your needs.
To reduce file size without visible quality loss, use WebP format at quality 80–85 for photos, or PNG with lossless compression for graphics. For JPG images, quality settings of 75–85 typically cut file size by 60–70% with no perceptible difference. IMGVO's browser-based compression lets you preview results before downloading.
JPG uses lossy compression, which discards some data every time the file is saved. Each save applies another round of compression on top of the already-compressed data, causing cumulative quality degradation — called generation loss. To avoid it, keep master files in PNG format and only convert to JPG as a final export step — never edit and re-save the same JPG repeatedly.
For JPG, quality settings of 75–85% produce files 60–70% smaller than uncompressed with no visible quality difference to most viewers. Below 60% quality, compression artifacts become clearly visible. For WebP, quality 75–80 is typically the sweet spot. For lossless PNG, all compression levels produce identical image quality — only file size varies.
Image compression directly impacts your Largest Contentful Paint (LCP) score — Google's primary metric for page load speed. Uncompressed or oversized images are one of the top reasons for PageSpeed failures. Google Lighthouse specifically flags images larger than necessary and recommends serving them in WebP or AVIF format. Compressing images to under 100 KB each and using next-gen formats typically improves PageSpeed by 10–30 points.
Only with lossless formats. PNG, lossless WebP, and TIFF can be decompressed to the exact original pixels. JPG, lossy WebP, and AVIF (in lossy mode) permanently discard data — the original cannot be recovered. This is why it's important to keep master copies in lossless formats and export to lossy formats only when needed.
Chroma subsampling is a technique used in JPG (and other formats) based on the fact that the human eye is more sensitive to brightness changes than color changes. The compression algorithm stores full brightness information for every pixel but averages the color information across groups of 2 or 4 pixels. The most common setting is 4:2:0, which reduces color data by 75% while being nearly invisible to viewers. This is a major contributor to JPG's ability to achieve small file sizes without obvious quality loss.
IMGVO compresses JPG, PNG, and WebP images directly in your browser. No file uploads, no server, no signup. Your images stay on your device.