Performance of modern image formats
Modern image formats like WebP and AVIF have spectacular compression improvements over the three decades old JPEG. But they come with a downside: longer encoding and decoding times. While the encoding time is negligible – it only happens once on a server or in a build step – the decoding is done over and over again on the clients.
While researching the topic I came across this statement by Addy Osmani:
Decoding AVIF images for display can also take up more CPU power than other codecs, though smaller file sizes may compensate for this.
What I couldn’t find were any hard numbers on WebP/AVIF vs. JPEG decoding times. So began my quest to somehow collect this data myself, leading to the development of the Image Performance Measurement tool.
Terminology
- Response time
- The time it takes the browser to request an image and receive the file.
- Decode time
- The time it takes the browser to read and decompress the encoded image.
- Paint time
- The time it takes the browser to “paint” the image’s pixels on the page.
Methodology
Disclaimer: I have no idea how scientific the following approach is. The numbers match expectations, though.
In its default configuration the Image Performance Measurement tool does the following:
- Create scaled JPEG, WebP, and AVIF files from 10 sample images.
- Start a local web server and Puppeteer session.
- Throttle the network speed to simulated 4G.
- Load each image and collect the file size, response, decode, and paint time.
- Repeat step 4 five times to smooth out outliers.
- Analyze raw data and create a summary.
Results
Slow device
Specifications: Intel Core 2 Duo T6400, 4 GB RAM, SATA1 HDD.
| Type | Size (kB) | Response (ms) | Decode (ms) | Paint (ms) | Total (ms) |
|---|---|---|---|---|---|
| .avif | 101.2182 | 214.22592 | 46.19268 | 0.49126 | 260.90986 |
| .jpg | 177.5786 | 241.13594 | 29.14996 | 0.08198 | 270.36788 |
| .webp | 126.1962 | 222.16746 | 28.57188 | 0.07598 | 250.81532 |
Fast device
Specifications: Intel Core i7-10750H, 32 GB RAM, NVMe SSD.
| Type | Size (kB) | Response (ms) | Decode (ms) | Paint (ms) | Total (ms) |
|---|---|---|---|---|---|
| .avif | 101.2182 | 185.6501 | 13.01362 | 0.02318 | 198.6869 |
| .jpg | 177.5786 | 195.2597 | 9.84462 | 0.02324 | 205.1275 |
| .webp | 126.1962 | 188.9901 | 11.29712 | 0.02318 | 200.3104 |
Takeaway
JPEG takes the decoding performance crown, indeed. Though, on modern devices the differences between JPEG, WebP, and AVIF are tiny – a couple of milliseconds at worst. The greatly reduced file sizes of WebP and AVIF lead to shorter response times that outweigh any advantage JPEG may have in the decoding department.
Even on slower devices the modern image formats are more performant than JPEG. True, decoding and painting AVIF takes significantly longer than JPEG, but once again the smaller file sizes of WebP and AVIF win.
And always bet on the future, I guess: JPEG had three decades to optimize every last bit. WebP is not even a dozen years old, and AVIF barely three. As old devices are replaced, the performance gap between JPEG and WebP/AVIF will only increase.