WebP and AVIF images in WordPress: conversion without a plugin

WordPress 4 min read

A common recommendation from PageSpeed Insights is: “Serve images in modern formats”. WebP is typically 25–35 per cent smaller than JPEG whilst maintaining the same visible quality; AVIF is even smaller, but takes longer to generate. You do not necessarily need a plugin for this: WordPress’s own image editor can generate thumbnails of uploaded JPEG and PNG images in WebP or AVIF format as well.

We tested the configuration described in this article on a test website hosted on a cPanel hosting account.

What features does the hosting service offer?

On aWh’s cPanel servers, the PHP image handler (GD) supports both WebP and AVIF formats, so WordPress generates both. You can check this in your website’s directory using WP-CLI:

cd ~/public_html
wp eval 'foreach ( [ "image/webp", "image/avif" ] as $m ) echo $m, ": ", wp_image_editor_supports( [ "mime_type" => $m ] ) ? "igen" : "nem", PHP_EOL;'

On the ‘Select PHP Version’ interface, you can also enable the imagick extension (PHP extension management); WordPress will select this instead of GD, and it uses less PHP memory when handling large images.

You cannot run external programs (such as cwebp or vips) via PHP on our servers, as the exec function and similar functions are disabled for security reasons. Code snippets from older guides that call a command-line converter will therefore not work here; however, WordPress’s own image editor does work.

Enabling WebP

Create a ‘must-use’ plugin in the file wp-content/mu-plugins/kep-formatum.php (create the mu-plugins folder if it does not exist; you can also do this via the cPanel File Manager):

<?php
/**
 * Plugin Name: JPEG és PNG képek mentése WebP formátumban
 */
add_filter( 'image_editor_output_format', function ( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
    $formats['image/png']  = 'image/webp';
    return $formats;
} );

Must-use extensions are loaded automatically; there is no need to enable them, and they appear in a separate group (Must-Use) in the extension list.

Here is what our test looks like using an uploaded JPEG:

kep.jpg              <- az eredeti, változatlanul megmarad
kep.webp             <- teljes méretű WebP-másolat
kep-150x150.webp
kep-300x188.webp
kep-768x480.webp
kep-1024x640.webp
kep-1536x960.webp

WordPress now includes WebP versions in posts, and the srcset attribute points to these. The original JPEG remains available for download.

For AVIF, replace image/webp with image/avif. AVIF produces smaller files, but encoding is slower, so uploading large images takes longer. Modern browsers support both formats.

Existing images

This setting only applies to new uploads. You can regenerate thumbnails for existing images using WP-CLI:

wp media regenerate --yes

Please note: the regeneration process deletes the old JPEG thumbnails and creates WebP versions in their place (in the test, kep-300x188.jpg was replaced by kep-300x188.webp). If the content of posts includes the resized filenames of images (for example, kep-1024x640.jpg, as entered by both the block editor and the classic editor), these filenames will no longer exist. Due to the srcset attribute, browsers will generally load the WebP version, but the filename written in the content will return a 404 error, and the old image filenames referenced from elsewhere will also break. Therefore:

  • First, try it out on a staging copy and have a look through some old posts;
  • or leave the old images as they are and ensure that only new uploads are in WebP format;
  • Alternatively, use the [wp search-replace command](/kb/wordpress/replacing-urls-after-a-domain-change-with-wp-search-replace) to replace the titles in the content, starting with a test run.

Do not run a full media library regeneration (WordPress backup) without first taking a backup.

With a plugin

If you do not wish to write code, or if you want to serve your existing images in WebP format without changing their URLs, an image optimisation plugin (such as Converter for Media, EWWW Image Optimizer or Imagify) will generate a WebP version alongside the original and deliver it to the browser either via a <picture> element or a rewrite rule. A few things to bear in mind:

  • Where does the conversion take place? Plugins that send data to an external service do not use up storage space, but your images are transferred to a third party. Plugins that convert images locally use the hosting server’s resources; the initial processing of a media library containing several thousand images may exceed CloudLinux’s resource limits, so run it in small batches during periods of low traffic.
  • Hosting: a new file is created for every image and every thumbnail. Check the ‘Disk Usage’ and ‘File Usage’ figures on the cPanel homepage (inodes).
  • Caching and CDN: if the plugin serves WebP to a browser requesting JPEG at the same URL (based on the browser’s Accept header), the cache must also take this header into account; otherwise, an older browser may receive WebP. This is not an issue with the <picture>-based solution.

If the website is hosted behind Cloudflare, the image optimisation feature in the paid plans carries out the conversion via the CDN, so no configuration is required on the hosting server.

Verification

Open a page in your browser, filter by ‘Images’ in the ‘Network’ tab of the developer tools, and check the ‘Type’ column: it should be webp or avif. From the command line:

curl -s https://pelda.hu/ | grep -o 'wp-content/uploads/[^" ]*\.\(webp\|avif\)' | head -5

Then run the PageSpeed Insights test again. As well as image size, the article on speeding up WordPress provides further tips on optimisation.

Back: WordPress articles (43)