PageSpeed Insights flags your images ("Improve image delivery" now, "Serve images in next-gen formats" in older reports), and the standard advice is to convert everything to WebP, or to AVIF if you want the smallest files. I wanted to see whether that holds up, so I converted one batch to WebP, AVIF and JPG at the same time and compared the sizes.
AVIF won once out of four. For three big camera photos, the plain JPG beat both newer formats. So this post is less "use format X" and more "measure your own images before you touch your markup", which takes about a minute with the right tool.
The scoreboard
The batch was four files, picked to look like what a typical site serves: three 4032×3024 phone photos (a pond, a land-art park, a railroad park; lots of grass and leaves, 6.5–6.7 MB each) and one 2880×1628 PNG screenshot of a browser window (1.9 MB). All four are CC0 from Wikimedia Commons. Here's what came out:
| File | Original | WebP | AVIF | JPG |
|---|---|---|---|---|
| lake-pond.jpg | 6.7 MB | 2.5 MB (−62%) | 3.5 MB (−48%) | 2.1 MB (−69%) |
| earthworks.jpg | 6.5 MB | 2.9 MB (−55%) | 3.8 MB (−41%) | 2.2 MB (−66%) |
| rail-park.jpg | 6.5 MB | 2.6 MB (−61%) | 3.5 MB (−47%) | 2.1 MB (−68%) |
| browser-screenshot.png | 1.9 MB | 219.2 KB (−88%) | 170.0 KB (−91%) | 253.8 KB (−86%) |
Taking the smallest version of each file, the batch went from 21.6 MB to about 6.6 MB ("Saved 15.0 MB total · 70% smaller"). Every output kept its original dimensions.
I wondered whether the photo result was a quirk of full camera resolution, so I resized the three photos to 1600×1200 with a script and ran them again. The order didn't change: JPG 381–446 KB, WebP 538–597 KB, AVIF 672–749 KB.
Why "just use AVIF" didn't hold here
PixSip's image format guide gives the usual rules of thumb: JPG or WebP for photos, PNG for screenshots and UI, WebP or AVIF when you want the smallest website images. All current major browsers decode both WebP and AVIF, so browser support isn't really the obstacle anymore. Whether the file is actually smaller is.
That depends on the encoder settings as much as on the format. PixSip has no quality slider. Each format gets one fixed quality picked by its developers, so this table isn't a lab comparison at matched quality. It shows what you'd actually get from the tool. With those settings, MozJPEG was the most aggressive on detailed outdoor photos, while the screenshot's flat colors and sharp text played to AVIF's and WebP's strengths.
Run the same test on your own images
Pick the formats before you drop anything
Open PixSip's WebP converter. It takes JPG, PNG, HEIC, WebP and AVIF, up to 20 files per batch and 10 MB per file on the free plan. Nothing gets uploaded: libwebp, libavif and MozJPEG run as WebAssembly inside the tab.
Before dropping files, look under the drop area. "Convert my images automatically" is already on, with WEBP selected. Click AVIF and JPG too. The free plan writes up to three formats per image, which is exactly the comparison you need: two next-gen candidates plus a JPG that doubles as the fallback. The same switch sits on the PixSip homepage, where JPEG XL is also an option (all five formats at once needs the Ultra plan).
Drop the batch and let the check marks pick
Now drop the files. My four took about 30 seconds; AVIF is the slow one. Each file gets one box per format with its size and saving, and a check mark lands on the smallest. You don't have to do any arithmetic.
Zoom in on the winner
Click Compare on a row to see the original next to the smallest output (here the 1.9 MB PNG against the 170 KB AVIF), with a drag divider and a Zoom 1:1 button. Small text in screenshots is the first thing to go soft, so check it at 1:1 before you commit.
Download 4 as ZIP gives you every format of every file, named like browser-screenshot-compressed.avif, so you can keep the winners and the fallbacks.
Ship only the winners
Use <picture> only where a next-gen format actually won. For the screenshot, that's AVIF first, WebP second, and the JPG as the fallback every browser can show:
<picture>
<source srcset="/img/browser-screenshot.avif" type="image/avif">
<source srcset="/img/browser-screenshot.webp" type="image/webp">
<img src="/img/browser-screenshot.jpg" alt="Arc browser showing a Wikipedia article"
width="2880" height="1628" loading="lazy" decoding="async">
</picture>
The browser uses the first <source> whose type it supports and skips the rest, so put the smallest one first. Keep width and height on the <img> so the layout doesn't jump while the image loads.
For the three photos, I'd skip <picture> and serve the compressed JPG. It was the smallest file, and it's one less format to keep in sync. Resizing before you compress matters more anyway, because a 4032 px photo in a 1200 px column is the bigger waste.
If JPG keeps winning for your photos too, PixSip's JPG compressor gets you there with one less click.
Top comments (0)