WebP or AVIF for WordPress? Test the complete image journey

Separate format support from workflow support

WordPress added core AVIF support in version 6.5. Its traditional server-side processing path depends on support in the configured image library. The fact that a visitor’s browser can display AVIF does not establish that your host can resize it.

The newer WordPress 7.1 client-side media developer note describes an additional path in compatible browsers, with fallback to server processing when necessary. That changes the diagnosis: check the installed version and active processing path instead of repeating that every successful AVIF upload proves server-side support. Plugins that process metadata or synchronize files also need verification.

Record WordPress version, authoring browser, image-optimization plugin, CDN and the media-handling information available in Site Health. These are separate parts of the chain. A change to any one can explain why an image worked last month and behaves differently today.

Build a representative image set

Select actual types of content your site publishes, with permission to use them. For an editorial website, a useful set includes a photograph with gradients, a screenshot containing small interface text, a flat illustration and a logo with transparency. Keep the original files unchanged.

The MDN format guide explains the different characteristics of common web formats. Rather than treating a format’s reputation as a result, compare the appearance and delivery of your own exports. Compression settings are not necessarily comparable numerically across encoders or formats.

Export candidate files at the same pixel dimensions and compare them at the size readers will see. Inspect edges, fine text, gradients, transparent backgrounds and areas around the logo. Then examine the full-size version to understand what was discarded. The winning export may differ between a photograph and a diagram.

Use visible quality as a constraint

Decide what must remain legible before measuring savings. A screenshot that explains a setting needs clear labels. A branded illustration should retain the official mark’s shape and clear space. A photograph may tolerate compression artifacts that would be unacceptable in a price table.

Do not stretch logos to fit a preferred aspect ratio or recolor them to disguise poor contrast. Use an appropriate background and a container that preserves the artwork. If an article card crops an image with object-fit: cover, place essential artwork in a tested safe area or use a composition intended for that crop.

Record file size only after the candidate passes the visual check. A 40 KB image is not automatically better than an 80 KB image if the smaller one makes the article harder to understand. Your acceptance criterion should combine clarity, correct dimensions and reasonable transfer size.

Inspect responsive delivery in the browser

At a narrow mobile width and a desktop width, inspect the displayed image and the selected source. Confirm that the browser is not downloading a huge original for a small card when an appropriate responsive size should be available. Also check the high-density screen case if it matters for your audience.

Look at the actual response content type and decoded image rather than trusting the filename extension. An optimization layer may negotiate formats or use a different underlying file while preserving a familiar URL. That can be legitimate, but it means the URL alone is not your result.

If the page is slow, separate image transfer from other causes. An enormous background image, an oversized layout, delayed discovery or a blocking script can dominate the experience even after a format change. Use a repeatable page and network condition before attributing improvement to AVIF or WebP.

Check the CDN and cache variants

When a CDN or plugin serves different representations, verify that each supported request receives a compatible image. Test the public hostname with the cache warm and after a controlled purge of only the test asset, if your system requires it.

Do not add negotiation rules from an unrelated tutorial to a live server just to make a file extension look modern. The cache must distinguish variants appropriately, and the origin must retain a valid fallback where one is promised. A misconfigured cache can serve one visitor’s negotiated format to a different client.

Also test CSS background images, gallery lightboxes and content generated outside the normal WordPress image block. They may not use the same markup or optimization path as an article hero. Treat each as a separate consumer rather than assuming an image plugin covers everything.

<picture>
  <source srcset="cover.avif" type="image/avif">
  <source srcset="cover.webp" type="image/webp">
  <img src="cover.jpg" width="1200" height="800"
       alt="Diagram showing the three stages of the publishing workflow">
</picture>

Test social sharing as a separate journey

A social-preview service is not the same consumer as a visitor’s browser. Inspect the page’s actual Open Graph and other sharing metadata, identify the declared image URL and use the relevant platform’s preview tool where available.

If a preview consumer does not accept your chosen format or cached a failed request, a separate supported sharing image may be appropriate. A JPEG or PNG fallback can be practical for that role, but verify the platform’s current requirements rather than assuming a universal restriction. Keep the sharing composition and article cover recognizably related.

Check anonymous access to the declared URL, redirects, dimensions and response type. A correct-looking editor preview does not prove the public metadata points to the same image. Do not regenerate the entire library to fix a single stale sharing tag.

Renaming a .jpg file to .avif does not convert its contents. Keep a genuine export or conversion step in the workflow and verify the resulting file can be decoded. If the extension, response type and displayed result disagree, investigate that mismatch before adding the asset to an automated publishing pipeline.

Expand gradually and preserve rollback

Once the small set passes, apply the chosen approach to a limited group of new articles. Retain the original attachments and a mapping from each article to its previous featured image. Avoid deleting source files until backup restoration and all dependent uses have been checked.

If you later regenerate thumbnails or change output-format defaults, take a backup and test in staging first. Confirm the disk and processing budget, the behavior of old URLs, and whether existing content references files directly. Bulk image work can affect more than the visible homepage.

Your final decision may be AVIF for selected photographs, WebP for other editorial artwork and an established fallback for a particular external consumer. That is a coherent result. Choose the format that survives the whole journey with clear content and manageable maintenance, rather than forcing every image into one answer.