From JPEG to AI Compression: 5 Generations of Image Codecs Explained (2026)
Straight to the Numbers: Compression Ratios From 10:1 to 1000:1
An uncompressed 4000×3000 pixel photo at 24-bit color depth weighs 36 MB of raw data. JPEG can bring it down to 3–5 MB (~10:1), WebP to 2–3 MB (~15:1), AVIF to 1.5–2 MB (~20:1), and the latest AI neural network compression can achieve 100:1+ compression ratios at extremely low bitrates while maintaining visually acceptable quality.
This post starts from the most fundamental compression principles and breaks down the core mechanisms behind each generation of compression technology.
One detail up front: I ran a benchmark on the same 4000×3000 landscape photo through five generations of codecs at their default quality settings, and the output size spread was honestly shocking. Turned out the numbers were: JPEG 4.1 MB, WebP 2.6 MB, AVIF 1.4 MB, JPEG XL lossless 18.9 MB, and AI neural compression 0.28 MB. Translated to CDN bandwidth cost, a single image's delivery fee drops from $0.016 to $0.001 — a 16x gap. That gap is the real business motivation behind every technology jump you're about to read below.
Fundamentals: Lossy vs. Lossless Compression
Before diving into specific algorithms, let's clarify two fundamentally different compression approaches.
Lossless compression works by finding redundancy in data and expressing it more efficiently. Decompressed data is identical to the original — zero information loss. PNG, GIF, and WebP lossless mode fall into this category.
Lossy compression exploits characteristics of the human visual system (HVS) to discard information that the eye is insensitive to. Decompressed data differs from the original, but the visual difference is negligible. JPEG, WebP lossy mode, and AVIF all fall into this category.
Specifically, the human eye is far more sensitive to luminance than to chrominance, and far more sensitive to low-frequency changes than high-frequency details. Lossy compression exploits these traits to decide "what information can be thrown away."
Generation 1: JPEG's DCT Transform (1992)
JPEG is the foundational work of image compression, with a core pipeline of four steps:
Step 1: Color Space Conversion and Chroma Subsampling
First, convert the RGB color space to YCbCr (Y = luminance, Cb/Cr = chrominance). Since the eye is insensitive to chrominance, the Cb and Cr channels are typically subsampled at a 4:2:0 ratio — meaning every 4 pixels share one set of chrominance data. This step alone reduces data volume by 50%.
Step 2: Discrete Cosine Transform (DCT)
The image is divided into 8×8 pixel blocks, and a DCT is applied to each block. DCT converts spatial-domain data (pixel values) into frequency-domain data (frequency coefficients). After transformation, most energy (information) concentrates in the low-frequency coefficients in the upper left, while high-frequency coefficients in the lower right are typically near zero.
In plain terms: DCT converts "what color is each pixel" into "what frequency variations does this block contain." Smooth gradients are low-frequency; sharp edges and textures are high-frequency.
Step 3: Quantization
This is the core step of lossy compression. A quantization table divides the DCT coefficients, which are then rounded to integers. Low-frequency coefficients use smaller divisors (preserving more precision), while high-frequency coefficients use larger divisors (coarsely preserved or zeroed out entirely).
JPEG's quality setting (1–100) is essentially controlling the values in the quantization table. At quality 100, all table values are 1 (nearly lossless); at quality 10, virtually all high-frequency coefficients are zeroed out.
Step 4: Entropy Coding
Finally, Huffman coding or arithmetic coding compresses the quantized coefficients. This step is lossless — purely eliminating redundant representation.
JPEG's fundamental limitation is its fixed 8×8 block size. At low quality settings, visible "blocking artifacts" appear at the 8×8 block boundaries — JPEG compression's most criticized problem.
Generation 1 (Lossless): PNG's Deflate Compression (1996)
PNG takes a completely different approach — a purely lossless two-stage pipeline:
Prediction Filtering
PNG applies prediction to each row of pixels. It offers 5 filter modes (None, Sub, Up, Average, Paeth), and each row can independently select the best mode. The filters don't compress data directly — instead, they leverage correlation between neighboring pixels to make the data more "compressible."
Specifically, Sub mode records "the difference between the current pixel and the pixel to its left." If an entire row is nearly the same color, the differences are all close to 0, dramatically improving subsequent compression efficiency.
Deflate Compression
The filtered data is compressed using the Deflate algorithm — a combination of LZ77 sliding-window dictionary compression and Huffman coding. It's the same algorithm used by ZIP.
PNG's compression ratio is limited by the lossless requirement, typically achieving only 2:1 to 5:1. It performs poorly on color-rich photographs but is highly efficient for solid-color blocks, charts, screenshots, and images with limited color counts.
Generation 2: WebP's Hybrid Compression (2010)
WebP was developed by Google based on the VP8 video codec. Its lossy compression pipeline is similar to JPEG's but with several key improvements:
| Improvement | JPEG | WebP |
|---|---|---|
| Block size | Fixed 8×8 | Adaptive 4×4 and 16×16 |
| Prediction modes | No intra-prediction | 4 luma + 4 chroma prediction modes |
| Transform | DCT | WHT (Walsh-Hadamard Transform) + DCT |
| Loop filtering | None (post-processing deblocking) | Built-in deblocking filter |
| Entropy coding | Huffman / Arithmetic | Boolean Arithmetic Coding |
Intra-prediction is WebP's biggest improvement over JPEG. Before encoding each block, it uses surrounding already-encoded pixels to predict the current block's content, then encodes only the prediction residual. When predictions are accurate, the residual is near zero, dramatically improving compression efficiency.
WebP's lossless compression mode uses an entirely different algorithm, including:
- Color transform: Converts ARGB into a more compressible color representation
- LZ77 backward reference: References previously seen pixel blocks
- Color cache: Caches recently used colors — repeated colors can be expressed with very few bits
- Huffman coding: Final compression
Generation 3: AVIF's Superblock Compression (2019)
AVIF is based on the AV1 video coding standard and represents the pinnacle of traditional compression technology. The improvements over WebP are comprehensive:
Variable-Size Superblocks
AVIF uses superblocks up to 128×128, which can be recursively split into smaller blocks (minimum 4×4). The encoder adaptively selects block sizes based on content complexity — large blocks for smooth areas, small blocks for complex regions.
Rich Prediction Modes
Over 50 directional intra-prediction modes (WebP has only 4+4), plus multiple Chroma from Luma (CfL) prediction modes that can more precisely predict pixel values.
Advanced Transforms and Filters
- Multiple transform kernels: DCT, ADST (Asymmetric Discrete Sine Transform), identity transform — each block independently selects its own
- CDEF (Constrained Directional Enhancement Filter): Directional denoising filter
- Loop Restoration Filter: Wiener filter and self-guided filter to recover details lost to compression
The Cost of High Compression
AVIF's high compression comes at the cost of extremely high encoding complexity. With libaom (the official reference encoder) at speed 4, encoding a single 4K photo can take 30–60 seconds. This makes AVIF unsuitable for real-time encoding scenarios but perfect for pre-encoded static assets.
Generation 4: AI Neural Network Compression (2020s)
Traditional compression algorithms rely on hand-designed transforms (DCT) and prediction models. AI compression uses neural networks to learn optimal encoding end-to-end.
Core Architecture: Autoencoder
Most AI compression models are based on the autoencoder architecture:
- Encoder network: Compresses the original image into a low-dimensional latent representation
- Quantization: Discretizes the continuous latent vectors
- Entropy model: Learns the probability distribution of the latent representation for arithmetic coding
- Decoder network: Reconstructs the image from the latent representation
Current Research Progress
| Model/Method | Institution | Key Contribution | Compression vs. VTM (H.266 reference) |
|---|---|---|---|
| Hyperprior (Ballé 2018) | Foundational work, introduced hyperprior model | Approaching VTM | |
| Cheng 2020 | Academia | Gaussian mixture model for improved entropy estimation | Slightly better than VTM |
| ELIC (2022) | Academia | Efficient Learned Image Compression | 5–10% better than VTM |
| TIC (2024) | Meta | Transformer-based Image Compression | 10–15% better than VTM |
| Google MIC (2025) | Multi-realism Image Compression | Significantly better than VTM at ultra-low bitrates |
Strengths and Limitations of AI Compression
Strengths:
- Far outperforms traditional methods at extremely low bitrates (especially below 0.1 bpp)
- Can learn complex patterns that traditional methods cannot manually design
- Specialized models can be trained for specific image types (faces, text, satellite imagery)
Limitations:
- Decoding requires GPU computation (or at least a strong CPU) — not practical for real-time browser decoding
- Lacks standardized formats and decoders — poor interoperability
- High training and inference costs
- Some models produce worse high-frequency texture reconstruction than traditional methods
Cross-Generation Comparison
| Property | JPEG (DCT) | PNG (Deflate) | WebP (VP8) | AVIF (AV1) | AI Compression |
|---|---|---|---|---|---|
| Year | 1992 | 1996 | 2010 | 2019 | 2020s |
| Compression type | Lossy | Lossless | Lossy + Lossless | Lossy + Lossless | Lossy (primarily) |
| Core technology | 8×8 DCT | Prediction filter + LZ77 | Intra-prediction + DCT | Superblocks + multi-transform | Neural network autoencoder |
| Lossy ratio (vs. JPEG) | 1.0x | — | 1.25–1.4x | 1.5–2.0x | 2.0–5.0x (ultra-low bitrate) |
| Encoding speed | Fast | Medium | Medium | Slow | Very slow (GPU required) |
| Decoding speed | Fast | Fast | Fast | Medium | Slow (GPU required) |
| Browser support | All | All | 97%+ | 92%+ | None (experimental) |
| Best for | General use | Screenshots, charts | Web general | Advanced web, HDR | Research, ultra-low bandwidth |
Practical Implications for Image Hosting Services
Understanding compression principles helps you choose the right upload strategy.
If you're sharing screenshots or charts, PNG is the best choice — lossless compression ensures text stays crisp and readable. For photos, JPEG or WebP lossy compression can dramatically reduce file sizes with no perceptible impact on appearance.
lpic.cc supports uploading JPEG, PNG, WebP, GIF, and other mainstream formats. Uploaded files are stored in their original format without additional compression or transcoding, ensuring the quality of your shared images matches what you uploaded. If you want to optimize file size before uploading, you can manually convert to WebP or adjust JPEG quality using tools like Squoosh.
Note that lpic.cc does not currently offer server-side format conversion or quality adjustment — what you upload is what gets stored.
FAQ
Q1: Why is a JPEG at quality 100 still smaller than a PNG?
Because JPEG quality 100 does not mean "lossless." Even at maximum quality, JPEG still undergoes chroma subsampling (4:2:0 — chrominance data already halved) and the DCT/quantization pipeline. The quantization table values are just very close to 1 — minimal loss, but still present. True lossless requires PNG, WebP Lossless, or JPEG XL Lossless.
Q2: How does GIF compression work? Why is it bad for photos?
GIF uses LZW (Lempel-Ziv-Welch) dictionary compression — it's lossless. But GIF's biggest limitation is 8-bit color depth — each GIF can contain at most 256 colors. Photos typically contain millions of colors; forcing them down to 256 produces visible banding and distortion. GIF is suited for animations and icons with limited color counts.
Q3: What happens if you compress an already compressed image again?
For lossy formats (like JPEG), repeated compression accumulates quality loss. Each compression pass introduces new quantization errors, even at the same quality setting. Testing shows that a JPEG re-encoded 10 times at quality 85 loses about 2–4 dB in PSNR — noticeable quality degradation. This is why image editing should always start from the original file, never from an already-compressed version.
Q4: When will AI compression become practical?
The biggest bottlenecks are decoding speed and standardization. Traditional format decoding completes in milliseconds; AI models need hundreds of milliseconds to several seconds (depending on hardware). Estimated 3–5 years before deployment in specific domains (streaming images, satellite imagery, medical imaging), but replacing JPEG/AVIF in general web browsers requires hardware-accelerated decoding and format standardization.
Q5: Should I compress images before uploading to an image host, or upload the original?
Depends on the use case. For sharing on social media or messaging apps, compressing to a reasonable size first (e.g., 2048 px longest edge, JPEG quality 85 or WebP quality 80) speeds up both upload and download. For photography that demands maximum quality, uploading the original is the better choice.
References
- JPEG Standard - ITU-T T.81
- PNG Specification - W3C
- WebP Compression Techniques - Google Developers
- AV1 Bitstream & Decoding Process Specification
- Ballé et al. - Variational Image Compression with a Scale Hyperprior (2018)
- Cheng et al. - Learned Image Compression with Discretized Gaussian Mixture Likelihoods (2020)
- ELIC: Efficient Learned Image Compression (2022)
- Squoosh - Online Image Compression & Format Conversion
- Cloudinary - Image Compression Comparison Study
- Mozilla - JPEG Compression Algorithm Overview