High Resolution Website Image Formats

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.

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.

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.

Chrome
Chrome (iOS)
Firefox    
Safari
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. This open format became widely available in 2010, to provide a new lossy compression standard for web graphics. Like JPEG, it could produce true-color graphics within smaller package sizes, while maintaining a similar image quality.

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.

Chrome
Chrome (iOS)
Firefox    
Safari
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 a 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.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
No
Yes
No
>=5
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.

Chrome
Chrome (iOS)
Firefox    
Safari
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 Color
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  

Learn more about managing the most popular online image formats with Akamai Image Manager.