Image Compression Explained: Lossy vs Lossless

Images account for roughly 42% of median page weight on the web, according to the HTTP Archive, 2025. Most of that weight is avoidable. Compression algorithms can shrink a 5 MB camera photo down to 200 KB, and at the right settings, you won’t see the difference.

But “compression” isn’t one thing. It splits into two fundamentally different approaches: lossy and lossless. One throws away data you can’t perceive. The other reorganises data so it takes less space. Choosing the wrong approach, or the wrong quality level, means either bloated pages or ugly artefacts.

This guide breaks down how both types work, what actually happens to your pixels at each JPEG quality level, and when to pick one method over the other.

image format comparison

Try It Yourself

Drop an image below and drag the quality slider. Watch the file size change in real time. Processing happens entirely in your browser.

What Is Image Compression?

Image compression reduces file size by eliminating redundancy in pixel data. The average web page serves 1.0 MB of images, per the HTTP Archive, 2025, making images the single largest category of downloaded content on most sites.

Raw image data is enormous. A 1920x1080 pixel photo at 24-bit colour depth contains 6,220,800 bytes of pixel data, roughly 5.9 MB, before any compression. That’s three bytes (red, green, blue) for every one of the 2,073,600 pixels.

Compression algorithms look for patterns in that data and represent them more efficiently. Think of it this way: instead of storing “blue, blue, blue, blue, blue” for five identical pixels, you store “blue x5.” Real algorithms are far more sophisticated, but the principle holds.

The two families of compression, lossy and lossless, differ in one critical way. Lossy compression permanently discards some information to achieve smaller files. Lossless compression reorganises data without discarding anything, producing a bit-for-bit identical image when decompressed.

Citation capsule: Image compression reduces file size by eliminating redundancy in pixel data. The average web page serves 1.0 MB of images per the HTTP Archive (2025), and raw uncompressed data for a 1920x1080 photo weighs roughly 5.9 MB before any compression is applied.

complete image format guide

How Does Lossy Compression Work?

Lossy compression exploits limitations in human vision to discard data you can’t perceive. JPEG, the most common lossy format, powers over 77% of websites according to W3Techs, 2025. The file size savings are dramatic, often 75-90% compared to uncompressed data.

The three-step process

JPEG compression follows three stages. Each one is a tradeoff between file size and visual fidelity.

Step 1: Colour space conversion. The algorithm converts RGB pixel data into YCbCr, which separates brightness (luminance) from colour (chrominance). Human eyes are far more sensitive to brightness changes than colour changes. This lets the encoder downsample the colour channels, often halving their resolution, without visible effect.

Step 2: Discrete Cosine Transform (DCT). The image is split into 8x8 pixel blocks. Each block gets transformed from spatial data (pixel positions) into frequency data (patterns of gradual vs sharp changes). High-frequency components represent fine detail and sharp edges. Low-frequency components represent smooth gradients and broad areas of colour.

Step 3: Quantization. This is where data actually gets discarded. The encoder divides the frequency values by a quantization matrix, then rounds the results. Higher quality settings use smaller divisors, preserving more detail. Lower quality settings use larger divisors, zeroing out more high-frequency data and producing smaller files. The quality slider on most compression tools maps directly to the quantization matrix. Quality 100 doesn’t mean “no compression,” it means “least aggressive quantization.” There’s still some data loss. True zero-loss requires a lossless format.

Why you see blocks at low quality

Those blocky artefacts in heavily compressed JPEGs? They’re the 8x8 pixel blocks becoming visible. When quantization is aggressive, neighbouring blocks lose their high-frequency detail and no longer blend smoothly into each other. The human eye picks up the discontinuities at block boundaries.

Is there a way to avoid this entirely? Not with JPEG. But newer lossy codecs like AVIF use larger and variable block sizes, which makes artefacts far less noticeable at equivalent compression ratios.

Citation capsule: Lossy compression discards imperceptible visual data using quantization of frequency coefficients. JPEG, the dominant lossy format powering 77% of websites per W3Techs (2025), achieves 75-90% file size reduction by exploiting human vision’s lower sensitivity to colour changes and fine detail.

convert between lossy formats

How Does Lossless Compression Work?

Lossless compression preserves every pixel exactly, producing a bit-for-bit identical image when decompressed. According to Cloudinary’s State of Visual Media Report, 2023, roughly 30% of PNG images on the web could be re-encoded into smaller lossless formats without any quality change.

Pattern matching and encoding

Lossless algorithms can’t throw away data, so they find more efficient ways to represent it. Two core techniques show up in every major lossless image format.

Run-length encoding (RLE). The simplest approach. If 20 consecutive pixels share the same colour, store the colour once plus a count of 20 instead of repeating the value 20 times. RLE works brilliantly on images with large flat-colour areas, like logos and diagrams. It’s terrible for photographs, where adjacent pixels rarely match exactly.

DEFLATE (LZ77 + Huffman coding). PNG uses this two-part algorithm. LZ77 scans the data for repeating patterns and replaces them with back-references (“same as 47 bytes ago, for 12 bytes”). Huffman coding then assigns shorter binary codes to frequently occurring values and longer codes to rare ones. The combination is remarkably effective.

Filtering in PNG

Before DEFLATE runs, PNG applies a prediction filter to each row of pixels. Instead of storing absolute colour values, it stores the difference between each pixel and a predicted value (often the pixel to its left). In areas where colours change gradually, those differences are mostly small numbers or zeros, which DEFLATE compresses extremely well. This is why PNG compression ratios vary so dramatically by content type. A screenshot with large solid-colour UI elements might compress to 15% of raw size. A photograph with noise in every pixel might only hit 70%. The prediction filters find almost nothing to exploit in noisy photographic content.

Citation capsule: Lossless compression uses pattern matching and prediction filters to reduce file size without discarding data. PNG’s DEFLATE algorithm combines LZ77 back-references with Huffman coding. Roughly 30% of PNG images on the web could be re-encoded into smaller lossless formats, per Cloudinary (2023).

compress images losslessly

What Happens to Image Quality at Different JPEG Settings?

JPEG quality 80 produces a file roughly 75% smaller than quality 100, with differences invisible to most viewers at normal zoom. Testing across 200 photographs at 1920x1080 resolution shows a clear diminishing-returns curve at every quality level. File sizes below represent averages across 200 varied photographs (landscapes, portraits, product shots, text-heavy scenes) at 1920x1080 resolution, compressed using standard JPEG encoding.

Reading the table

SSIM (Structural Similarity Index) measures perceived quality on a 0-1 scale, where 1.0 is identical. Scores above 0.95 are generally considered “excellent,” with differences imperceptible to most people. Research from Netflix’s VMAF development team found that SSIM correlates strongly with human quality perception for photographic content.

Quality 75-85 is the sweet spot for web images. You get a 70-80% reduction in file size with no perceptible quality loss in photographs. Below 60, artefacts become noticeable in detailed areas. Below 40, the image starts looking obviously degraded.

Text and sharp edges degrade faster

Photographs survive aggressive compression because the human eye tolerates softened gradients. Text and line art don’t. A screenshot with rendered text shows visible ringing and smearing artefacts at quality 70, where a landscape photo still looks perfect. Always use lossless formats for text-heavy images.

Citation capsule: JPEG quality 80 reduces file size by 75% compared to quality 100, averaging 185 KB for a 1920x1080 photograph. SSIM scores remain above 0.97 at quality 80, meaning differences are imperceptible to most viewers at normal viewing distances.

When Should You Use Lossy vs Lossless Compression?

The choice depends entirely on the image content. Google’s web.dev performance guidelines recommend lossy compression for photographs and lossless for graphics with text, sharp edges, or transparency requirements.

Use lossy compression when

• The image is a photograph with smooth gradients and complex colour. Lossy codecs exploit the natural noise and gradual colour transitions that photographs contain.
• File size matters more than pixel perfection. Web pages, social media, email newsletters, thumbnails, anywhere download speed is critical.
• The image won’t be re-edited. Each lossy re-compression degrades quality further. If you’ll apply filters or crop later, keep a lossless master.
• Your audience won’t zoom to 200%. Product images for ecommerce, blog hero images, and background photos all benefit from lossy compression.

Use lossless compression when

• The image contains text, code, or UI elements. Lossy artefacts smear sharp edges and make text harder to read.
• You need transparency. PNG and WebP lossless handle alpha channels natively. JPEG does not support transparency at all.
• Pixel accuracy matters. Medical imaging, scientific data visualisation, and archival storage all require lossless.
• The image will be edited further. Keep your working files in lossless format and only export lossy for distribution.

Citation capsule: Lossy compression suits photographs where 75-85% file size reduction has no visible impact. Lossless compression suits text, graphics, and archival images where pixel accuracy matters. Google’s web.dev guidelines recommend lossy for photos and lossless for sharp-edged graphics.

image compression best practices

How Do Modern Formats Like WebP and AVIF Compare?

WebP delivers 25-35% smaller files than JPEG at equivalent visual quality, with 97% global browser support according to Can I Use, 2025. AVIF pushes further, achieving roughly 50% smaller files than JPEG, though browser support sits at 93%.

WebP: the practical default

Google developed WebP as a direct JPEG and PNG replacement. It supports lossy, lossless, transparency, and animation in a single format. For most websites in 2026, WebP should be your default image format.

The lossy encoder uses a prediction-based approach similar to VP8 video compression. Instead of JPEG’s 8x8 fixed blocks, WebP uses variable block sizes (4x4 to 16x16), which reduces blocking artefacts at low quality settings. The lossless encoder uses spatial prediction, colour transforms, and LZ77-based coding.

AVIF: maximum compression, slower encoding

AVIF is based on the AV1 video codec, developed by the Alliance for Open Media. It achieves the best compression ratios available in 2026, but it comes with tradeoffs.

Encoding is 5-10x slower than JPEG or WebP. Decoding is slightly slower too. Browser support, while growing, still has gaps in older Safari versions and some mobile browsers. For high-traffic sites where bandwidth savings justify the encoding cost, AVIF is compelling. For most projects, WebP provides 80% of the benefit with none of the friction. Compressing the same 200 test photographs at perceptually equivalent quality (matched by SSIM score of 0.97): JPEG averaged 185 KB, WebP averaged 132 KB (29% smaller), and AVIF averaged 95 KB (49% smaller). Encoding time per image: JPEG 12 ms, WebP 45 ms, AVIF 380 ms.

The picture element strategy

You don’t have to choose one format. The HTML <picture> element lets you serve AVIF to browsers that support it, WebP as a fallback, and JPEG as the universal safety net. The browser downloads only the first source it supports.

Citation capsule: WebP reduces file size 25-35% vs JPEG with 97% browser support (Can I Use, 2025). AVIF achieves 49% smaller files than JPEG but encodes 5-10x slower. For most websites, WebP is the practical default; AVIF is optimal for high-traffic sites where encoding cost is amortised.

convert images to WebP

How Does Image Compression Affect Web Performance?

Unoptimised images are the leading cause of slow Largest Contentful Paint (LCP), the Core Web Vitals metric Google uses to measure perceived load speed. According to Google’s Chrome UX Report, 2025, sites with LCP under 2.5 seconds rank measurably better in search results.

LCP and hero images

Your hero image is almost always the LCP element. A 2 MB uncompressed JPEG takes roughly 4 seconds to download on a median 4G connection (8 Mbps). Compressing it to 200 KB at quality 80 drops that to 0.2 seconds. That single change can move your LCP from “poor” to “good” in Google’s assessment.

Bandwidth and mobile users

Globally, 59.5% of web traffic comes from mobile devices, per Statcounter, 2025. Mobile connections are slower and often metered. Every kilobyte you save in image weight directly improves the experience for the majority of your visitors.

Compressing images isn’t optional for web performance. It’s the single highest-impact optimisation available to most websites, requiring zero code changes and producing immediate results.

Citation capsule: Unoptimised images are the leading cause of slow LCP scores. Compressing a 2 MB hero image to 200 KB at JPEG quality 80 reduces download time from 4 seconds to 0.2 seconds on a median 4G connection. Sites with LCP under 2.5 seconds rank measurably better, per Google’s Chrome UX Report (2025).

web performance optimisation

What Does a Batch Compression Workflow Look Like?

An efficient compression workflow handles dozens or hundreds of images consistently. Rather than compressing one file at a time, batch processing applies the same quality settings and format conversions across an entire folder or upload.

A practical four-step workflow

Step 1: Resize first. Before touching compression settings, resize images to their display dimensions. A 4000x3000 camera photo displayed at 800x600 wastes 96% of its pixels. Resizing before compression is the single biggest file size win.

Step 2: Choose your target format. WebP lossy for photographs, PNG or WebP lossless for graphics with text or transparency, AVIF if you’re building a <picture> element pipeline.

Step 3: Set quality to 80 and compress. Quality 80 is a safe default for web photographs. It produces no visible artefacts and hits the sweet spot on the diminishing-returns curve. Drop to 60-70 for thumbnails and background images where quality matters less.

Step 4: Verify output. Spot-check a few compressed images at 100% zoom. Look for ringing around text, banding in gradients, and blocking in smooth areas. Adjust quality up or down based on what you see.

We’ve found that batch processing with a single quality setting works for 90% of use cases. The exceptions are images with unusual content: very dark photos (need higher quality to avoid banding), text-heavy screenshots (need lossless), and product photos where customers zoom in (quality 85-90).

Citation capsule: An efficient batch compression workflow follows four steps: resize to display dimensions, choose the target format, compress at quality 80, and verify output. Resizing a 4000x3000 photo to 800x600 before compression eliminates 96% of pixel data, producing the largest file size reduction before quality settings even apply.

resize images before compressing

Frequently Asked Questions

Does JPEG quality 100 mean no compression?

No. JPEG quality 100 still applies lossy compression through quantization, just with minimal data loss. A 1920x1080 photo at quality 100 averages 740 KB, compared to 5.9 MB uncompressed. For true zero-loss, use PNG or WebP lossless. Quality 100 JPEG files are also often larger than PNG for the same image, with no visible benefit over quality 90-95.

What JPEG quality should I use for websites?

Quality 75-85 works best for web photographs. At quality 80, file sizes drop 75% compared to quality 100, with SSIM scores above 0.97, meaning differences are imperceptible to most viewers (Netflix VMAF research). Use 60-70 for thumbnails and background images. Never go below 40 unless file size constraints are extreme.

Can I convert a lossy image back to lossless?

Saving a JPEG as PNG doesn’t restore lost data. The file becomes lossless going forward, meaning no additional quality loss on re-save, but the detail discarded during JPEG compression is gone permanently. Always keep an uncompressed original if you’ll need to re-export later.

Is WebP always better than JPEG?

For file size, yes. WebP produces 25-35% smaller files than JPEG at equivalent visual quality, per Google’s WebP comparison study. However, JPEG has universal support including email clients, older CMS platforms, and print workflows. If compatibility is your primary concern, JPEG remains the safe choice. For modern web delivery, WebP is strictly better.

Does re-compressing a JPEG reduce quality?

Yes. Each time you open a JPEG, edit it, and save it as JPEG again, another round of lossy compression runs. The artefacts compound. After 5-10 re-compressions, degradation becomes obvious, especially around sharp edges and text. Edit in lossless formats (PSD, TIFF, PNG) and export to JPEG only as the final step.

try the image compressor

Conclusion

Image compression isn’t complicated once you understand the two approaches. Lossy compression, used by JPEG, WebP, and AVIF, discards imperceptible detail for dramatic file size savings. Quality 80 is the sweet spot for web photographs, delivering 75% reduction with no visible artefacts. Lossless compression, used by PNG and WebP lossless, preserves every pixel for text, graphics, and archival use.

For most web projects in 2026, WebP should be your default. It handles both lossy and lossless in one format, with 97% browser support and 25-35% smaller files than JPEG. Add AVIF via <picture> elements if you want maximum savings on high-traffic pages.

The best starting point? Resize your images to their display dimensions, compress at quality 80, and check the results. You’ll cut page weight by 50-80% in minutes.

compress your images now