How to Use AVIF Images in WordPress

With AVIF WordPress, the Media Library is only the middle of the workflow. Source preparation happens before upload, WordPress creates derivatives on the server, and the theme or browser decides what is actually requested on the front end.

WordPress 6.5 added AVIF support, but image processing still depends on AVIF support in the server-side image library. WordPress Site Health can expose supported media formats.

Native upload support does not automatically create a dual-format fallback system for every image. Decide whether your site will upload AVIF directly, generate it through a plugin/CDN, or keep a simpler WebP workflow.

Short version: Start with the image’s actual job, remove waste the layout cannot use, encode once from a good source, and verify the result in the real page. Smaller is useful only while the image remains visually and technically fit for purpose.

Check whether WordPress can process AVIF

In WordPress admin, open Tools → Site Health → Info → Media Handling. Look at the supported image formats reported by the server-side media library. If AVIF is missing, the browser may still display AVIF, but WordPress may be unable to create the resized derivatives your theme expects.

WordPress 6.5

WordPress 6.5 added native AVIF upload and processing support when the hosting environment’s image library supports AVIF. Core documentation points site owners to Tools → Site Health → Info → Media Handling to inspect supported formats.

That dependency matters because WordPress uses server-side image libraries such as Imagick or GD to create intermediate sizes. A browser may display AVIF perfectly while the server still lacks the capability needed to resize an uploaded AVIF.

Server library

Treat a successful browser preview and successful WordPress processing as separate tests. WordPress must be able to create intermediate sizes through the host’s image library; otherwise the original format can appear supported while the normal responsive workflow is incomplete.

Site Health

Upload

This part of AVIF WordPress is best understood as a trade-off rather than a fixed rule. The right choice depends on the visual role of the image, the publishing environment, and what happens to the file after it leaves the editor.

Use representative files and verify the result in the real destination. A workflow that looks good on one sample can fail on transparency, fine text, gradients, noisy photographs, or very large source dimensions.

Responsive images

Responsive image markup lets the browser choose from multiple source widths rather than downloading one oversized file for every viewport. In HTML, srcset lists candidates and sizes describes the expected rendered width under layout conditions.

Google recommends retaining a normal src fallback even when using srcset or <picture>. That helps browsers and crawlers that do not understand every responsive-image attribute and provides a stable discoverable URL.

Open the rendered page—not only the Media Library—and inspect the final <img> markup. WordPress may have generated multiple files correctly while the theme’s sizes value still causes the browser to choose a larger candidate than the layout needs.

Compatibility

Browser compatibility is only one layer of format support. A production workflow can also depend on CMS upload validation, server image libraries, CDN transformations, social preview systems, email tools, editors, and downstream exports.

For a public site, choose a format strategy that the full stack can generate, store, resize, cache, and serve predictably. Modern browser support does not eliminate the need to test those other layers.

Troubleshooting

The fastest way to troubleshoot image problems is to identify which layer is failing: source dimensions, encoding, transparency, metadata, browser selection, network scheduling, CMS processing, or layout. Changing quality blindly can mask the real cause.

Keep a known-good original and change one variable at a time. Compare dimensions, MIME type, file bytes, visual result, and the browser’s network request so you can explain why an output changed.

Worked example: from upload to rendered page

For AVIF WordPress, suppose an editor uploads a 4,000-pixel photo to a WordPress article that displays images in a 760-pixel content column. WordPress may generate intermediate sizes, but the final result still depends on the theme’s srcset and sizes markup and on which candidate the browser selects. If the original was needlessly huge, the site also paid the storage and processing cost before the browser ever made that choice.

For AVIF WordPress, inspect all three stages: the source you upload, the derivatives WordPress creates, and the final request made by the browser. That end-to-end view is more reliable than judging the Media Library alone.

Practical takeaway

For AVIF WordPress, make one decision at a time and verify it in the final destination. Use the page’s actual dimensions, content type, compatibility needs, and user-visible result as the constraints. The goal is not to win a synthetic file-size contest; it is to publish an image that is efficient, understandable, and reliable for its job.

Try it on a real image

Use the compressor to apply this article to a real source image. Create an AVIF and test The image operation runs in your browser, which makes it practical to compare dimensions, format, output bytes, and visual quality without first sending the selected image to a remote compression endpoint.

Continue reading

Frequently asked questions

Does WordPress support AVIF?

WordPress supports AVIF from version 6.5 when the hosting environment’s media library supports AVIF. Check Tools → Site Health → Info → Media Handling.

What version?

For AVIF WordPress, choose from the image’s visual role, compatibility requirements, and the measured result rather than a generic rule.

Why won’t AVIF upload?

A web tool can process files locally or upload them to a server. For sensitive images, use a tool with a clear local-processing architecture and verify network behavior when necessary.

Is AVIF better than WebP?

For AVIF WordPress, choose from the image’s visual role, compatibility requirements, and the measured result rather than a generic rule.

Editorial note

Image formats, browser behavior, WordPress media support, and search guidance can change. This article is written to distinguish durable principles from version-specific behavior; version-sensitive claims should be rechecked during scheduled content refreshes.

Sources and further reading

Continue the series8 parts