How to Convert Images to WebP in WordPress?

WebP images are typically 25-35% smaller than an equivalent-quality JPEG or PNG, which matters more than almost any other single optimization on a typical WordPress site, since images usually account for the largest share of a page's total download weight. WordPress has supported uploading and displaying WebP files natively since version 5.8, and every major browser has supported displaying them for years, so the only real work left is converting your existing image library and making sure new uploads get converted automatically going forward.

This guide covers three ways to get there: a plugin that handles conversion automatically (the right choice for most sites), the cwebp command-line tool for converting images yourself in bulk, and the underlying PHP hooks WordPress core provides if you want to build automatic conversion into your own theme or plugin.

What WebP Is and Why It's Worth Converting To

WebP is an image format developed by Google that supports both lossy and lossless compression, similar in purpose to JPEG and PNG but with noticeably better compression efficiency at an equivalent visual quality. In practical terms: the same photo that's 200KB as a JPEG might come in around 130-150KB as WebP, with no visible difference in quality at normal viewing sizes.

That difference compounds across every image on every page. A blog post with ten inline images saving 30% each isn't a marginal improvement, it's the difference between a page that struggles on a slow mobile connection and one that doesn't.

Method 1: Convert Automatically With a Plugin (Recommended)

For most sites, an image optimization plugin is the right tool for this, since it handles new uploads automatically going forward, converts your existing media library in bulk, and — critically — keeps the original file as a fallback for the rare visitor on a browser old enough not to support WebP.

Using ShortPixel

1. Install and activate ShortPixel Image Optimizer from the Plugins screen.
2. Go to Settings → ShortPixel, and under Advanced settings, enable Create WebP versions of the images.
3. Choose whether to also enable WebP delivery via .htaccess (or via a <picture> element, if your server doesn't support .htaccess rewrites), so visitors' browsers actually receive the WebP file instead of the original.
4. Under Bulk ShortPixel, run a bulk optimization on your existing media library to convert everything already uploaded.

Using Imagify

1. Install and activate Imagify, and connect it with a free API key from imagify.io.
2. Go to Settings → Imagify, and under Optimization formats, check Create WebP images.
3. Go to Media → Bulk Optimization and run it against your existing library.

Both plugins keep the original JPEG or PNG file alongside the new WebP version and serve WebP conditionally based on what the requesting browser supports, which means you never have to worry about a broken image for an outdated browser.

Method 2: Convert Existing Images in Bulk With cwebp

If you have shell access to your server (or want to convert images locally before uploading), Google's cwebp command-line tool does the same conversion without needing a plugin at all. It's part of the libwebp package, available via most package managers:

# Debian/Ubuntu
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

Convert a single image:

cwebp -q 80 photo.jpg -o photo.webp

The -q 80 flag sets the quality to 80 out of 100, a reasonable default that balances file size and visual quality; drop it lower (60-70) for further savings on images where quality matters less, like small thumbnails.

To convert every JPEG and PNG in your uploads folder at once, recursively:

find wp-content/uploads -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) -print0 |
while IFS= read -r -d '' file; do
    cwebp -q 80 "$file" -o "${file%.*}.webp"
done

This creates a .webp version next to every existing image without touching the originals, which you'll still need for browsers that don't support WebP and as a source if you ever need to re-encode at a different quality later.

Method 3: Serve WebP With a Fallback Using picture>

Once you have both formats on disk, the picture element lets the browser choose the best one it supports, without needing any JavaScript or server-side user-agent detection:

<picture>
  <source srcset="/wp-content/uploads/2026/09/photo.webp" type="image/webp" />
  <img
    src="/wp-content/uploads/2026/09/photo.jpg"
    alt="Description of the photo"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>

The browser evaluates each source in order and uses the first one whose type it supports; if none match (a very old browser with no WebP support), it falls back to the img tag's own src automatically. This is a safer approach than replacing .jpg references with .webp directly, since it never risks a broken image for any visitor.

To apply this pattern automatically across your whole site without hand-editing every image tag, hook into the wp_get_attachment_image output and rewrite it:

add_filter( 'wp_get_attachment_image', function ( $html, $attachment_id, $size, $icon, $attr ) {
    $file_path = get_attached_file( $attachment_id );
    $webp_path = preg_replace( '/\.(jpe?g|png)$/i', '.webp', $file_path );

    if ( ! file_exists( $webp_path ) ) {
        return $html;
    }

    $webp_url = preg_replace( '/\.(jpe?g|png)$/i', '.webp', wp_get_attachment_url( $attachment_id ) );

    // Wrap the original <img> tag in a <picture> element with a WebP source.
    return sprintf(
        '<picture><source srcset="%s" type="image/webp" />%s</picture>',
        esc_url( $webp_url ),
        $html
    );
}, 10, 5 );

This only wraps images that actually have a matching .webp file already generated on disk (via Method 2 above, for example), leaving everything else untouched, so it's safe to add even before you've finished converting your whole library.

Automatically Converting New Uploads Going Forward

Rather than remembering to run cwebp by hand every time you upload a new image, hook into wp_generate_attachment_metadata, which WordPress fires after it finishes generating an image's thumbnail sizes, to convert the original upload right away:

add_filter( 'wp_generate_attachment_metadata', function ( $metadata, $attachment_id ) {
    $file = get_attached_file( $attachment_id );

    if ( ! preg_match( '/\.(jpe?g|png)$/i', $file ) ) {
        return $metadata;
    }

    $webp_path = preg_replace( '/\.(jpe?g|png)$/i', '.webp', $file );

    $editor = wp_get_image_editor( $file );

    if ( ! is_wp_error( $editor ) && method_exists( $editor, 'save' ) ) {
        $editor->save( $webp_path, 'image/webp' );
    }

    return $metadata;
}, 10, 2 );

wp_get_image_editor() returns WordPress's built-in image editor abstraction (backed by either the Imagick or GD PHP extension, whichever your server has available), and both support saving directly to image/webp as of WordPress 5.8, so no external conversion tool is required on the server itself, only the appropriate PHP extension with WebP support compiled in.

Frequently Asked Questions (FAQ) About Converting Images to WebP in WordPress

Conclusion

Converting to WebP is one of the highest-leverage changes you can make to a WordPress site's performance, since image weight is usually the largest single contributor to page size, and the format itself requires no visual compromise at typical quality settings. For most sites, a plugin like ShortPixel or Imagify is the fastest path: it converts your existing library in bulk, handles new uploads automatically, and manages the fallback for unsupported browsers without you touching a single template file.

If you'd rather own the process directly, cwebp handles bulk conversion from the command line, and WordPress's native wp_get_image_editor() support (since 5.8) means you can hook automatic conversion into every future upload with a small snippet of PHP, no external service required.

Here are a few additional resources if you want to go deeper:

• WordPress Developer Reference: wp_get_image_editor() — the image editor abstraction used for native WebP support.
• Google WebP Documentation — format details, the cwebp tool, and compression comparisons.
• web.dev: Serve images in next-gen formats — why PageSpeed Insights flags this and how to fix it.