Web Image Formats

In a digital landscape where visual content reigns supreme, the demand for efficient and high-quality web image formats has never been greater. Discover the secrets behind next-generation formats in the browser that promise to redefine the way we consume and share visual information.

This article focuses on image formats that are directly supported by modern browsers.

Lossy image formats are image formats that use lossy compression. Lossy compression means that the image data is compressed in a way that some information is lost. Lossless compression means that the image data is compressed in a way that no information is lost. For example, for screenshots, lossless compression would be better, because the text in the screenshot would be more readable.

GIF

The Graphics Interchange Format (GIF) is a bitmap image format that was introduced in 1987 by CompuServe. GIF uses a special compression algorithm that is based on the Lempel-Ziv-Welch (LZW) lossless data compression technique.

Simple animations are supported by the format.

Since the beginnings of HTML, GIF was supported in browsers. Consequently, all browsers today support GIF.

Specification: https://www.w3.org/Graphics/GIF/spec-gif89a.txt

JPEG

Currently, JPEG (Joint Photographic Experts Group image) is the most popular image format on the web. It supports lossy compression and as of today, all United States patents on the format have expired.

JPEG is supported by all modern browsers.

Specification: https://jpeg.org/jpeg

PNG

The PNG (Portable Network Graphics) format is a lossless format that was designed as a replacement for GIF. Therefore, it supports higher color depth and is more efficient than GIF. It also supports alpha transparency.

PNG is supported by all modern browsers.

Specification: https://www.w3.org/TR/png

APNG

The abbreviation APGN stands for "Animated Portable Network Graphics". It is a file format that extends the PNG format with support for animations.

In comparison to GIF which also supports animations, it has an enhanced support for color depths.

According to caniuse.com, APNG is at the time of writing the article supported by 96.14% of all browsers. All of today's modern browser support APNG.

Specification: https://wiki.mozilla.org/APNG_Specification

SVG

SVG (Scalable Vector Graphics) is a vector graphics format for the web. In this it differs from the other formats that are discussed in this article. The other formats are bitmap formats. SVG is great for logos and icons and scales well without loss of quality.

SVG is supported by all modern browsers.

Specification: https://www.w3.org/TR/SVG2

WebP

The WebP image format was developed by Google and is based on the VP8 video codec. It supports lossy and lossless compression. Furthermore, it supports transparency and animations.

It was designed to be a replacement for JPEG, PNG, and GIF. AVIF and JPEG XL could supersede WebP in the future.

Its license is open-source and royalty-free.

According to caniuse.com, WebP is supported by 96.63% of all browsers.

Specification: https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification and https://datatracker.ietf.org/doc/html/rfc6386

AVIF

The AV1 Image File Format (AVIF) is an open-source and royalty-free image file format.

Rooted in the AV1 video codec, it offers superb lossy compression and compares favorably to other image formats such as JPEG, PNG, and WebP. It also offers lossless compression and has animation capability. Furthermore, it supports HDR and wide color gamut for high-quality images.

Currently, the support for AVIF in browsers stands at 83,97% globally according to caniuse.com.

Among the modern browsers, only Edge does not support AVIF.

Specification: https://aomediacodec.github.io/av1-avif

Conclusion

In all, today there are a variety of image formats to choose from for the web. The choice of the format depends on the use case. For example, for logos and icons, SVG is a good choice. For photos, JPEG is a good choice. Screenshots are best saved as PNG. If you use one of the newer image file formats like WebP and AVIF, you should specify a fallback format for older browsers.

References

• MDN Image File Type and Format Guide: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

Cover image by Alvin Lenin on Unsplash