Upgrading images on Vimeo
After introducing support for a classic animation format a few months back, we thought it was time to return to 2021 and take a look at current-generation codecs. Since 2019, AV1 video has been available for all videos in the Staff Picks channel, and today we’re expanding our AV1 coverage with AVIF for images, as well as expanding our WebP support. This change should improve page load times for people with compatible browsers.
All about AVIF
You may know of AV1 as one of the newer formats used to distribute video on the web (including on Vimeo) and elsewhere, but if AVIF sounds unfamiliar, think of it as a subset of the same format applied to still images. The modern compression techniques inherited from AV1 yield lower file sizes than other codecs for images of comparable quality. We leverage the libaom encoder for our AVIF encodes, because it provides fast encoding modes suitable for on-the-fly transcoding and optimized for still images while maintaining a good tradeoff between performance and quality.
The main downside of generating AVIF images on the fly is encoding time. This can take on average two to three times as long as the same operation with WebP or JPEG, as shown on the chart below:
While this would be concerning if we encoded images every time they were requested, this is typically a one-time operation, and subsequent requests will return cached versions of the images that will be faster to deliver at the same quality level, thanks to lower file sizes. The data shown here was also collected from mostly 1080p and 4K images, and we have seen that larger images exacerbate this disparity despite parallelizing encodes with the tiling feature from AV1.
Below are the PSNR rate/distortion curves for our three supported lossy image formats, based on internal benchmarks:
Curves that are higher up (higher quality) and further left (lower file size) indicate better coding efficiency. From these data points, we can calculate PSNR Bjøntegaard-Delta rate values, which correspond to the difference in rate required to achieve the same PSNR distortion of another format. We calculated over a 30 percent average improvement in coding efficiency for AVIF compared to WebP, and over 50 percent compared to JPEG.
Both charts above use metrics gathered from sampled videos taken from our vimeo-corpus-10s data set.
In the image comparison below, you can see that the same image in AVIF is 10 to 40 percent smaller than alternative formats, while having the highest VMAF score. We try to keep quality metrics as close as possible between our supported formats, but file sizes can make a big difference in page load times.
Better image format selection
Our image server encodes images on the fly to any requested format that it supports, a common approach today which reduces storage costs by caching only commonly requested images and increases flexibility by making it easy to implement new formats — like AVIF — without re-encoding a huge library of images in advance.
Until now, we have been delivering the JPEG, PNG, and WebP formats depending on the type of image (video thumbnail, profile picture, and so on), and whether the browser supports WebP. The responsibility of picking the right format was left to callers of our image server, which meant that format selection had to be implemented in several different places on Vimeo. As a result, not every part of the site supported the WebP format in the first place, and, since adding a fourth format to support increased the complexity of the selection logic, we found that it made more sense for the server itself to select an appropriate format based on the source image properties and the web request’s HTTP headers.
To determine what formats are supported by the client, we look at the Accept header, a list of MIME types sent by browsers where WebP and AVIF support are declared via the image/webp and image/avif values, respectively. We also use the Vary header with the value Accept to indicate that the image returned should depend on the contents of the Accept header. This enables our caching mechanism to provide different formats based on what is supported by various browsers. Since the exact contents of the Accept header depend on the browser, we also normalize its value before it reaches the server, so that we don’t need to cache the same image multiple times due to small changes in the list. To do this, we read the original header and replace it with one that contains only the formats that we care about (right now, WebP and AVIF).
As a result of all these changes, all browsers that explicitly support AVIF will now display most images on Vimeo in this format. Those that don’t will receive WebP if possible, or JPEG and PNG as a fallback to ensure maximum compatibility. Do note that if you’re using Firefox with AVIF enabled manually, colors may look off, since Firefox lacks proper color space support.
This is only one of several steps we have taken recently to improve page load times on Vimeo. By leveraging newer image coding techniques, we can maintain or improve image quality across our entire platform while simultaneously lowering bandwidth consumption and improving browsing performance. If your browser supports AVIF, or even just WebP, this update is already available to you!
