Website images are attracting a lot of discussion, and with good reason: According to the HTTP Archive, 61 percent of a website’s page weight on a desktop computer is images, and that percentage rises to 65 percent on mobile devices. And to top it off, the number of image bytes has grown by more than 30 percent on the average web page year over year as images become bigger and bigger.
Not much progress in supporting image formats has been made since the standard JPEG, GIF and PNG formats were brought to market more than 15 years ago. The reason is simple: Supporting new image formats across different browser types is hard. However, two new image formats have come on the scene in the last few years and have recently started to gain traction as a way to optimize images: WebP (put forth by Google) and JPEG XR (backed by Microsoft).
WebP vs JPEG XR
Both draw on significant technology advances from the past 15 years and each has its unique strengths. Each format supports lossless and lossy compression and full transparency, and JPEG XR supports progressive rendering of images. Websites that utilize these new formats are seeing significant results, often saving 25 percent to 50 percent of bytes when compared with a similar quality JPEG.
The biggest drawback for both—and the chief recent adoption is a bit slowed—is browser support: WebP, for example, is only supported in Chrome, Opera and some newer Android devices. JPEG XR is fully supported in IE 10+, with limited support in IE 9. Neither has support for Firefox and Safari. For many users not utilizing these browsers, a website’s images appear broken.
Facebook Supports WebP
The one big public test of these new formats came with Facebook’s implementation of WebP last spring. Facebook was able to deliver images to users with WebP-supported browsers, but issues arose when users tried to action the photos by saving, editing or resharing them. One frustrated user asked “How do I disable this monster?”
Tips for Image Format Implementation
Websites can benefit significantly from these new image optimization technologies, but need to keep a few things in the back of their minds when going in this direction:
- Understand how people are going to use the website images. In the case of Facebook, the user clearly wasn’t taken into consideration because downloading, saving, editing and sharing photos are activities undertaken by a significant percentage of the Facebook audience.
- Quality normalization matters. Differences in quality settings need to be considered when using multiple lossy formats. Choosing quality settings that produce similar perceived quality degradation can be accomplished using an algorithm like SSIM (structural similarity).
- Use WebP and JPEG XR only in instances where there is browser support. With no crossover in browser support, it might make sense for websites looking to move in this direction to support both for maximum coverage.
There are many upsides to using these new image optimization formats, and when the above points are taken into consideration, websites will see significantly improved performance and byte savings. Further browser support – notably from Firefox and Safari – will sweeten the pot even more.
