WebP and AVIF images: the same look, fewer kilobytes

What you'll achieve

• choose the right format for each image;
• make images the right size and quality;
• add them to the page so they show in any browser.

Which format to choose

Browser support: WebP works in every browser in use today. AVIF works in current versions of Chrome, Edge, Firefox and Safari; an old iPhone or Mac that hasn't been updated may not display it. That's why, with AVIF, you also add a fallback (step 6).

The steps

A. Prepare the image

1. Resize it to the width you need. A photo displayed at 800 pixels needs at most 1600 (for high-density screens), not the 6000 your phone produces.
2. Export to WebP or AVIF. Current photo editing programs offer WebP under Export or Save as. Online, without installing anything, you can use https://squoosh.app: it's free, from Google, and the image is processed in your browser, not uploaded to a server.
3. Choose the quality. For photos, a quality of around 75–80 for WebP and 50–65 for AVIF usually looks the same as the original. Compare the two versions at actual size, not zoomed in.
4. Check the file size. As a guide: a full-width photo, around 150–300 KB; an image within the text, under 150 KB; a thumbnail, under 50 KB.

B. Add it to the page

5. A single format, WebP — it works everywhere, so it's enough:

   <img src="/img/sala.webp" width="1600" height="900" alt="The clinic's treatment room">

   width and height tell the browser the aspect ratio, so it reserves the space and the page doesn't jump (CLS).

6. AVIF with a fallback — the browser picks the first one it understands:

   <picture>
     <source srcset="/img/sala.avif" type="image/avif">
     <source srcset="/img/sala.webp" type="image/webp">
     <img src="/img/sala.jpg" width="1600" height="900" alt="The clinic's treatment room">
   </picture>

7. Images further down the page get loading="lazy", so they only download when the visitor reaches them. The first large image, at the top of the page, doesn't: it has to load immediately. You can add fetchpriority="high" to it.

C. Upload them to the server

8. Upload the files to the website's folder, from Enhance (the “Files” tab, see Uploading a website with File Manager) or via FTP (see Encrypted FTP (FTPS) with FileZilla: account and login details).
9. If an .avif file downloads instead of displaying, add this to the .htaccess in public_html:

   AddType image/avif .avif
   AddType image/webp .webp

For WordPress, image formats and settings are covered in Images in WordPress: size, format and loading.

If something doesn't work

• The image doesn't show at all in a browser. The browser doesn't know the format. Use <picture> with a JPEG or PNG fallback (step 6).
• The image looks pixelated or blotchy. The quality is too low. Export it again, with the quality 5–10 points higher.
• The WebP file is larger than the JPEG. This happens with very small or already heavily compressed images. Keep the smaller version.
• The image looks stretched or squashed. The width and height in the code don't have the same aspect ratio as the file. Enter the image's real values.