

An issue with JPEG is that depending on the image content, artifacts may appear at different quality factor values. It’s worth noting that JPEG codifies images in blocks of 8x8 pixels.Īs we reduce the quality factor and/or apply more aggressive chroma subsampling, we start to get increasing artifacts of ringing, halos, blocking, or blur. This allows us to use chroma subsampling to discard more detail only in the chroma channels. So, JPEG internally recodifies RGB (Red, Green, and Blue) images in one luminance and two chroma channels. Besides, we are much more sensitive to details with high luminance contrast than details with only chromatic contrast. Less quality means less detail is preserved. Consequently, JPEG allows us to discard fine details (high spatial frequencies), by an amount controlled by a quality factor. Our eyes are more sensitive to medium scales than to fine details. It supports lossy compression by exploiting known mechanisms of human vision. With a usual 24 bit depth, it provides far more color resolution (not to be confused with range or gamut) than the human eye can discern. The king of the image formats for web was developed to support digital photography workflows. This feature has kept the format alive until today in use cases not sensitive to quality issues, the most typical being small animated images with few or no colors. However, GIF allows lightweight animation with universal support. We can easily spot the color banding that it produces. However, with the improvement of display technology it became apparent that it was not suitable to reproduce any smooth color gradients, like those found in photographic images. This was reasonable back when it was created in the late 80’s, since the same limitation applied to existing displays. The major limitation of this format is that it is constrained to 256 colours. GIF supports LZW lossless compression and multiple frames that allow us to produce simple animations. Let’s remind ourselves, in chronological order, of the three most important classic formats for web images.

Classic image formats for the web with universal support

We’ll then move on to to explore AVIF, and end with a summary putting all the main points together.Ĭomments on advantages and drawbacks build both on the review of available authoritative reports and first-hand observations during the development and deployment of tools for image optimization pipelines in ecommerce workflows. In this article, we’ll start with a short revision of the classic formats, followed by a description of WebP and HEIC/HEIF. Another new image format - AVIF - is expected to enter the scene in 2019 with promise of sweeping through the whole web. They have only partial, but significant, support by major players among web browsers and mobile operating systems.
JPEG, WEBP, HEIC, AVIF? This guide will help you choose.Īfter decades of the unrivaled dominance of JPEG, recent years have witnessed the appearance of new formats - WebP and HEIC - that challenge this position.
