Image format selection is vital in web design. They say that a picture is worth a thousand words. Even though this maxim dates back to the pre-Internet era, the lesson it imparts remains as applicable as ever. As both business and society embrace the digital realm to transact, communicate, and search for solutions, products, and entertainment, images play a vital role in our online experience. However, since the digital revolution ushered in by the launch of the HTTP protocol, online graphics have come a long way. Today, developers can choose from a variety of formats to ensure they deliver the best experience possible to their end-users.
Traditionally, image standards limited website creators to a few universally supported formats. For decades the JPEG dominated as the de-facto image type. GIFs allowed developers to create simple animations, and more recently, PNGs enabled high-resolution graphics. However, in recent years, the creation of new image standards such as WebP and AVIF has extended the realm of web-based images even further. With so many options to choose from, developers need to ensure they utilize the best format possible, ensuring they keep their business case and end-user experience in mind.
The Classic Image Formats
When it comes to selecting an image format for your web-based solution, finding the perfect balance between performance and usability is vital. Even though newer standards such as WebP and AVIF deliver enhanced functionality, you need to consider the platform your end users will leverage to access your site or service. If you decide to render all your images using one of the newer standards, you need to take browser support for these modern formats into consideration.
JPEG
The Joint Photographic Expert Group (JPEG) is the de-facto image type for the web. Originally developed to support digital photography, this image standard allows the developer to adjust the degree of compression. By trading off storage size versus image quality, it provides greater flexibility in achieving the perfect balance between performance and aesthetic appeal. Due to its versatility and technical maturity, all modern browsers support this image format.
Even though the JPEG’s versatility makes it the go-to standard for web-based image formats, it does have its disadvantages. The JPEG does not work well with text or monochrome graphics that require clear boundaries, and it does not support transparency. Image quality also degrades significantly when the developer compresses the file beyond its tipping point.
GIF
The Graphics Interchange Format (GIF), initially released in 1987, like the JPEG, has universal browser support. GIFs support lossless compression and multiple frames allowing developers to create simple animations. This image format is also small in size, a feature that is advantageous in an online world where rapid page load speeds are crucial for Search Engine Optimization (SEO). Unlike JPEGs, GIFs support transparency, providing greater flexibility when creating images.
The primary disadvantage of a GIF is that it is limited to 256 colors. Back in the 1980s, this constraint was not a real limitation. However, with the resolution modern displays are capable of today, this limitation can result in poor image quality. In addition to the color limitations, you cannot edit a GIF after its creation, limiting its development flexibility.
PNG
Created to replace the historical disadvantages found in both JPEGs and GIFs, the Portable Network Graphics (PNG) image format supports lossless data compression. It addresses the GIF’s color band limitations and has smaller file sizes when compared to its predecessors. Although GIFs support transparency, the PNG format provides better support for this image feature. PNGs also do not lose quality and detail after compression when compared to a JPEG.
Although the PNG image format does hold several advantages over both JPEGs and GIFs, it does have some drawbacks. Larger images can generate large file sizes when compared to a JPEG created off the same image data. Unlike a GIF, a PNG cannot be animated, and they are not ideal for printing as they do not support non-RGB color spaces such as the CYMK.
Newer Image Formats
Even though bandwidth increases each year with improved internet speeds, the need for high-resolution images with a small data footprint remains. The explosion of video sharing across a variety of platforms requires developers to look at static and dynamic content holistically. Traditional formats, like the JPEG, GIF, and PNG, have limitations that can impact both the performance and design appeal of a website. They are also not capable of supporting any video. In recent years a few new image formats have been developed that address both quality, compression, and the requirements of the modern Internet age. These include WebP and AVIF.
WebP
Currently developed by Google, WebP provides developers with a format that delivers superior image quality and performance. The goal of this standard is to achieve images that have a smaller footprint than the JPEG without sacrificing resolution and quality. It also supports transparency and animations so it can effectively replace the JPEG, GIF, and PNG. However, until recently, support for it was limited to Google platforms such as the Chrome browser and Android Operating System.
The good news for developers is that this format is now supported by Microsoft Edge version 18 or better, Firefox version 65 or better, and Opera 11 version 10 or better. With many browsers opting to use the open-source Chromium engine, including the new Edge browser set to launch in early 2020, support for WebP is almost ubiquitous.
AVIF
The AV1 Image File Format (AVIF) is effectively a specification that enables the storing of static and animated images leveraging the HEIF file format. It is a royalty-free format for video coding that many believe is the next wave of transformation for media compression. Its closest competitor is JPEG XR. However, the licensing and patent payments for the JPEG XR makes its adoption impractical.
AVIF does have its limitations when it comes to browser and platform support. Chrome, Firefox, and Explorer cannot render this image format. It is still in its infancy, and many companies, including Microsoft, Google, Amazon, and Netflix, are actively working on this new standard. However, the promise of AVIF is real, so developers need to plan for it. It supports transparency, has the highest compression possible, is royalty-free, and has the backing of all the major cloud and platform providers.
Selecting the Best Image Format
As it stands, the JPEG will remain the de-facto standard for web images supplemented with PNGs, where the solution demands graphics with a higher resolution. However, one cannot disregard AVIF. All indications show that it will be the next image format evolution for the web.