
Compared to GIF, it delivers much higher quality with usually far fewer bytes. So, PNG compresses images by mapping large amounts of pixels to a simple discrete palette and saving a lot of bits as a result. It succeeds in exploiting a frequent characteristic of artwork: Unlike photography - that features a continuum of colours with subtle variations - artwork pictures usually feature few well-defined colours. Of course, this is at the expense of heavier image weight in the presence of many different color gradients, compared to lossy compression. Since it does not discard information, PNG does not produce artifacts.

It supports transparency and an improved compression compared to GIF. It was needed for images with a considerable amount of artwork, for which JPEG produced large artifacts even with minimal compression rates. This lossless graphics format was developed to replace GIF, addressing its color banding (and licensing) issues. Since artwork (shapes, fonts) usually rely on sharp edges, they start to produce artifacts even for small amounts of detail discarded.įor photos, JPEG easily delivers a reduction of file weight by a factor of 10 with barely noticeable artifacts, compared to lossless compression. The wildest difference appears when comparing the effects on natural photography with the effects on artwork. 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.
