Best image formats for web
We revise here the image formats that can be used in the web. We discuss about the advantages and drawbacks, beginning with the established formats like JPEG or PNG and following with major emerging contenders, like WEBP, HEIC, or AVIF. For each format we revise the main aspects to consider when making the choice, like the compression efficiency, the features supported -transparency, animations-, and the browser and system support as of 2020. At the end of the article, we draw a proposal of which are the best image formats for the web and we point some guidelines and tools for format conversion and format-specific image optimization.
Its development started before the internet even existed. To address the weight issues of digital photography files -plenty of subtle color gradients-, the commitee in charge adopted novel effective lossy compression mechanisms. For photographic images, JPEG usually delivers a reduction of image weight by a factor of 10 -compared to lossless compression- without noticeable artifacts.
These compression mechanisms are inspired by two known workings of human vision. First, human vision is more sensitive to medium scales than to fine details. By setting the quality factor in JPEG, we control the amount of detail that we preserve. Second, humans are more sentitive to local changes in overall light -that is luminance contrast- compared to changes in color contrast. JPEG codes internally luminance and colors in different channels. By setting the chroma subampling, we can discard more detail only in the color channels.
JPEG images usually feature 24 bits depth, which allows to code an amount of colors higher than the human eye can discern. We should not mistake this by the color gamut, since the gamut constraint isn't related to JPEG.
To ensure fast coding and decoding in the computer hardware of the early nineties, the format adopted 8x8 pixels blocks and very light mechanisms. The price of this computational lightness is the appearance of artifacts -ringing, halos, blocking or blur- as we decrease the quality factor or we increase the subsampling factor. Although the quality factor intends to provide a consistent visual quality, it's far from perfect. Depending on the image content, we may start to notice artifacts for very different quality factor values. For instance, artifacts appear soon around sharp edges even with a high quality factor. Regarding the chroma subsampling, it may be very annoying in images with saturated and colorful details.
These issues are specially problematic with graphic designs, since shapes and fonts usually feature sharp edges. For this kind of images we start to notice blur and dirt due to artifacts even for high quality factor values.
The PNG format was developed to avoid the large artifacts of JPEG in artwork images. GIF didn't provide an acceptable alternative due to the color banding issues, its low compression efficiency, as well as licensing issues at the time. PNG enjoys universal support.
Unlike JPEG and GIF, PNG supports transparency with an alpha channel. It's a lossless format, which means it doesn't produce artifacts. As resolution increases, the compression is much more effient compared to GIF images. Compared to JPEG, it results in a higher weight in photographies, with many color gradients.
However, the PNG lossless compression exploits succesfully the characteristics of graphic designs. It indexes the color palette and maps the pixels, enabling strong compression savings as a result. Artwork images are plenty of text, line art, or graphic objects with solid colors. That is, they usually have few color gradients and prominent sharp edges. In artwork images with many pixels of the same color, the PNG format yields higher savings than JPEG, without any quality loss.
GIF allows multiframe animations and enjoys universal support -every browser or system is able to open and render a GIF file-. These two facts explain the long lasting success of the format -from the eighties-, inspite its clear limitations in terms of quality and compression efficiency.
The limitation of the color palette of GIFs to 256 fixed tones, raises important quality issues. In current displays, GIF images are prone to color banding, eye-catching in photographic images with smooth color gradients.
On top of this, the LZW lossless compression used by GIFs is highly inefficient.
By using GIFs, we may easily end with a heavy file with horrible visual quality. The only case in which it may make sense is a tiny -low resolution- image with animation and few colors.
WEBP supports both lossy and lossless compression and allows transparency and animations. Google developed WEBP as a royalty-free format to deal with all the use cases relevant in the web, and replace both JPEG and PNG.
For lossy compression it uses block prediction and other intra-frame mechanisms, derivated from the VP8 video specification. Google claims a higher compression efficiency compared to JPEG, bringing lighter images without further loss of visual quality. A limitation of WEBP images is that they have a fixed chroma subsampling setting, which limits the quality of images with vivid colors. This may be an issue in some businesses with visual quality requirements, like photography or fashion.
The main weakness of WEBP since its release has been support among browsers and systems. Initially supported only by Google technology -Android and Chrome- it has won momentum during the last year with Edge and Firefox getting on the train.
However, the lack of support in Safari and iOS prevents WEBP to claim the position of JPEG and PNG, both enjoying universal support.
SVG provides an XML specification for vector graphics -or vector images- with almost universal support among browsers and systems. Instead of coding pixels, vector graphics code shapes using a markup language, with the advantage that they can be scaled up without suffering from pixelation artifacts. This is a common problem of raster image formats like JPEG, PNG or GIF.
The SVG format can be used -and is very efficient- for graphic designs consisting of shapes, text, paths, gradients, or patterns that can be expressed as vectors. SVG is compatible with CSS for styling purposes.
SVG images can also contain raster graphics, such as PNG or JPEG images, and further SVG images. That is, they can be combined with photographic images coded in a raster format.
Recent progress in video compression specifications has made an impact in the image format scene. Intra-frame mechanisms used by video codecs exploit the redundancy in a frame -without any dependency on the rest- to save bytes. This kind of compression mechanisms can be used to compress still images. The last image formats have emerged as derivatives of new video coding standards.
These new image formats offer larger feature sets than JPEG and PNG and promise relevant savings in file weight with improved visual quality.
This file format has been adopted by Apple to reduce the impact of higher camera resolutions on the storage requirements of iPhones. HEIC images bring significant advances both regarding the container and the compression.
It uses a HEIF container. This is file format developed by Nokia that brings the most complete feature set among all the image formats available. It supports, for instance, multi-frame images with multi-frame compression — essential for efficient HDR, multi-focus, or multi-view images. It also supports different non-image data with remarkable flexibility.
Regarding compression, HEIC defines the means of storing intra images and image sequences encoded with the HEVC video specification. This video specification was developed with high resolution -4k and 8k- displays in mind. It supports a contrained inter prediction that may be applied to multi-frame images. It eases the restrictions of JPEG by implementing more complex operations -like variable block size- within reach of today's processors.
Compared to JPEG, HEIC images yield weight savings without extra loss of visual quality. While savings are specially high for high resolution images, they're not that big for usual web image sizes.
The main issue with HEIC images is a very limited adoption. It has native support in iOS and macOS, but it isn't supported by Safari. The expensive royalties required to deploy HEVC have prevented from further adoption, which means Android or Windows, as well as Chrome, Firefox, or Edge don't support HEIC. So, inspite of the great perfomance promised, HEIC images aren't supported by any browser and cannot be used in the web except with iOS apps.
In the trail of WEBP and HEIC, AVIF is a new format based on the intra-frame coding mechanisms of AV1, the latest video specification. Initial AVIF vs JPEG comparisons by Netflix show impressive gains in compression efficiency and visual quality.
AVIF also uses a HEIF container, which supports an amazing feature set as we've seen. So it can replace JPEG, PNG or GIF, covering any relevant use case in a web context.
If we look at the founding members of the Alliance for Open Media behind the AV1 video and image specification, AVIF has a good chance to gain universal support in the medium term.
The open source nature of this specification, free of any royalties, makes it very compelling for broad adoption. We should keep this format under our radar.
Which image format should we use
JPEG remains the safe format for general web images in 2020, while PNG remains a sensible option for images with significant artwork or transparencies.
WEBP is the main viable alternative, reinforced with extended support during the last year. For Chrome, Edge, Firefox, and Android users it can replace both JPEG and PNG. However, we should still provide JPEG and PNG as fallbacks to get iOS and Safari users covered. This limits the advantages of WEBP since it increases the complexity of our image processing and delivery pipeline.
AVIF is poised to sweep the scene in the medium term. The strong gains in performance and capabilities, the strong partnership behind the specification and the royalty-free approach promises a swift spread of the format. However, it's still too early to use it in the web and we should wait for at least some support among the main browsers.