Consumers are continually demanding new and engaging ways to interact with their favorite brands. In response, businesses are finding ways to infuse eye-catching visual assets into their online presence. As a result, roughly 60% of most of today’s website data is taken up by images. This number is only growing as visual experiences become increasingly important.
To deliver images in a way that boosts their online performance, developers must consider the image format they use. The visual economy today supports a wide variety of available image formats. According to Cloudinary's State of Visual Media report, 71% of brands rely on three or four different image formats to tell their stories.
However, as the Internet evolves, so do modern formats. Not all formats should be considered equal. Brands must consider the rise of these modern formats as they determine which image codecs to use to ensure the best-performing visual experience for the end-user.
Dethroning JPEG, the Grandmaster of Image Compression
JPEG is a traditional format that dates back to the 1990s. It is the lowest common denominator of all the formats, displaying well on all types of browsers and devices. That’s why it’s no surprise that this is the most frequently used image format.
As superb a codec as JPEG was, it’s become apparent that it’s now hitting its limits. For example, there’s a lack of alpha transparency or a way to support gradations of opacity on a continuum.
Also, there is an 8-bit limit – meaning no HDR – that is relatively weak compared to other up-and-coming formats. This puts into perspective why the industry is moving away from JPEG and looking at the various new image formats that will optimize their assets.
The Rise of Modern Formats
Lightweight formats are growing in popularity as brands start to see the huge benefits they can bring. One reason for the rise in popularity might have been companies’ groundwork preparations for the 2021 launch of Google’s Core Web Vitals. Because Core Web Vitals was said to have started impacting Google search rankings, teams were working with urgency to ensure sites were optimized to score well.
LCP specifically, or Largest Contentful Paint, is the metric that deals with loading time, hence the push for image formats that load quickly. In fact, according to the 2020 Web Almanac,
To meet these demands, many newer, more modern formats have emerged in the last decade as advantageous contenders. The new formats include:
WebP
WebP adoption has grown since 2019 and is on track to overtake PNG as the second most frequently used format. It’s for good reason, given that the average WebP file size is roughly 20% smaller than the average JPEG. The growth in popularity could also be a result of Safari’s WebP adoption in MacOS Big Sur and iOS 14.
AVIF
You may have thought that the WebP file size difference of 20% was great already. But AVIF typically compresses more efficiently than JPEG by roughly 50%, in particular in the low to medium quality range relevant for highly optimized websites!
It also supports transparency, accommodating both sharp-edged and continuous-tone imagery. And unlike WebP, JPEG, and PNG, AVIF works well with 10-bit depths, which is a necessity for HDR and wide-gamut imagery.
JPEG XL
As the next-generation codec, JPEG XL is a royalty-free raster-graphics file format that supports both lossy and lossless compression. It’s roughly 60% more efficient than JPEG, in particular in the medium to high-quality range relevant when
In March 2022, the JPEG XL specification was published as an ISO standard. While there are still barriers to its mass adoption, its popularity is growing. Both Google Chrome and Mozilla Firefox already have preliminary support for JPEG XL behind the flag.
While a range of possible options will continue to expand, each of these aims to bring state-of-the-art royalty-free codecs to the web. Developers will need to take a closer look at their options to see which candidates will rise to the occasion to best fit their needs.
Say Hello to New Image Possibilities
The latest version of the image codecs will continue to outperform the old JPEG and PNG codecs. Major improvements have been made to compress assets more effectively while offering more features that will optimize the web experience. It’s an exciting time for developers to experiment and try out modern formats that will take their assets to the next level.
Developers should implement several different approaches for image encoding to leverage each of their unique strengths. By experimenting with these new possibilities, brands can tell their stories in an even more optimized and elevated format.