Lossy or lossless: which compression should I use for web images?

Use lossy (JPG, WebP, AVIF) for photographs — the human eye barely notices the difference at quality 80–85, and file sizes are 5–20× smaller. Use lossless (PNG, WebP-lossless) for screenshots, UI mockups, logos and anything with sharp edges or text — lossy creates ugly artifacts around boundaries.

Does conversion preserve EXIF metadata (camera, GPS, date)?

It depends on the tool: ImageMagick and FFmpeg copy EXIF by default, while cwebp drops it unless you pass -metadata all . KaijuConverter strips metadata server-side after conversion to protect your privacy — if you need to keep camera or GPS data, use a desktop tool you control.

Lossy or lossless: which compression should I use for web images?

Use lossy (JPG, WebP, AVIF) for photographs — the human eye barely notices the difference at quality 80–85, and file sizes are 5–20× smaller. Use lossless (PNG, WebP-lossless) for screenshots, UI mockups, logos and anything with sharp edges or text — lossy creates ugly artifacts around boundaries.

Does conversion preserve EXIF metadata (camera, GPS, date)?

It depends on the tool: ImageMagick and FFmpeg copy EXIF by default, while cwebp drops it unless you pass -metadata all . KaijuConverter strips metadata server-side after conversion to protect your privacy — if you need to keep camera or GPS data, use a desktop tool you control.

Guide

JPEG: Advanced Compression Techniques & Quality Control

Q: What is the difference between baseline and progressive JPEG encoding?

Baseline JPEG encodes the image sequentially from top to bottom in a single pass; the complete file must be downloaded before any part of the image is visible. Progressive JPEG encodes data in multiple passes from low-frequency (rough preview) to high-frequency (fine detail), allowing browsers to display increasing refinement as download progresses. Progressive files are 2–5% larger but provide superior perceived performance on slow connections.

Q: Qual é a diferença entre baseline e progressive JPEG codificação?

Baseline JPEG encodes the image sequentially de top to bottom em um single pass; the complete arquivo must be baixado antes any part of the image is visible. Progressive JPEG encodes data in multiple passes de baixa-frequency (rough preview) to alta-frequency (fine detail), allowing browsers to display increasing refinement as baixar progresses. Progressive arquivos são 2–5% larger mas provide superior perceived performance on slow connections.

Q: Was ist der Unterschied zwischen baseline und progressive JPEG Codierung?

Baseline JPEG encodes the image sequentially von top to bottom in einem single pass; the complete Datei must be heruntergeladen vor any part des image is visible. Progressive JPEG encodes data in multiple passes von niedrig-frequency (rough preview) to hoch-frequency (fine detail), allowing browsers to display increasing refinement as herunterladen progresses. Progressive Dateien are 2–5% larger aber provide superior perceived performance on slow connections.

PC By Pablo Cirre • Updated May 7, 2026

JPEG: Advanced Compression Techniques & Quality Control

JPEG (Joint Photographic Experts Group) is the world's most widely adopted lossy image format, but its sophistication lies in how it compresses visual data while maintaining perceived quality. Understanding JPEG's internal mechanics—from DCT (Discrete Cosine Transform) to quantization tables and progressive encoding—is essential for photographers, web developers, and anyone optimizing images for quality and file size.

The DCT Foundation: Breaking Images Into Frequency Components

At JPEG's core lies the Discrete Cosine Transform (DCT), a mathematical operation that decomposes an image into frequency components. The encoder divides the image into 8×8 pixel blocks, applies DCT to each block, and transforms spatial pixel values into frequency coefficients.

The DCT separates low-frequency components (overall brightness and color) from high-frequency components (fine details and edges). This separation is crucial because human vision is far more sensitive to variations in brightness than to fine detail variation—a property JPEG exploits aggressively.

The DCT matrix for a single 8×8 block contains 64 coefficients. The top-left coefficient (DC component) represents the average brightness of the block, while surrounding coefficients represent increasingly fine details. This hierarchical structure is why progressive JPEG encoding works so well—it can transmit low-frequency data first (rough image preview) and refine with high-frequency details later.

Quantization: The Heart of Lossy Compression

After DCT transformation, JPEG applies quantization—the step that actually discards information to achieve compression. The encoder divides each DCT coefficient by a quantization value, then rounds to the nearest integer. The quantization matrix itself is typically a predefined table that applies stronger quantization to high-frequency components than low-frequency ones.

A JPEG quality setting (1–100) controls the quantization matrix aggressiveness:

Quality 90–100: Minimal quantization, larger file sizes (800+ KB for typical photos), imperceptible quality loss
Quality 75–85: Moderate quantization (typical web standard), ~150–250 KB, visually lossless
Quality 50–70: Aggressive quantization, ~50–100 KB, some visible artifacts
Quality 1–30: Maximum quantization, <50 KB, heavy "blockiness" and color banding visible

The relationship between quality and file size is non-linear. Moving from quality 95 to 90 might reduce size 20%, but moving from 50 to 40 might reduce it only 10%, because low-frequency components (preserved at all quality levels) dominate file size.

Modern image optimization tools calculate optimal quality by analyzing pixel complexity—regions with fine detail retain higher quality, while smooth areas accept more aggressive quantization. This adaptive approach maintains visual quality while reducing file sizes by 10–20% compared to uniform quantization.

Baseline vs. Progressive JPEG Encoding

Baseline JPEG (also called sequential JPEG) encodes the image in a single top-to-bottom pass. The complete file is necessary to display any part of the image; partial downloads show nothing until sufficient data arrives.

Progressive JPEG encodes data in multiple passes, from low-frequency (rough preview) to high-frequency (fine detail). Web browsers can display the image at each pass, showing increasing refinement as download progresses:

Pass 1 (~10% of file): DC component + very low frequencies → visible but pixelated preview
Pass 2 (~30% of file): Medium frequencies → recognizable image with blocky details
Pass 3 (~60% of file): Higher frequencies → mostly refined
Pass 4 (~100% of file): Complete data → full quality

Progressive JPEG file sizes are typically 2–5% larger than equivalent baseline files, but they provide superior perceived performance on slow connections (users see something immediately) and enable modern lazy-loading strategies (display rough preview while fetching complete data).

Chroma Subsampling: YCbCr Color Space Exploitation

JPEG converts RGB color space to YCbCr—separating luminance (Y, brightness) from chrominance (Cb and Cr, color information). Crucially, human vision is far more sensitive to luminance changes than color changes, enabling aggressive color subsampling.

Common subsampling schemes (notated as J:a:b) include:

4:4:4 (no subsampling): Each 8×8 luminance block is accompanied by full 8×8 blocks for both color channels. Preserves maximum color detail; file sizes ~15% larger than 4:2:0. Used in professional/medical imaging.

4:2:2 (horizontal subsampling): Color information is halved horizontally but preserved vertically. Reduces color data 50% without visible quality loss in most photographs. Common in video production.

4:2:0 (2×2 subsampling, the web standard): Color information is halved both horizontally and vertically. Each 2×2 block of luminance pixels shares a single set of color values. Reduces color data to 25% of original; file sizes 20–25% smaller than 4:4:4. Imperceptible to human vision in typical photographs but can cause visible color fringing in images with sharp color boundaries (text over colored backgrounds, detailed graphics).

Choosing subsampling requires understanding the image content: photographs benefit from aggressive 4:2:0 subsampling, but images with sharp color transitions (UI elements, charts, text) may require 4:4:4 or 4:2:2 to avoid artifacts.

Huffman Coding: The Final Compression Layer

After quantization, JPEG applies Huffman entropy coding—a variable-length compression technique that assigns shorter bit sequences to frequently occurring patterns and longer sequences to rare patterns. Huffman coding reduces data by 20–30% on average, with greater reduction for images with smooth regions (fewer unique quantized patterns).

Adaptive Huffman tables can further optimize by analyzing the specific statistical distribution of quantized coefficients in each image. Some encoders generate custom Huffman tables per image; others use standard tables. Custom tables add ~100–200 bytes overhead but often justify the cost through 2–5% additional compression.

EXIF Metadata and Color Profiles

JPEG files embed optional EXIF markers (camera settings, GPS coordinates, timestamps, thumbnail) and ICC color profiles (device-specific color calibration). These metadata fields can add 5–50 KB to a file without affecting the image itself.

Web optimization often strips unnecessary metadata (thumbnails, GPS), retaining only camera model and exposure data for SEO or archival purposes. ICC profiles are essential for print workflows but can be removed for web delivery if color accuracy isn't critical.

Optimization Techniques for Production

Baseline vs. Progressive choice depends on use case:

Baseline: Faster first-meaningful-paint on fast connections (complete or nothing strategy)
Progressive: Superior perceived performance on slow connections and critical for lazy-loaded galleries

Quality selection should follow data analysis:

Photographs: quality 75–80 (imperceptible loss, 60–70% size reduction vs. baseline)
Graphics with color gradients: quality 85–90 (subtle artifacts become visible below 85)
Thumbnails: quality 60–70 (extreme compression acceptable at small display sizes)

Subsampling strategy:

Default to 4:2:0 for photographs
Use 4:4:4 only for text, logos, or graphics with sharp color boundaries
Test against actual viewing conditions before committing to specific settings

Adaptive encoding (modern tools like mozjpeg, libjpeg-turbo): Analyzes local image complexity and applies quality adjustments per region, typically saving 5–20% file size versus uniform quality at equivalent visual quality.

File size benchmarks for a typical 3000×2000 px landscape photograph:

Quality 100: ~1.8 MB (baseline), ~1.9 MB (progressive)
Quality 85: ~280 KB (baseline), ~290 KB (progressive)
Quality 75: ~150 KB (baseline), ~155 KB (progressive)
Quality 65: ~95 KB (baseline), ~98 KB (progressive)

Conclusion

JPEG's sophistication—DCT transformation, adaptive quantization, chroma subsampling, and Huffman coding—makes it the practical choice for photographic content. Modern workflow should leverage progressive encoding for web delivery, select quality/subsampling based on content analysis, and strip unnecessary metadata. Understanding these mechanics allows informed decisions about quality/performance tradeoffs and professional-grade image optimization.

Related conversions

Most teams that read this guide convert images in one of these directions:

Related conversions

Put what you just learned into practice — convert your files now in seconds, free and without registration.

Convert →

Convert →

Convert →

Convert →

Convert →

Convert →

Frequently Asked Questions

Baseline JPEG encodes the image sequentially from top to bottom in a single pass; the complete file must be downloaded before any part of the image is visible. Progressive JPEG encodes data in multiple passes from low-frequency (rough preview) to high-frequency (fine detail), allowing browsers to display increasing refinement as download progresses. Progressive files are 2–5% larger but provide superior perceived performance on slow connections.

Baseline JPEG encodes the image sequentially de top to bottom em um single pass; the complete arquivo must be baixado antes any part of the image is visible. Progressive JPEG encodes data in multiple passes de baixa-frequency (rough preview) to alta-frequency (fine detail), allowing browsers to display increasing refinement as baixar progresses. Progressive arquivos são 2–5% larger mas provide superior perceived performance on slow connections.

Baseline JPEG encodes the image sequentially von top to bottom in einem single pass; the complete Datei must be heruntergeladen vor any part des image is visible. Progressive JPEG encodes data in multiple passes von niedrig-frequency (rough preview) to hoch-frequency (fine detail), allowing browsers to display increasing refinement as herunterladen progresses. Progressive Dateien are 2–5% larger aber provide superior perceived performance on slow connections.

Baseline JPEG encodes the image sequentially de top to bottom en un single pass; the complete archivo must be descargado antes any part del image is visible. Progressive JPEG encodes data in multiple passes de baja-frequency (rough preview) to alta-frequency (fine detail), allowing browsers to display increasing refinement as descargar progresses. Progressive archivos are 2–5% larger pero provide superior perceived performance on slow connections.

Use <strong>lossy</strong> (JPG, WebP, AVIF) for photographs — the human eye barely notices the difference at quality 80–85, and file sizes are 5–20× smaller. Use <strong>lossless</strong> (PNG, WebP-lossless) for screenshots, UI mockups, logos and anything with sharp edges or text — lossy creates ugly artifacts around boundaries.

Chroma subsampling reduces color information while preserving brightness (luminance). The notation 4:2:0 means color information is halved both horizontally and vertically. Humans are far more sensitive to brightness variation than color variation, so 4:2:0 subsampling reduces file size 20–25% with imperceptible quality loss in most photographs. Images with sharp color boundaries (text, graphics) may show color fringing and benefit from 4:4:4 (no subsampling).

Chroma subsampling reduces color information while preserving brightness (luminance). The notation 4:2:0 means color information is halved both horizontally e vertically. Humans are far more sensitive to brightness variation than color variation, so 4:2:0 subsampling reduces tamanho do arquivo 20–25% com imperceptible quality loss in most photographs. Images com sharp color boundaries (text, graphics) may show color fringing e benefit de 4:4:4 (no subsampling).

Chroma subsampling reduces color information while preserving brightness (luminance). The notation 4:2:0 means color information is halved both horizontally und vertically. Humans are far more sensitive to brightness variation than color variation, so 4:2:0 subsampling reduces Dateigröße 20–25% mit imperceptible quality loss in most photographs. Images mit sharp color boundaries (text, graphics) may show color fringing und benefit von 4:4:4 (no subsampling).

Chroma subsampling reduces color information while preserving brightness (luminance). The notation 4:2:0 means color information is halved both horizontally y vertically. Humans are far more sensitive to brightness variation than color variation, so 4:2:0 subsampling reduces tamaño de archivo 20–25% con imperceptible quality loss in most photographs. Images con sharp color boundaries (text, graphics) may show color fringing y benefit de 4:4:4 (no subsampling).

For new projects in 2026, WebP is supported by all modern browsers (95%+ of traffic) and saves 25–35% over JPG at the same visual quality. AVIF is even more efficient (40–50% smaller) but encoding is slower and Safari support is recent. Use WebP as the default and AVIF as the progressive enhancement via <code><picture></code> with JPG fallback.

Quality factor controls the aggressiveness of the quantization matrix, which discards high-frequency information. Quality 90–100 preserves nearly all detail with minimal file size reduction; quality 75–85 offers ~70% file size reduction with imperceptible loss (web standard); quality 50–70 shows visible artifacts; quality 1–30 produces severe blockiness. The relationship is non-linear: moving from 95 to 90 reduces size more than moving from 50 to 40.

Quality factor controls the aggressiveness of the quantization matrix, which discards alta-frequency information. Quality 90–100 preserves nearly all detail com minimal tamanho do arquivo reduction; quality 75–85 oferece ~70% tamanho do arquivo reduction com imperceptible loss (web padrão); quality 50–70 shows visible artifacts; quality 1–30 produces severe blockiness. The relationship is non-linear: moving de 95 to 90 reduces size more than moving de 50 to 40.

Quality factor controls the aggressiveness des quantization matrix, which discards hoch-frequency information. Quality 90–100 preserves nearly all detail mit minimal Dateigröße reduction; quality 75–85 bietet ~70% Dateigröße reduction mit imperceptible loss (web Standard); quality 50–70 shows visible artifacts; quality 1–30 produces severe blockiness. The relationship is non-linear: moving von 95 to 90 reduces size more than moving von 50 to 40.

Quality factor controls the aggressiveness del quantization matrix, which discards alta-frequency information. Quality 90–100 preserves nearly all detail con minimal tamaño de archivo reduction; quality 75–85 ofrece ~70% tamaño de archivo reduction con imperceptible loss (web estándar); quality 50–70 shows visible artifacts; quality 1–30 produces severe blockiness. The relationship is non-linear: moving de 95 to 90 reduces size more than moving de 50 to 40.

It depends on the tool: ImageMagick and FFmpeg copy EXIF by default, while cwebp drops it unless you pass <code>-metadata all</code>. KaijuConverter strips metadata server-side after conversion to protect your privacy — if you need to keep camera or GPS data, use a desktop tool you control.

DCT (Discrete Cosine Transform) mathematically decomposes an 8×8 pixel block into frequency components, separating low-frequency information (overall structure) from high-frequency information (fine detail). JPEG uses DCT because it exploits human vision's reduced sensitivity to fine detail; low-frequency components can be preserved while high-frequency components are aggressively compressed. This allows file size reduction while maintaining perceived image quality.

DCT (Discrete Cosine Transform) mathematically decomposes an 8×8 pixel block em frequency components, separating baixa-frequency information (overall structure) de alta-frequency information (fine detail). JPEG uses DCT because it exploits human vision's reduced sensitivity to fine detail; baixa-frequency components can be preserved while alta-frequency components are aggressively comprimido. This permite tamanho do arquivo reduction while maintaining perceived qualidade da imagem.

DCT (Discrete Cosine Transform) mathematically decomposes an 8×8 pixel block in frequency components, separating niedrig-frequency information (overall structure) von hoch-frequency information (fine detail). JPEG uses DCT because it exploits human vision's reduced sensitivity to fine detail; niedrig-frequency components can be preserved while hoch-frequency components are aggressively komprimiert. This erlaubt Dateigröße reduction while maintaining perceived Bildqualität.

DCT (Discrete Cosine Transform) mathematically decomposes an 8×8 pixel block en frequency components, separating baja-frequency information (overall structure) de alta-frequency information (fine detail). JPEG uses DCT because it exploits human vision's reduced sensitivity to fine detail; baja-frequency components can be preserved while alta-frequency components are aggressively comprimido. This permite tamaño de archivo reduction while maintaining perceived calidad de imagen.

Three common causes: (1) ICC color profiles dropped during conversion shift colors slightly; (2) chroma subsampling (4:2:0) reduces color accuracy in lossy JPG/WebP; (3) the new format may not support all features of the original (e.g. PNG → JPG drops transparency to white). For pixel-perfect results stick to lossless formats and preserve color profiles explicitly.