New Image Formats Aim to Combat Website Bloat

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

WebP Image FormatThe 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.

Latest Web Performance Articles​

Top 15 Infrastructure Monitoring Tools

Infrastructure monitoring tools ensure systems’ optimal performance and availability, enabling the identification and resolution of potential issues before they become complex. This article delves into

Top 20 Server Monitoring Tools of 2023

A server monitoring tool is software that monitors the operation and general health of servers and other components of IT infrastructure. These tools continuously track

Top 25 Server Monitoring Tools

In this article we give our expert picks of the top 25 server monitoring tools to help monitor your website’s uptime and give your users the best experience, starting with our own solution at Dotcom-Monitor. Learn why server monitoring is an essential part of any monitoring strategy.

Top 20 Synthetic Monitoring Tools

Synthetic monitoring allows teams to monitor and measure website and web application performance around the clock from every conceivable vantage point, and to receive alerts before issues begin to impact real users. Here are our top picks for synthetic monitoring tools, leading with our own at Dotcom-Monitor.

Start Dotcom-Monitor for free today​

No Credit Card Required