How to Convert Images to WebP in WordPress (Free, CDN)

Is PageSpeed Insights repeatedly highlighting your images for having large file sizes? You seek to reduce these without incurring costs or employing a content delivery network (CDN) to manage files. Opting for a CDN just to compress a handful of JPEGs resembles renting a storage unit for a single bicycle.

Instead, consider converting the images in your Media Library to WebP. This allows you to maintain the files on your own hosting server and serve them directly from there. The free Robin Image Optimizer plugin facilitates this without charge, requiring no additional accounts, API keys, or limitations on how many images you may convert.

This guide outlines what WordPress can achieve with WebP natively, provides steps for converting both new and existing uploads using Robin, and explains how to verify that visitors are served the WebP images. It concludes with a candid discussion regarding scenarios where alternative tools may be more suitable.

Let’s get started with the image conversion.

DISCLAIMER: Robin Image Optimizer is part of the Themeisle product family. This tutorial features the free version available on WordPress.org.

Why Convert Images to WebP?

WebP is Google’s optimised image format designed for the web. According to Google’s analysis, lossy WebP images are approximately 25–34% smaller than JPEGs at equivalent quality levels, while lossless WebP files are 26% smaller than PNGs. Furthermore, WebP supports transparency, making it a suitable substitute for PNGs.

The size reduction varies with each image, and you can check the size of each converted file in your Media Library (Step 5 illustrates where to look). Smaller image sizes lead to faster loading pages, which is particularly significant for users on mobile devices with limited connectivity.

Concerns about browser compatibility are diminishing: 97% of current browsers support WebP, including Chrome, Edge, Firefox, and Safari from version 14 onward.

For a deeper dive into the WebP format, visit What Is WebP.

What WordPress Supports with WebP Natively

Since version 5.8, WordPress has allowed WebP uploads. You can convert an image file locally and upload it as a WebP. However, WordPress does not automatically convert your existing JPEG and PNG files and leaves those intact in your library.

The free Modern Image Formats plugin caters to new uploads. It generates a WebP (or AVIF, if supported by your server) version of each image uploaded post-installation. To convert legacy images, you’ll need tools like Regenerate Thumbnails or WP-CLI, which typically only creates resized copies in the new format, while retaining the JPEG as a fallback.

This approach is ideal for new sites; however, for sites with extensive historical uploads, a comprehensive conversion of the library is required, along with retaining the originals for fallback. Robin can do all this seamlessly.

Step 1: Install the Free Robin Image Optimizer Plugin

Robin has been successfully installed on over 100,000 WordPress sites and boasts a commendable rating of 4.4 out of 5 on WordPress.org.

1. In your dashboard, navigate to Plugins → Add Plugin.
2. Search for Robin Image Optimizer.
3. Click Install and then Activate.

You will not encounter a sign-up or requirement for a key. Instead, a menu for Robin Image Optimizer will appear in your sidebar.

Step 2: Review the WebP Settings

Go to Robin Image Optimizer → Settings. A fresh installation will have the necessary settings enabled by default:

• Convert Images to WebP creates a WebP version for each JPG, PNG, or GIF.
• Auto optimisation on upload manages every new image soon after it is uploaded.
• Backup images retains the original files, allowing for restoration when needed.

Convert Images to AVIF (Pro) is displayed directly below. You can leave this unselected if you are using the free version.

The plugin also compresses the original JPEG or PNG images. The default Compression mode is Lossless, which minimally affects the original file size. Opting for Lossy is typically better for most sites: on our testing site, we reduced ten images from 1.60 MB to 921.50 KB, a reduction of 43.7%. Be sure to click Save changes at the bottom of the settings page.

Step 3: Determine How WebP Files Are Delivered to Visitors

Robin saves each WebP version alongside the original, named as photo.jpg.webp next to photo.jpg. Your webpages will still reference the JPEG, necessitating the plugin to instruct browsers to access the new file. The setting Delivery mode for converted images, found on the same page, dictates how this occurs:

Delivery Mode	Tier	Mechanism	Best Use Case
Replace tags with tags (default)	Free	Encloses each image in a tag that specifies both WebP and the original formats, allowing each browser to select the one it supports	Suitable for most sites, regardless of host
Replace image URLs	Free	Directs each image URL to the converted file, even in inline styles	Themes that alter layout with tags
Redirection (via .htaccess)	Free	Keeps your pages unchanged; the server serves the WebP version when a browser requests the JPEG	Apache Servers only

It’s advisable to maintain the default setting unless you have specific reasons to alter it. This method requires server setup, is compatible with page caching, and retains the original images for browsers that do not support WebP.

Below the three options, click Test delivery. Robin will make a request for a test image in the manner a browser would, and indicate what it received. A green WebP served signifies that the files are reaching visitors.

PRO TIP: If some images appear misaligned after enabling delivery, it is possible that your theme’s CSS styles the tag by its exact position. Switch to Replace image URLs and check the page again.

Step 4: Convert the Images Already in Your Media Library

Robin will automatically take care of new uploads from this point onward. For images already uploaded prior to installing the plugin, initiate a bulk conversion:

1. Navigate to the Bulk optimisation tab and select Media library.
2. Click Start Optimization.
3. Review the counts in the window that appears, then choose Optimize now or Scheduled optimisation.

The window will indicate how many images, thumbnails, and WebP conversions are queued. Use the Filter by upload date option if your library is extensive and you want to concentrate on newer uploads.

• Optimize now is the quickest method, but the tab must remain open until it completes; closing it will halt the process.
• Scheduled optimisation can work through the library in the background, allowing you to close the tab and return later.

Have a few hundred images? Choose Optimize now and grab a cup of coffee. If you have thousands, scheduling is more manageable, as WordPress executes scheduled tasks incrementally when site visitors arrive. On less active sites, this background processing will be slow.

Upon completion, the dashboard will display the before-and-after file sizes, along with logs for each image processed.

Step 5: Review the Results

Navigate to Media → Library and switch to the list view. The Robin Image Optimizer column will display the new file size, the WebP file dimensions, and the original size for each image.

Rows may show the WebP sizes. WebP files aren’t necessarily smaller for every image; if the WebP version would exceed the size of the optimised JPEG, Robin will retain the JPEG and serve that instead. In our example, one out of ten images fell under this criterion. Each row also includes a Restore original option should you ever wish to revert an image to its original form.

To determine what a visitor actually downloads, open a page in a private browsing window, right-click, and select Inspect. Open the Network tab, click the Img filter, and refresh the page. The Type column should indicate webp for converted files.

If you see jpeg appearing instead, investigate these areas first:

• Your page cache: Clear your caching plugin or CDN so visitors get refreshed pages reflecting the changes.
• Background images within CSS: Hero sections and page builder backgrounds often reside in stylesheets, which the method may not access. The replace image URLs option handles inline styles.
• Images outside the Media Library: Logos hardcoded in your theme’s files do not exist in the library, hence Robin does not convert them.

What the Free Version Offers and Pro Features

This guide fully utilises features available in the free plan. The primary incentive to upgrade is access to AVIF, a more recent image format built on the AV1 video codec. AVIF files are typically smaller than WebP while maintaining comparable visual quality, making them ideal for image-dense pages. However, they require more time to process, and only about 96% of browsers currently support them (with Safari only from version 16).

Robin effectively manages this transition. When AVIF is enabled, the tag prioritises AVIF, then WebP, and finally the original, allowing each browser to select the first format it can render. For an in-depth look at the differences between the two formats, take a look at the AVIF vs WebP comparison.

Robin Pro is priced at £49 per year and allows for coverage of up to 50 sites.

Understanding Limitations: When to Consider Alternative Tools

With Robin, all your images are retained in your Media Library and served directly from your hosting server. The actual conversion runs through Robin’s optimisation service: the plugin dispatches the images for processing and integrates the outcomes back into your library. This functionality makes it compatible with budget shared hosting without complex server settings. If your policy prohibits images leaving your server, you should consider plugins that convert files locally:

• Modern Image Formats converts new uploads using your server’s native image library. It’s free but entails managing existing images and fallback delivery yourself.
• Converter for Media carries out conversions to WebP directly on your server, including existing files, and serves them via server rewrite rules.

If your audience is globally dispersed or you need images resized dynamically for various screens, a CDN may be a better fit. Optimole, another product from Themeisle, compresses and resizes images in the cloud specifically for each visitor, serving them from a global CDN. Our image CDN vs local compression analysis provides a comparative look at these two methodologies.

For free WebP files stored in your library while retaining the originals for fallback, Robin offers a straightforward solution.

Conclusion

To summarise the entire process:

• Install the free Robin Image Optimizer plugin.
• Ensure Convert Images to WebP is activated and switch the compression mode to Lossy.
• Retain the delivery mode and click Test delivery.
• Perform a bulk conversion on your existing library: Opt for Optimize now for small libraries, or Scheduled for larger ones.
• Examine the Media Library column and clear your cache if visitors continue to see JPEG images.

For further information on image formats in relation to PageSpeed, consult the next-gen image formats guide. The image optimizer plugins comparison evaluates a broader selection of options.

Have you transitioned your site to WebP yet, or is something preventing you from doing so? We invite you to share in the comments!

FREE GUIDE

4 Essential Steps to Speed Up Your WordPress Website

Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%.

Yay! You made it to the end of the article!