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.
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.
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.
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.
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.
|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 (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.
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.
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).
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|
Principal Solutions Engineer