WebP and AVIF for Thumbnails: Do the Savings Hold at Small Sizes?
At equal quality, AVIF stayed about 30 % smaller than MozJPEG from 160 to 1600 pixels wide, while WebP went from no saving at 1600 pixels to 12.5 % at 160.
Format comparisons usually test large images: a 1600-pixel photo, a full-width hero. But much of a typical page’s image weight sits in small files: thumbnails in a grid, product cards, avatars, related-post images. Do WebP and AVIF save as much on a 160-pixel thumbnail as on a 1600-pixel photo? We compared all three formats at equal visual quality at five widths.
The test
Each of our 20 CC0 photos was resized with sharp 0.35.5 (lanczos3) to 160, 320, 640, 1024 and 1600 pixels wide. At each width we encoded it as MozJPEG and WebP at quality 40 to 90 and as AVIF at quality 30 to 80, scored every file with SSIMULACRA2 against the resized lossless reference, and interpolated the bytes each format needed to reach scores of 60, 70 and 80. Photos whose quality ladder did not reach a score at some width are left out of that comparison, so the number of photos varies (12 to 20 at a score of 70). In total this test used 1,800 encodes. See our methodology.
Results
WebP’s advantage grew as images got smaller. At a score of 70, WebP needed 2.1 % more bytes than MozJPEG at 1600 pixels, about the same at 1024 pixels (2.2 % less), 6–7 % less at 640 and 320 pixels, and 12.5 % less at 160 pixels. At a score of 80 the pattern was the same, from 2.2 % less at 1600 pixels to 17 % less at 160.
AVIF stayed about 30 % smaller at every size. At a score of 70, AVIF needed 27.5–32.7 % fewer bytes than MozJPEG from 160 to 1600 pixels. Its lead over JPEG did not shrink for small images, but it did not grow either.
| Width | Target score | Photos | JPEG, median KB | WebP, median KB (vs JPEG) | AVIF, median KB (vs JPEG) |
|---|---|---|---|---|---|
| 160 px | 60 | 8 | 2.84 | 2.69 (−8.8 %) | 1.81 (−32.7 %) |
| 70 | 12 | 3.24 | 2.92 (−12.5 %) | 2.16 (−32.0 %) | |
| 80 | 9 | 4.89 | 4.36 (−17.0 %) | 3.45 (−35.6 %) | |
| 320 px | 60 | 8 | 8.08 | 7.68 (−2.2 %) | 5.92 (−24.0 %) |
| 70 | 20 | 10.12 | 9.33 (−7.0 %) | 7.23 (−27.5 %) | |
| 80 | 15 | 14.53 | 13.34 (−11.6 %) | 9.53 (−30.2 %) | |
| 640 px | 60 | 17 | 21.83 | 21.69 (−0.6 %) | 15.25 (−30.3 %) |
| 70 | 20 | 32.75 | 33.13 (−6.1 %) | 23.08 (−32.4 %) | |
| 80 | 15 | 44.35 | 41.23 (−7.0 %) | 31.98 (−32.4 %) | |
| 1024 px | 60 | 15 | 49.24 | 52.70 (+0.3 %) | 36.94 (−34.1 %) |
| 70 | 20 | 75.23 | 76.70 (−2.2 %) | 51.73 (−32.3 %) | |
| 80 | 16 | 101.41 | 101.43 (−4.2 %) | 72.08 (−29.7 %) | |
| 1600 px | 60 | 15 | 108.23 | 115.11 (−0.1 %) | 76.11 (−35.1 %) |
| 70 | 20 | 160.72 | 175.29 (+2.1 %) | 114.79 (−32.7 %) | |
| 80 | 16 | 231.73 | 236.69 (−2.2 %) | 162.79 (−27.7 %) |
Small files carry a fixed overhead. At 160 pixels the median files weighed only 2–3 KB, so headers become a noticeable share. We measured them: the median MozJPEG thumbnail spent 229 bytes on headers before its first image data, the median AVIF 250 bytes on its container, and WebP’s container needs about 30 bytes. On a 2.3 KB AVIF, 250 bytes is about a tenth of the file. That helps explain why WebP gains ground at small sizes while AVIF does not.
What this means for thumbnails
- AVIF remains the smallest option at every size we tested. For a grid of 24 thumbnails at 320 pixels, the median AVIF (7.2 KB) versus MozJPEG (10.1 KB) saves about 70 KB per page view at the same quality.
- If you only serve WebP, it pays off most on small images. At 1600 pixels it was no better than MozJPEG in this test; at 160 pixels it was 12.5 % smaller.
- Thumbnails still need the right width. Sending a 640-pixel file into a 320-pixel slot costs about three times the bytes, as our test of file size by image width shows. On high-density screens, the right file is the one that matches the slot’s physical pixels, as explained in our high-DPI test.
Practical conclusion
At equal visual quality, AVIF was about 30 % smaller than MozJPEG at every width from 160 to 1600 pixels, while WebP went from no saving at 1600 pixels to 12.5 % at 160. Use AVIF for thumbnails where you can; WebP is a reasonable fallback that works best on small images.
Limitations
One metric (SSIMULACRA2) applied to small images, where a few pixels of difference weigh more. Quality ladders limited at 90 (JPEG, WebP) and 80 (AVIF) mean that some photos never reached the higher target scores at small sizes, which is why the number of photos per row varies.
Data and files
Download width-format-ladders.csv (1800 rows, 241.4 KB) · Method: testing methodology. Photos: image credits.
