Images are usually the heaviest part of a WordPress page, and they are the first thing PageSpeed Insights flags when your score drops. Switching them to WebP is one of the quickest fixes you can make: same picture, a noticeably smaller file, and no visible difference for most visitors.
This guide covers how to use WebP images in WordPress four ways: native upload with no plugin, converting files yourself, plugins, and server or CDN delivery. You also get five free tools right on this page: an in-browser WebP converter, a <picture> tag generator, an upload-enable snippet generator for WebP, SVG and ICO, a server config generator for Apache, LiteSpeed and Nginx, and a bandwidth savings calculator.
Quick answer: WordPress has accepted WebP uploads natively since version 5.8, so you can add a .webp file in Media → Add New exactly like a JPG. What WordPress does not do on its own is convert your existing JPEG and PNG library, or serve a JPG fallback to browsers that cannot show WebP. For that you need a plugin, a CDN, or a few server rules, all covered below.
What Is WebP and Why Does It Matter for WordPress?
WebP is an image format built by Google for the web. One format covers what used to need three: lossy compression like JPEG, lossless compression with transparency like PNG, and animation like GIF. According to Google's WebP compression study, lossy WebP files are 25-34% smaller than comparable JPEGs, and lossless WebP files are about 26% smaller than PNGs. Google's WebP documentation adds that lossy WebP with transparency is typically around three times smaller than PNG.
Why that matters on a real site:
- Faster pages. Smaller images mean fewer bytes before the page looks finished, which helps Largest Contentful Paint, one of the Core Web Vitals.
- Cleaner audits. The "serve images in next-gen formats" recommendation in PageSpeed Insights and Lighthouse goes away once your images are WebP. Google's own web.dev guide to serving WebP recommends it.
- Lower bandwidth. Less data per visit helps mobile visitors and can trim hosting or CDN bills. Try the calculator below with your own traffic.
- Better SEO foundations. Speed is only one ranking signal, but a faster page also keeps people on it longer. Pair this with the basics in our beginner's guide to WordPress on-page SEO.
Browser and WordPress support
WebP works in Chrome, Edge, Firefox, Opera and Safari 14 or later (on macOS 11 Big Sur or newer). Current numbers are on Can I use, and global support is well above 95%. Very old browsers are why a fallback is still good practice. WordPress added native WebP upload support in version 5.8. If you are on an older core, update first. Our guide to the most common WordPress errors is a good checklist before you do.
How to Use WebP Images in WordPress: Four Methods
Pick the method that matches how much control you want. Most sites end up with a plugin or a CDN. Developers who manage their own server often prefer server rules.
| Method | Best for | Effort | Converts your existing library? | Fallback for old browsers? |
|---|---|---|---|---|
| Native upload | A few new images you convert yourself | Low | No | Only if you use a <picture> tag |
| Plugin | Most WordPress sites | Low | Yes, in bulk | Yes, automatic |
| Server rules | VPS, Nginx or LiteSpeed owners | Medium to high | No, files must already exist | Yes, via the Accept header |
| CDN | Busy or global sites | Low to medium | Yes, on the fly | Yes, automatic |
How to Upload a WebP Image in WordPress Without a Plugin
On WordPress 5.8 and later, no plugin is needed. Here is the short version:
- Convert your image to WebP with the free converter below, Squoosh, or the command line.
- In your dashboard go to Media → Add New Media File and drop the
.webpfile in, or add it straight from the block editor's Image block. - Insert it in a post as you would any other image, and fill in the alt text.
If you see "Sorry, you are not allowed to upload this file type", your WordPress is too old, a security plugin or host rule is blocking it, or you need the snippet in the next section. If the upload works but WordPress cannot create thumbnails, your server's image library may lack WebP support. Check Tools → Site Health → Info → Media Handling to see what GD or Imagick can do, and ask your host if WebP is missing. Large files can also fail on size limits, so see our guide to increasing the maximum upload file size.
Command line conversion with cwebp
Google's cwebp tool is the reference encoder. Quality 75 to 82 is a sensible range for photos, and lossless suits logos and screenshots.
# one photo, quality 80
cwebp -q 80 photo.jpg -o photo.webp
# lossless, for logos and graphics with transparency
cwebp -lossless logo.png -o logo.webp
# convert every JPG in a folder
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; doneMake WordPress generate WebP sizes automatically
WordPress core can create its resized copies in WebP if you tell it to. The image_editor_output_format filter does it. Add this to a child theme or a snippet plugin (see our list of code snippet tools for WordPress):
// Turn JPEG uploads into WebP sub-sizes
add_filter( 'image_editor_output_format', function ( $formats ) {
$formats['image/jpeg'] = 'image/webp';
return $formats;
} );
// Optional: set WebP quality (default is lower than most people want)
add_filter( 'wp_editor_set_quality', function ( $quality, $mime ) {
return 'image/webp' === $mime ? 80 : $quality;
}, 10, 2 );Know the limits: this only changes the resized copies WordPress creates, not your original upload, and it gives old browsers no fallback. If you want WordPress's own tooling, the official Performance Lab plugin includes a modern image formats feature built on the same idea. Test on a staging copy first.
Enable SVG, WebP, and ICO Upload in WordPress
WordPress already allows WebP (5.8+) and ICO uploads, but SVG is blocked by default because an SVG file is code and can carry scripts. If you run into a blocked type, or you want SVG logos and icons for crisp, tiny graphics, use the generator below. It builds a snippet for the file types you tick. Our free web icon packs and SVG icon packs roundup are good sources of SVGs to upload.
Upload-enable snippet generator
Add it to a child theme's functions.php or a snippet plugin. Skip the opening PHP tag if your snippet plugin adds it for you.
Security first: this snippet tells WordPress to trust the file extension, which skips its usual content check for those types. Only enable what you need. For SVG, the safest route is a plugin such as Safe SVG, which sanitizes files on upload. Never let untrusted users upload SVGs, and read our guide to sanitizing, escaping and validating and the WordPress security checklist.
WordPress WebP Image Converter (Free, Runs in Your Browser)
Need a quick WordPress WebP image converter without installing anything? This tool converts JPG, PNG and other images to WebP inside your browser. Your files are never uploaded to a server. Pick a quality, optionally cap the width, then download the results and upload them to your Media Library.
JPG/PNG to WebP converter
Tip: for photos, 75-82 is a good starting range. For logos, use the lossless cwebp command above. This tool needs a browser that can encode WebP, such as Chrome, Edge or Firefox.
Other solid options are Squoosh from Google, Photoshop's WebP export, GIMP, or any of the plugins below if you would rather convert your whole library in one go.
Best WebP Plugins for WordPress
A plugin is the easiest way to get WebP without touching code. Good WebP plugins convert in bulk, convert new uploads automatically, and detect browser support so old browsers still get a JPG or PNG. Here is how the popular ones compare:
| Plugin | What it does | Free option | Worth knowing |
|---|---|---|---|
| Imagify | Compresses and converts to WebP and AVIF, bulk and on upload | Yes, with a monthly quota | Processing happens on its servers, so your host does less work |
| WebP Converter for Media | One-click bulk conversion, keeps originals, serves via rewrite rules or PHP | Yes | AVIF and external processing are in Pro |
| ShortPixel | Compression plus WebP and AVIF delivery | Yes, with monthly credits | Delivery via <picture> tags is a common setting |
| Optimole | CDN-based, serves the best format per visitor automatically | Yes, limited by visits | Nothing to configure for WebP |
| Image Optimization by Elementor | Bulk and automatic WebP and AVIF, backups, auto-resize | Check the current plan | Works on any WordPress site, not only Elementor ones |
| QuickWebP | Converts on upload, cleans file names, fills alt and caption fields | Free | Simple, with a manual quality preview |
| Plus WebP or AVIF | Asynchronous bulk conversion, can replace originals | Free | Conversion only, no extra optimization |
| WebP Express | Long-standing converter with Apache and Nginx delivery options | Free | Check the last update date and compatibility before installing |
How to set up a WebP plugin (any of them)
- Install and activate the plugin from Plugins → Add New. If you need a hand, our list of must-have WordPress plugins covers the basics.
- Turn on WebP creation in the plugin settings, and pick lossy for photos or lossless for graphics. Menu names vary by plugin and version.
- Choose the delivery method.
<picture>tags are the safest, because the browser picks what it supports. Rewrite rules and CDN delivery also work. - Run the bulk optimizer on your existing Media Library, then purge your cache.
- Verify using the steps in Check that WebP is working.
Running a store? WooCommerce product galleries are image-heavy, so WebP pays off quickly there. See our picks of essential WooCommerce plugins and the fastest WooCommerce hosting. If you manage lots of files, a media manager plugin also helps.
How to Serve WebP Images in WordPress (with a Fallback)
Uploading a WebP file is only half the job. To serve WebP images safely, wrap them in the HTML <picture> element. The browser takes the first format it understands, and the plain <img> inside is the fallback. Use the generator to build the markup:
<picture> tag generator
Paste the result into a Custom HTML block. Always set width and height so the page does not jump while loading, and never lazy-load your main above-the-fold image.
You rarely need to do this by hand. Plugins and CDNs add the <picture> markup or swap the file for you. Hand-written markup is best for hero images, banners and landing pages built in the block editor or a page builder. If you build with Elementor, our Elementor template kits and Elementor slider guide are worth a look, because sliders are where oversized images hurt most.
How to Enable WebP on Nginx and LiteSpeed Servers (and Apache)
If you already have .webp copies of your images next to the originals (a plugin or a script can create them), your server can hand them out automatically. It reads the browser's Accept header and sends WebP only when the visitor supports it. Use the generator to get rules that match your setup.
Server config generator
LiteSpeed
LiteSpeed Enterprise reads .htaccess files, so the Apache rules above work there. On OpenLiteSpeed you need to load rewrite rules in the virtual host settings, so check the docs for your version. The simplest route on LiteSpeed hosting is the free LiteSpeed Cache plugin. Its image optimization settings can create WebP versions and replace image URLs with them, with no manual rewrite rules at all. Not sure which server to run? Read our comparison of Nginx vs LiteSpeed.
Nginx
Nginx needs two pieces: a map in the http block, and a location in your server block. After editing, test with sudo nginx -t and reload with sudo systemctl reload nginx. If you are building a server from scratch, our walkthrough on how to install Nginx, PageSpeed, MariaDB and PHP and the guide to optimizing performance with Nginx pair well with this step.
Back up first. A typo in .htaccess can take a site down with a 500 error. If that happens, restore the backup. Our guide to the 500 internal server error walks through the fix.
WebP for CDN: Let the Edge Do the Converting
A CDN with image optimization is the lowest-effort way to serve WebP at scale. When a browser asks for an image, the CDN checks what that browser supports, converts the original on the fly, caches the result at the edge, and serves it from a location close to the visitor. Your own server does no conversion work.
| CDN or service | How it serves WebP | Notes |
|---|---|---|
| Cloudflare Polish | Compresses images and can convert them to WebP at the edge | Polish is on paid plans; check Cloudflare's current plan table |
| Bunny Optimizer | Real-time resizing, compression and WebP conversion | Add-on to Bunny CDN, with a WordPress plugin |
| Cloudinary | Automatic format with f_auto,q_auto in the URL | Generous free tier, URL-based transformations |
| Jetpack Site Accelerator | Serves images from WordPress.com's CDN, with WebP for supporting browsers | Free feature in Jetpack |
| Optimole | Image CDN with adaptive formats | Plugin-driven, minimal setup |
A Cloudinary URL that automatically picks the best format looks like this:
https://res.cloudinary.com/YOUR_CLOUD/image/upload/f_auto,q_auto/photo.jpgTwo things to check with any CDN. First, the cache must vary by the Accept header, or the CDN may hand a WebP file to a browser that cannot read it. Good CDNs do this for you. Second, purge the CDN cache after you switch on conversion so old copies stop being served. If you are picking infrastructure too, see our notes on cloud hosting providers.
WebP Image Optimization: Settings That Actually Matter
Switching format is the start, not the finish. These habits give the biggest gains:
| Do this | Why |
|---|---|
| Resize before you convert | A 4000px photo shown at 1200px wastes bytes in any format. Cap uploads near the widest size your layout uses. |
| Use quality 75-82 for photos | Most people cannot see the difference from 100, and the file is far smaller. |
| Use lossless for logos and UI graphics | It keeps edges crisp and transparency intact. |
| Use SVG for simple icons and logos | Vector files stay sharp at any size and are often tiny. |
| Set width and height on every image | Prevents layout shift while the page loads. |
| Lazy-load below-the-fold images only | Lazy-loading your main image delays Largest Contentful Paint. |
| Keep your originals | You need them as fallbacks and as the source for future formats. |
| Write real alt text and file names | Helps accessibility and image search. A name like blue-ceramic-vase.webp beats IMG_4021.webp. |
A real example: the featured image for this post is a flat graphic. Saved as a JPEG at quality 82 it was about 38 KB. As a WebP at the same quality setting it came out around 16 KB. Flat graphics save more than photos do, which is why measuring your own images matters more than trusting any average. A fast theme helps too, so see our roundup of the fastest WordPress themes, and if your site is image-led, our photography themes and gallery themes are built around large visuals.
How to Check That WebP Is Working
With browser developer tools
- Open your page in Chrome or Firefox and press F12.
- Open the Network tab and filter by Img.
- Reload the page. In the Type column, your images should read
webp.
With curl
This pretends to be a WebP-capable browser and shows what the server sends back. Look for content-type: image/webp and a vary: Accept header.
curl -sI -H "Accept: image/webp" https://example.com/wp-content/uploads/photo.jpg | grep -iE "content-type|vary"With PageSpeed Insights
Run the page through PageSpeed Insights before and after. The next-gen image recommendation should disappear, and your Largest Contentful Paint should improve. Test both mobile and desktop.
WebP Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| "Sorry, you are not allowed to upload this file type" | Old WordPress, or a host or security plugin rule | Update WordPress, then use the upload snippet if needed |
| Upload works but no thumbnails appear | Server image library lacks WebP | Check Site Health → Media Handling, then ask your host to enable WebP in GD or Imagick |
| Network tab still shows JPG or PNG | Cached page, CDN cache, or plugin delivery turned off | Purge all caches and confirm the delivery setting |
| Some visitors see broken images | WebP served without a fallback, or cache ignoring the Accept header | Use <picture> tags, or add Vary: Accept |
| 500 error after editing .htaccess | Syntax error or an unsupported directive | Restore your backup and re-add rules one block at a time |
| Nginx will not reload | Config typo, or map placed in the wrong block | Run nginx -t and put map in the http block |
| WebP file is bigger than the JPEG | Quality set too high, or the source was already heavily compressed | Lower the quality, or keep the original for that image |
| SVG uploads but looks wrong or will not preview | Missing dimensions in the file, or a theme that strips it | Add width and height or a viewBox; try Safe SVG |
WebP vs AVIF, JPEG, PNG, GIF and SVG
| Format | Best for | Transparency | Animation | Notes |
|---|---|---|---|---|
| JPEG | Photos, universal fallback | No | No | Works everywhere, larger files |
| PNG | Screenshots, sharp graphics | Yes | No | Lossless, often big |
| GIF | Legacy animations | Limited | Yes | Heavy; animated WebP or video is lighter |
| WebP | Almost all photos and graphics | Yes | Yes | The safe modern default |
| AVIF | Photos where you want the smallest file | Yes | Yes | Often smaller than WebP but slower to encode; WordPress accepts AVIF uploads from 6.5 |
| SVG | Logos, icons, illustrations | Yes | Yes (code) | Vector, scales perfectly; sanitize before upload |
| ICO | Favicons | Yes | No | Allowed by WordPress; modern sites also use PNG or SVG favicons |
You can read more about how each format behaves in MDN's image file type guide.
WebP Bandwidth Savings Calculator
Curious what WebP could save you each month? Enter your numbers. The default of 30% reflects the middle of Google's 25-34% range for lossy images.
Monthly bandwidth saved
This is an estimate. Caching, repeat visits and CDN behavior change real transfer.
WebP in WordPress: Frequently Asked Questions
How do I use WebP images in WordPress?
Convert your image to WebP, then upload it in Media → Add New on WordPress 5.8 or later. For your existing library, use a WebP plugin, a CDN, or server rules so WebP is created and served automatically with a JPG or PNG fallback.
How do I upload a WebP image in WordPress without a plugin?
Update to WordPress 5.8 or later and upload the .webp file through the Media Library or the Image block. If your site still blocks it, add the upload snippet from this guide to a child theme or snippet plugin.
Does WordPress convert images to WebP automatically?
Not by default. Core accepts WebP uploads, and a filter can make it generate WebP sizes, but converting your existing images and serving fallbacks takes a plugin, CDN or server configuration.
Is WebP good for SEO?
Indirectly, yes. Smaller images load faster and improve Core Web Vitals such as Largest Contentful Paint, and speed is one of many ranking factors. It does not replace good content, alt text and sensible file names.
Do all browsers support WebP?
All current major browsers do, including Safari 14 and later. Only very old browsers lack support, which is why a fallback or a plugin that handles it is still wise.
Should I delete my original JPG and PNG files?
No. Keep them as the fallback and as the source for future conversions. Most plugins store WebP copies alongside the originals for exactly this reason.
How do I enable WebP on Nginx?
Add a map on $http_accept in the http block and a location with try_files that prefers the .webp file. The server config generator above builds both for you. Test with nginx -t before reloading.
Can I use SVG and ICO files in WordPress?
ICO is allowed by default. SVG is blocked by default for security. Use a sanitizing plugin such as Safe SVG, or the snippet generator above restricted to administrators.
Does a CDN convert images to WebP?
Many do. Cloudflare Polish, Bunny Optimizer, Cloudinary and Jetpack Site Accelerator can all serve WebP to supporting browsers. Make sure the CDN caches by the Accept header and purge the cache after switching on conversion.
Wrapping Up
WebP is one of the lowest-risk speed upgrades available for a WordPress site. Upload WebP natively when you have a few images, let a plugin or CDN convert and serve everything for you in most cases, and reach for server rules when you manage your own stack. Whatever route you pick, keep your originals, set real dimensions, and measure before and after.
Want a theme built for speed to go with your optimized images? Browse our free WordPress themes and premium WordPress themes, or read what WordPress is if you are just getting started.
