Choose WebP or AVIF by comparing exports of your own image at its actual display size. AVIF can be an attractive option for photographic delivery, while WebP offers both lossy and lossless workflows. Neither extension guarantees the smallest file or the best-looking result.
Which should you try first?
| Asset | Starting comparison | Inspect before choosing |
|---|---|---|
| Photograph or product photo | AVIF and lossy WebP | Texture, gradients, bytes and encode time |
| Screenshot with small text | PNG and lossless WebP | Letter edges and exact pixel detail |
| Transparent cutout | PNG, WebP and AVIF | Alpha edges over light and dark backgrounds |
| Vector logo | Keep SVG as a candidate | Actual artwork and receiving platform |
Compression and quality: use comparable exports
A quality value of 80 in two encoders does not mean equal visual quality. Start from the same source, use the same output dimensions, and adjust each encoder until both outputs meet your quality requirement. Then compare bytes. Keep a note of encoder version, quality setting, effort or speed preset and metadata handling so the comparison can be repeated.
For a small test, select one textured photo, one smooth gradient, one screenshot and one transparent cutout from your own assets. Record results separately; an average can hide the image that becomes worse. This is a test method, not a measured claim that one format saves a fixed percentage.
Transparency, animation and HDR
WebP's container specification includes alpha and animation. The AVIF specification supports alpha, image sequences and HDR. Format capability does not guarantee that your encoder, CMS or viewer supports every feature. Test the exact animated or HDR file in the intended application.
Both formats can be used for transparent assets. Export settings still matter: inspect shadows and soft edges after conversion. For the underlying check, see how to verify transparency.
Serve alternatives with the picture element
This illustrative HTML uses three exports of the same photograph. Replace the filenames, dimensions and alternative text with your own:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="1200" height="800" alt="Mountain lake">
</picture>The browser uses the first suitable source according to the markup and its support; it does not compare all three files for visual quality or byte size. The MDN picture reference explains source selection. For a transparent asset, use a PNG fallback instead of JPEG.
Check delivery as well as file size
Before changing the whole image library, open the test page on a phone and a desktop, inspect the selected resource in browser developer tools, and measure loading on the connection you care about. A smaller download alone does not prove a faster page: discovery, priority, decoding and layout also affect when an image appears.
If loading behavior matters, read AVIF progressive decoding. For vector artwork, start with SVG vs PNG for logos; for transparent raster delivery, compare transparent image formats.
