WordPress WebP and AVIF optimization: setup guide

A WordPress image optimizer with WebP or AVIF support needs to create suitable files and make the page deliver them. WordPress can accept these formats in supported environments, but an existing JPEG library does not automatically become a working modern-format delivery system.

Choose a few representative images, compare output at the same dimensions, and verify the browser response. Keep the original sources so you can change format or quality later without re-encoding an earlier compressed copy.

When WebP or AVIF helps

MDN's image format guide describes WebP and AVIF as formats with modern compression and transparency support. Their usefulness depends on image content, encoder settings, and the browsers or tools that consume the file.

For photographs, compare the same scene in JPEG, WebP, and AVIF at a visually acceptable setting. Record dimensions and encoded bytes for each trial, then inspect the browsers and downstream tools that must use the result. Keep a compatible fallback where that workflow needs it. Neither modern format gives a fixed percentage saving for every image.

For screenshots and diagrams, inspect small lettering and sharp color boundaries. For transparent artwork, view the result against both light and dark backgrounds. A photographic quality preset can damage details that are obvious in a graphic.

Do not compare quality values as though 80 meant the same thing in every encoder. Match the visible quality and dimensions first, then compare bytes. A smaller image is only a useful replacement if it meets the requirements of its placement.

Check WordPress and image-processing support

WordPress introduced WebP support in version 5.8 and AVIF support in version 6.5. Server-side image editing depends on the installed GD or Imagick capabilities. Check Tools > Site Health > Info > Media Handling, then test an upload and its generated sizes.

WordPress 7.1 adds a client-side processing path using WebAssembly in supported editor environments. Its media processing architecture describes browser processing and fallback behavior. Server-side imports and command-line regeneration still need the server's required encoding capability.

Test all operations your workflow needs. A file that uploads successfully through one browser path can still fail during later regeneration on a host with different codec support. A plugin using an external processing service can have different requirements from a local encoder.

Choose a conversion and delivery workflow

For new uploads, you can prepare WebP or AVIF outside WordPress and upload that file directly. WordPress can then generate its sizes when the processing path supports the format. The attachment's format and URLs reflect the uploaded file.

For an existing JPEG or PNG library, a converter can create alternatives while retaining a fallback. Another option is an image CDN that transforms the source when a delivery URL is requested. Decide whether you want generated files stored locally or transformed output supplied through the service.

ShortPixel's processing workflow can create WebP and AVIF files alongside optimized library files. Imagify's settings likewise distinguish next-generation image creation from display. Configure both stages and test the method used by your theme.

Choose a converter whose delivery method covers the images your pages actually render. Compare standard image blocks, featured images, galleries, and CSS backgrounds. The WordPress plugin comparison distinguishes format creation from delivery features. A conversion counter does not describe every output path.

Understand fallback and format negotiation

An HTML picture element can offer AVIF, then WebP, followed by a normal image fallback. The browser chooses a source it supports. MDN documents how source selection works.

This illustrative markup uses three versions of the same image at the same dimensions:

<picture>
  <source srcset="/images/workshop.avif" type="image/avif">
  <source srcset="/images/workshop.webp" type="image/webp">
  <img src="/images/workshop.jpg" width="1200" height="800"
       alt="A workbench with woodworking tools">
</picture>

Those example paths require actual files. In a WordPress implementation, use the attachment's real URLs and integrate responsive candidates for each format when needed. Putting one 1200-pixel file in each source does not by itself offer smaller mobile variants.

A CDN can negotiate an output format for the same delivery URL. Cloudflare's format=auto transformation option uses the client's supported formats to choose output such as WebP or AVIF. Your integration must request that transformed delivery path. The WordPress CDN guide explains the separate setup and cache checks.

When the extension stays unchanged, inspect Content-Type and the response data. Do not infer the delivered codec from the filename. For a custom server rewrite, ensure the cache distinguishes responses that vary by client capability, or use explicit alternative URLs. A cache that serves an unsupported response breaks the fallback.

Convert JPEG derivatives with a WordPress filter

A developer can use image_editor_output_format to request another output format when WordPress's image editor saves files. This example maps JPEG output to WebP when wp_image_editor_supports() reports WebP editing support:

add_filter( 'image_editor_output_format', function ( $formats ) {
    if ( wp_image_editor_supports( array( 'mime_type' => 'image/webp' ) ) ) {
        $formats['image/jpeg'] = 'image/webp';
    }

    return $formats;
} );

Place this in a site-specific plugin, an existing snippet manager, or a child theme, and test it on staging. The capability check makes this example conservative for server processing. It may leave JPEG output in place on a host where only the browser path can encode WebP.

The filter participates in image generation. It does not supply an additional JPEG fallback layer for every generated file, scan an old library immediately, or update hard-coded image URLs. WordPress may also create a converted full-size version when output-format conversion applies. Check attachment metadata and the URLs your templates request.

Changing 'image/webp' to AVIF requires checking AVIF support and testing the full workflow. Do not enable a new output policy on production solely because one sample upload succeeds.

Handle the existing library in a controlled batch

Back up uploads and the database, then convert a small set of attachments. Include an image used as both article content and a featured image. Check how your converter preserves originals, updates metadata, and handles files already optimized in another format.

Plan storage for alternative files and backups. Keeping JPEG, WebP, and AVIF versions can increase disk usage even when the visitor's download becomes smaller. Enable both modern formats only when the delivery path will use them.

If you use command-line regeneration, you need WP-CLI installed, shell access, and permission to write uploads. Confirm server codec support and test one attachment before a batch. The regeneration workflow explains the prerequisites and backup limits. Retain any old URLs still referenced outside the site. Avoid deleting JPEG or PNG files just because an alternative exists: a fallback, email template, feed, or external integration may still use them.

Verify the selected format on real pages

1. Load a public page while logged out, set the intended viewport, and disable browser caching before reloading. Use currentSrc to identify the selected image request in the Network panel.

2. Record its selected URL, response Content-Type, transferred bytes, and dimensions.

3. Check the intended fallback in a client that needs it, and inspect important third-party consumers such as an email workflow.

4. Repeat at a mobile width, including a CSS background or gallery item if the site uses them.

If old formats remain, inspect cached HTML, the selected responsive candidate, and any plugin exclusions. If colors or transparency change, return to the master and compare another encoder setting. The compression workflow provides a way to compare appearance and bytes without treating format conversion as proof of better output.

Choose output formats for assets stored in Vyso

For images managed in Vyso, CDN format transformations can produce WebP or AVIF output from the original asset without replacing it. A WordPress template or integration must request those delivery URLs and provide the format candidates or fallback that its clients need. Verify Content-Type and visible quality for each requested version; generating a modern format alone does not establish that every page uses it. Vyso is also developing a WordPress image plugin to connect WordPress publishing workflows with its media library; it is not available to install yet.