How does WebP and AVIF delivery work?

2 min read · Last updated June 2026

SlashImage saves smaller WebP and AVIF copies of each image and hands every visitor's browser the best format it can open, falling back to your optimized JPEG or PNG automatically.

What gets created

When SlashImage optimizes an image, it optimizes the JPEG or PNG in place and saves WebP and AVIF copies next to it. A photo.jpg ends up with a photo.jpg.webp and a photo.jpg.avif sitting alongside it in the same folder. Your posts and pages still point at photo.jpg; delivery is what swaps in the smaller modern version when it can.

The picture tag is the default

Out of the box, the plugin uses picture tag delivery. It wraps each image in a <picture> element that lists the modern versions first and your JPEG or PNG last:

html
<picture>
  <source srcset="photo.jpg.avif" type="image/avif">
  <source srcset="photo.jpg.webp" type="image/webp">
  <img src="photo.jpg" alt="A friendly dog">
</picture>

The browser reads the list top to bottom and downloads the first format it understands. A recent browser takes the AVIF, a slightly older one takes the WebP, and a very old browser ignores both and loads photo.jpg, your optimized JPEG or PNG. The browser does the choosing, so each visitor gets a format it can actually display.

Every size is mirrored

WordPress serves different image sizes to phones, tablets, and desktops through a list called srcset. The plugin mirrors that list for the modern formats, so a phone gets a small AVIF and a desktop gets a large one. It only adds a modern version for a size when that file was actually created, so a missing size falls back to that size's JPEG or PNG instead of breaking the whole image.

The JPEG or PNG is the last fallback

Your optimized JPEG or PNG is always the last item in the list, and any browser that cannot open WebP or AVIF loads it automatically. Nothing needs to be configured for that to work, and nothing breaks on older devices. (Your untouched original is kept separately as a backup that restore puts back.)

See also

Was this helpful?