When it comes to adding images to a website, most developers have several formats to choose from – JPEG, JPEG-XR, PNG, WebP and GIF to name a few. But determining which is the right one for each use case can be a challenge.
In order to understand how to find the best format for your images, let’s take a look those commonly in use today – as well as some next-generation formats that are gaining adoption momentum.
Universal Image Formats
In use for more than 25 years, JPEG is a standard that has stood the test of time. JPEG is very good at compressing continuous-tone images, like photographs, which feature many colors and smooth transitions between them. JPEG, however, is not ideal for compressing images with crisp edges or high-energy, noisy textures, and will result in rings around sharp edges or fine detail being blurred out.
In the early days of the web, if an image wasn’t a JPEG, it was a GIF. The GIF format is good at compressing images that have large chunks of identical or repetitive data. As a result, images that only have a few colors, in broad swaths, with sharp transitions between them can be stored efficiently and losslessly as GIFs. In addition, the format supports transparency and animation.
Because it has a hard 256-color limit, GIF should not be used when compressing images that have even a moderate number of colors. Converting an image with more than 256 colors into a GIF results in lossy posterization, which will not look good. So, while GIF was initially used for a variety of images, today it should be considered only if you need animation.
PNG excels with the same sorts of images as GIF, but it offers some added benefits. For example, there is no 256-color limit and the format features superior compression. It also supports alpha channel transparency, which enables a pixel to be partially transparent, and not simply all-transparent or fully-opaque.
In the end, PNG will be better than GIF for images with crisp edges and broad swaths of solid color or precisely repeated patterns. However, it will perform worse than JPEG when it comes to photographs.
Next-Generation Image Formats
WebP is an offshoot of Google’s WebM video format. It takes the simple predictive strategy used by the PNG format to the next level. WebP uses one of up to sixteen different prediction strategies for every (variable-sized) block in the image, and can either losslessly or lossily compress the residual difference between the predicted and actual values.
As a result, WebP offers a lot of flexibility. It is good for a wide variety of imagery (both graphic, if you choose its lossless settings, and photographic, if you go lossy), and generally offers better compression than either PNG or JPEG. The downside: it is currently only supported in two of the major browsers: Chrome and Opera.
Microsoft’s next-gen-format-of-choice is JPEG-XR. It layers a bunch of new techniques on top of the basic mechanics of JPEG compression, enabling lossless compression, more efficient lossy compression and alpha-channel semi-transparency. Like WebP, JPEG-XR is a lot more complex, performant, and less-well-supported than its predecessors. Right now, the format is only supported in Internet Explorer and Edge.
These next-generation formats offer a lot of promise, but because of the limitations on their support, it will be important to serve JPEG or PNG backups to ensure all visitors to your website can view images. You can either do this on the client side, using the new <picture>/<source type> pattern or on the server, using HTTP Accept headers for Content Negotiation
Whether you’re using legacy formats or delivering the formats of the tomorrow, today – picking the right format for your images is one of the first, simplest, and best things you can do for your site’s performance. Choose wisely!
You might also like to learn how to optimize images on websites to improve performance and UX.
- WebP Images: A Primer
- My Approach to On-Page SEO in 2019
- Image Management Best Practices
- An Introduction to Progressive Image Rendering
- The Challenge of Responsive Images
- Image Loading, Reloaded
- Avoiding Generation Loss with Web Images
- Auto Tagging: The Key to Streamlined Digital Asset Management
- Media Management Challenges Developers will Need to Tackle in 2016
- How to Optimize Image Delivery Efficiently and Cost Effectively