We have all heard the saying—“a picture is worth a thousand words”, but how do you ensure that you’re getting all thousand words worth? Is there a way to have your images worth even more? Choosing the optimal format for an image served to a certain device over a particular network condition via a specific browser can help you maximize your image’s impact.

Let’s take a look at capabilities, characteristics, and compatibility for the most common image formats used in today’s web sites - GIF, JPEG, PNG. We’ll also provide the same information for recently introduced (and browser-specific) formats - WebP, JPEG 2000 and JPEG XR. Finally, we’ll review BPG (Better Portable Graphics) - a new image format designed to replace JPEG.

GIF

Graphics Interchange Format (GIF) is a bitmap image format that has come into widespread usage on the web due to its wide support and portability.

The format supports up to 8 bits per pixel for each image, allowing a single image to reference up to 256 different colors. It also supports animation (allows a separate palette of up to 256 colors for each frame) and 1-bit transparency.

Browser support

Chrome Chrome (iOS) Firefox Safari IE/Edge Opera
Yes Yes Yes Yes Yes Yes

JPEG

Joint Photographic Experts Group (JPEG) is a lossy graphics file. JPEG images have multiple file extensions, including .jpg, .jpe, .jif, .jfif, and .jfi. JPG files have 2 sub-formats, JPG/Exif (digital cameras and photographic equipment), and JPG/JFIF (web).

JPEG supports up to 16.8 million different colors. JPEG does not support animation or transparency.

Browser support

Chrome Chrome (iOS) Firefox Safari IE/Edge Opera
Yes Yes Yes Yes Yes Yes

PNG

Portable Network Graphics) PNG files are a lossless format, meaning that compression doesn’t affect the quality of the image. PNG was created as an improved open-source replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the Internet.

PNG–8 supports 256 colors and 1-bit transparency, and PNG–24 supports 24-bits and 16.8 million colors. PNG supports scalable transparency (from opaque to completely transparent) via alpha channel.

Animation is supported via the Animated Portable Network Graphics (APNG) extension. It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility with non-animated PNG files. At this time, APNG hasn’t caught on, and thus hasn’t received support from most major browsers.

Browser support

Chrome Chrome (iOS) Safari Firefox IE/Edge Opera
Basic Yes Yes Yes Yes >= 7 Yes
Animated No Yes Yes Yes No No

WebP

WebP is a modern image format, developed by Google, employing both lossy and lossless compression. The format was first announced in 2010 as a new open standard for lossily compressed true-color graphics on the web, producing smaller files of comparable image quality to JPEG.

WebP supports 24 bits and 16.8 million colors. It also supports animation, ICC profiles, XMP metadata, and transparencies via alpha channel.

In addition to the simple/basic file format, WebP also supports extended and animated formats. The extended container provides for embedding advanced metadata, including color profile, animation control, EXIF, and XMP. Animated image format includes multiple frames, along with ANIM (global animation parameters) and ANIMF (single frame information) chunks.

Browser support

Chrome Chrome (iOS) Safari Firefox IE/Edge Opera
Basic >= 9 >= 29 No No No >= 11.5
Animated >= 32 No No No No >= 20
Extended >= 23 >= 29 No No No >= 12.1

JPEG 2000

JPEG 2000 (JP2) is an lossy and lossless image compression standard and coding system. It was created by the Joint Photographic Experts Group committee in 2000 with the intention of superseding JPEG standard. While JP2 can support any color bit depth, most implementations utilize 24-bit color.

JP2 (wavelet-based) is not backwards compatible with JPEG (discrete cosine-based). JP supports transparency, but not animation.

Browser support

Chrome Chrome (iOS) Safari Firefox IE/Edge Opera
No Yes >= 5 No No No

JPEG XR

JPEG XR (eXtended Range) is a lossy and lossless compression standard and file format for continuous tone photographic images, based on technology originally developed and patented by Microsoft under the name HD Photo. JPEG XR supports up to 32-bit color depth, along with transparency via an alpha channel. JPEG XR does not support animation.

Browser support

Chrome Chrome (iOS) Safari Firefox IE/Edge Opera
No No No No >= 10 No

BPG

BPG (Better Portable Graphics) is a new image format, whose purpose is to replace the JPEG image format when quality or file size is an issue. It boasts a high compression ratio - files are much smaller than JPEG for similar quality. BPG supports lossless and lossy compression, along with transparency (via alpha channel), animation, and embedded metadata (color profiles, XMP and EXIF metadata). BPG support 14-bits per color channel (versus 8-bits per channel for JPEG).

There is currently no native browser support for BPG—displaying BPG images requires a 56KB (after gzipping) JavaScript library.

Summary

The following table summarizes and provides additional details on the capabilities and characteristics for each of the discussed image formats.

GIF JPEG PNG: Basic PNG: Animated JPEG 2000 JPEG XR WebP: Basic WebP: Extended WebP: Animated
Indexed Color Yes No Yes Yes No No No No No
Full Colour No Yes Yes Yes Yes Yes Yes Yes Yes
Binary Transparency Yes No Yes Yes No No No No No
Full Transparency No No Yes Yes No No Yes No No
Chroma Subsampling No Yes No No Yes Yes 4:2:0 4:2:0 4:2:0
Progressive Loading Yes Yes Yes Yes Yes Yes No No No
Animation Yes No No Yes No No No No Yes
Lossy Compression Yes Yes Yes Yes Yes Yes Yes Yes Yes
Lossless Compression No No Yes Yes Yes Yes No Yes Yes
Byte Savings Poor Okay Poor Okay Good Good Good Good Good
Adrian Willis

Adrian Willis

Principal Solutions Engineer