For most sites, WebP is enough and it is the easier one. AVIF often gives even smaller files on photographs, but it takes longer to produce and not every tool accepts it. The practical rule: use WebP as the main format; if you want to go further, add AVIF with a fallback for anyone who cannot show it.
The steps for moving from JPEG to WebP are already in image optimisation and WebP. This article is the comparison, and what to do when AVIF comes into the conversation.
The formats side by side
| Format |
Good for |
Worth knowing |
| JPEG |
Photographs, universal compatibility. |
Larger files. No transparency. |
| WebP |
Photographs and graphics, with or without transparency. |
Shown by current browsers. Some e-mail programs do not show it. |
| AVIF |
Photographs, where it often gives the smallest file. Supports transparency. |
Slower to produce. Not every tool or program opens it. Very old browsers do not show it. |
| SVG |
Logos and icons. |
Vector drawing: sharp at any size and almost weightless. |
Giving AVIF a fallback
The <picture> element lets the browser pick the first format it can show. If it knows none of them, it falls back to the plain image:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="800" height="600" alt="Describe the image">
</picture>
The width and height numbers are only an example. Always declare the real ones, so the page does not jump (see CLS). On WordPress you do not have to write this by hand: an optimisation plugin that converts and serves both versions handles the <picture> or the address swap for you.
Producing and confirming
| 1 |
Convert from the original, never from an already compressed copy. Squoosh (in the browser) lets you compare the result before downloading and pick AVIF or WebP. On the command line, on a computer of your own, there are cwebp (WebP) and avifenc (AVIF).
|
|
| 2 |
Upload both files to the site, or let the plugin generate them.
|
|
| 3 |
Confirm what the server delivers. In the browser, F12, Network tab, “Img” filter: the image’s content type should say image/avif or image/webp. If it says image/jpeg, the page is still using the old one.
|
|
| 4 |
Compare the page’s total weight before and after. If it did not drop, the format was not the problem: see LCP.
|
|
|
Converting is not the same as serving. If the theme writes the .jpg address straight into the page, the new file is never used. And AVIF generated in bulk during the same request that loads the page can take a lot of processor on the server: convert once, in advance.
|
|
Do not swap for the sake of swapping. Before thinking about AVIF, check that the images are the right size. A huge image in AVIF is still huge. Dimensions first, compression second, format last.
|
|
Converted your images and the page did not get lighter? Send us the address and we will tell you what the server is delivering.
Open a support ticket
|
RECOMMENDED PRODUCT Web hosting with cPanel Domain and SSL included, daily backups and the panel you already know. from £5.28/mo (3-year plan, with coupon) See plans |
Angola
Brasil
Kenya
Moçambique
Nigeria
Portugal
South Africa
United Kingdom
United States
International
