Not just JPEG or PNG? New image formats: WebP and AVIF

As of 2021, the mainstream image formats on the web include JPEG, GIF, PNG, and SVG. Let’s take a moment to review the characteristics of these formats once again.

JPEG (Joint Photographic Experts Group) is one of the image formats with a long history. It is suitable for photographs that handle a vast number of colors and for complex still images. It achieves a lightweight file size by using a compression method that removes redundant information (lossy compression). Because redundant information is discarded, image quality degrades slightly. While it may not be noticeable after a single compression, a significant drawback is that repeated saving causes visible deterioration in quality.

Since the compression process blends colors together, it is not suitable for images with sharp color boundaries, such as geometric shapes or illustrations.

GIF (Graphics Interchange Format) has a history as long as JPEG’s. Its key features include high compression rates despite being limited to 256 colors, and the ability to handle transparency, which JPEG cannot. The compression rate is particularly high when identical colors are continuous, making it ideal for images with few colors, such as illustrations and icons.

Furthermore, it can support animation by storing multiple images in a single file. At one time, 1px transparent GIFs were used to adjust layouts, but with the rise of PNG and SVG (discussed later) and the advancement of CSS, their use on websites has decreased compared to the past.

PNG (Portable Network Graphics) appeared as an alternative to GIF. While GIF is limited to 256 colors, PNG can handle full color (16.77 million colors) like JPEG. It also supports translucency by having an alpha channel—similar to the RGB channels—whereas GIF could only handle a single transparent color. Unlike the lossy compression used in JPEG, PNG uses lossless compression, which does not degrade image quality. Therefore, the quality remains intact no matter how many times it is saved.

On the other hand, it does not support the animation features that GIF offered, and file sizes tend to be about 5 to 10 times heavier than JPEG. Since there is no loss of quality, it is well-suited for images with clear color boundaries, such as text and line art, which are areas where JPEG struggles.

SVG stands for Scalable Vector Graphics. While the three image formats mentioned above are raster formats, SVG is a vector format. In raster formats, color information is recorded for each pixel, whereas in vector formats, the coordinates and positions of shapes such as squares and circles are recorded. For this reason, a key feature of SVG is its resilience to scaling, as the image quality does not deteriorate when resized.

Another characteristic of SVG is that it is written in XML format. It can be edited with a text editor, and by using CSS or JavaScript, you can dynamically change shapes or set up animations and click events.

On the other hand, it is not suitable for rendering images with complex and delicate color schemes or outlines, such as photographs. Additionally, while the file size of raster images tends to increase based on the vertical and horizontal dimensions of the image, vector file sizes tend to grow as the amount of information increases—such as with complex shapes—because they are essentially text files. For relatively simple icons and graphics, SVG can provide a more lightweight and high-quality representation than other image formats.

Currently on the web, different formats are used for different purposes: JPEG for photos, and PNG or SVG for graphics and transparent images.

WebP (pronounced "weppy") is a raster-style still image format developed by Google.

An image format for the Web

By using WebP, you can replace the various images that previously required separate use of JPEG, GIF, and PNG with a single format. It supports both lossy compression, which reduces image quality, and lossless compression, which preserves it. It is claimed that lossy WebP images are 25–34% smaller than JPEGs, and lossless images are 26% smaller than PNGs. It can also handle transparency with only a 22% increase in file size and supports animation as well.

Since its specifications were announced in 2010, the number of supported web browsers has gradually increased. With the release of iOS 14 in September 2020 supporting WebP, all major modern browsers are now compatible.

WebP image format | Can I use...

AVIF (AV1 Image File Format) is a raster-format image that utilizes AV1, a video codec. AV1 was developed by AOMedia (Alliance for Open Media), a non-profit organization founded by a broad range of companies—including Netflix, Amazon, Google, Microsoft, and Mozilla—to develop an open, royalty-free codec for streaming. AVIF is a next-generation image file format that offers even higher compression rates than WebP and supports HDR, allowing it to handle a wider color gamut.

Browser support is still limited; for instance, it has been supported in Google Chrome since version 85 (released in August 2020), and in Firefox since version 77, though only partially through enabling options. Furthermore, as the AV1 codec itself is still evolving, environments for easy encoding are not yet fully established. Issues such as slow encoding speeds have also been pointed out. However, given the participation of major browser vendors, there is a possibility that it will replace WebP and other image formats in the near future, making it a format worth watching closely.

AVIF image format | Can I use...

Even though WebP is now supported by major modern browsers, it doesn't mean everyone is using those browsers on the latest OS. If we wait for perfect compatibility across the board, newer formats like AVIF might already be becoming the norm. Therefore, the ideal approach is to prepare multiple image formats and display the latest compatible format based on the user's browsing environment.

Let’s look at how to support multiple images by breaking it down into two stages—creation and display—using WebP as an example.

There are three main timings for creating WebP images.

For a long time, Photoshop did not support it by default, but with the release of Photoshop 23.2 in February 2022, it is now supported, allowing for both editing and saving. Since designers can make adjustments while monitoring both image quality and file size, this method is ideal for high-priority areas of a site where you want to maintain full control, such as the main visual on a top page.

On the other hand, adjusting and saving images one by one can be quite time-consuming.

When you need to convert a large number of images, engineers can opt to batch-convert them during the build process or at similar timings. By using ffmpeg, you can perform WebP conversions via the command line. You can also adjust parameters like the compression rate by configuring specific options.

Additionally, since many image conversion libraries are available via npm, you can use these to easily implement batch conversion during build time.

However, in this case, it is not possible to fine-tune the compression rate for each individual image. It is best to configure your settings by checking the overall balance between the quality and size of the converted images.

Also, when doing this, be sure to use uncompressed source images whenever possible. Converting an already compressed image into WebP will almost always result in further quality degradation. Try to perform the conversion based on high-quality original images as much as possible.

The methods mentioned above work perfectly for static images. However, they cannot handle images uploaded by users or those added dynamically via a CMS. To support such cases, server-side implementation becomes necessary.

While this can be implemented using services like Firebase Cloud Functions, this approach requires server-side expertise. Additionally, because it utilizes cloud services, it involves costs and increases the number of factors to consider, such as error handling. It is best to decide on this path after considering the scale of the site, the amount of dynamic content, your team's skill set, and your operational structure.

Recently, image delivery CDNs like imgix allow you to convert and deliver images in WebP format simply by setting parameters. For example, microCMS—a Japanese headless CMS—integrates with imgix, enabling images registered in the CMS to be delivered as WebP automatically.

Once your images are ready, the next step is how to display them.

The simplest way is to use the <picture> element, which allows the browser to select and load the most suitable image. Since the browser skips unsupported formats, a browser that does not support WebP (such as IE) will simply load the JPEG image specified in the <img> tag.

<picture>
<source srcset="img/photo.avif" type="image/avif">
<source srcset="img/photo.webp" type="image/webp">
<img src="img/photo.jpg" alt="Description of Photo">
</picture>

For images specified in CSS, such as background-image, the CSS itself cannot differentiate between formats like the <picture> element does. By loading a library like Modernizr, you can serve different styles depending on whether the environment supports WebP or not.

Modernizr

Since this detection is based on the DataURI format of the loaded image, you could also implement similar logic yourself without relying on a library.

Furthermore, much like with image conversion, it is possible to switch the display on the server side.

This can be implemented by reading the "Accept" header of the request and returning WebP if supported, or JPEG if not. For a detailed explanation of this method, the following site is a great resource.

The Golden Solution for Web Production in a Changing Technical Landscape: From Next-Gen WebP to AVIF - ICS MEDIA

While formats like JPEG and PNG have been used for a long time, it is likely that WebP and AVIF will become the mainstream moving forward. We should definitely keep a close eye on future developments.