JPEG

In short: A widely used, lossy image format, named after the “Joint Photographic Experts Group”.

In more detail: Particularly suited for photos with soft colour gradients, since compression optimises away details the human eye barely perceives — with sharp edges or text (e.g. screenshots), by contrast, visible artefacts appear. WebP is a more modern format that often produces smaller files at similar quality.

In Depth

JPEG compression exploits the fact that the human eye perceives brightness differences far more finely than colour differences — the image is first split into brightness and colour information, the colour information is then reduced more strongly (chroma subsampling), before a mathematical transform (discrete cosine transform) is used to discard high-frequency details barely perceptible to the eye. The compression level is usually adjustable (“JPEG quality 1-100”) — a direct trade-off between file size and visible compression artefacts (typically square “blocky” patterns at strong compression).

Because JPEG is lossy, every re-save/edit leads to further quality loss (“generation loss”) — for images edited several times, a lossless intermediate format (e.g. PNG) therefore makes more sense; JPEG is mainly suited for the final publication of finished photos. On the web, WebP has increasingly established itself as a successor, producing smaller files at comparable perceived quality and additionally supporting transparency, which JPEG can’t do.

History and standardisation

JPEG was published as an ISO/IEC standard in 1992, developed by the eponymous Joint Photographic Experts Group as a joint committee of ISO and ITU-T. At the time, hard disk storage and network bandwidth were extremely scarce — an uncompressed photo at today’s resolution would have overwhelmed storage media of the era. JPEG was therefore a crucial enabler for digital photography and later for the image-heavy web of the 2000s. Strictly speaking, the name JPEG only refers to the compression algorithm; the actual file format that packages this algorithm into a storable file is officially called JFIF (JPEG File Interchange Format) — in practice, however, both terms are used synonymously.

Progressive vs. baseline JPEG

There are two basic encoding types: baseline JPEG loads the image from top to bottom at full quality, row by row. Progressive JPEG, by contrast, stores the image in several resolution stages — when loading, a coarse, blurry version of the entire image first appears, which becomes increasingly refined as more data arrives. For websites with a slow connection, this feels more responsive to users, since an impression of the image appears immediately, even while full resolution is still loading. Most modern image optimisation tools (e.g. in the Next.js Image component pipeline) generate progressive JPEGs by default.

Practical use

For image compression in web projects, the quality level is usually the most important lever: values around 80-85 produce barely visible artefacts for photos, at a considerably smaller file size than quality 100, while values below 60 show increasingly visible compression blocks, especially in areas with fine colour gradients like sky or skin. Tools like imagemagick or sharp (in Node.js build pipelines) automate this compression at deployment, so original images can be kept in high quality while users only download the compressed delivery version.

See also: WebP, Compressing, Decompressing