How to Add WebP Images in WordPress
WordPress Tutorials & How-To (Advanced)
How to Add WebP Images in WordPress
Google recommends WebP images for better performance, faster loading speed, and improved Core Web Vitals. WebP images load 25–35% faster than JPEG or PNG without losing quality. This guide teaches you how to upload, convert, and serve WebP images in WordPress using built-in support, plugins, CDN settings, and optimization tools — including Elementor and WooCommerce compatibility.
1
What Are WebP Images?
A next-gen format designed for high performance.
WebP is a modern image format developed by Google.
Benefits:
- 25–35% smaller than JPEG & PNG
- Loads faster → better SEO
- Supports transparency (PNG replacement)
- Supports animation (GIF replacement)
- Supported by all modern browsers
WordPress 5.8+ supports WebP natively — but you still need optimization & proper delivery.
2
Method 1 — Upload WebP Images Directly (Native WordPress Support)
WordPress 5.8+ allows direct WebP upload.
You can upload WebP normally:
- Go to Media → Add New
- Upload
.webpimage
Limitations:
- No auto-conversion of JPEG/PNG
- No fallback for old browsers
- Not fully optimized for speed
Use a plugin for full performance optimization.
3
Method 2 — Convert All Images to WebP Using Plugins (Recommended)
Best for performance, WooCommerce, and SEO.
Recommended plugins:
- Imagify (by WP Rocket)
- ShortPixel
- Smush Pro
- EWWW Image Optimizer
Example: Imagify Setup
- Install Imagify
- Go to Settings → Imagify
- Enable Create WebP Versions
- Enable Display WebP Images
- Optimize all images
Imagify automatically:
- Converts existing images to WebP
- Delivers WebP to supported browsers
- Uses fallback for older browsers
4
Method 3 — Use LiteSpeed Cache for Automatic WebP Delivery
Best for LiteSpeed hosting (NameHero, Hostinger, etc.).
LiteSpeed Cache is extremely powerful for WebP.
Steps:
- Install LiteSpeed Cache
- Go to LiteSpeed Cache → Image Optimization
- Enable:
- Generate WebP
- Image WebP Replacement
- Click Send Optimization Request
LiteSpeed auto-serves WebP via ESI + server-level optimization.
5
Method 4 — Cloudflare Automatic Image Optimization
Best CDN-level WebP delivery.
With Cloudflare Pro (or APO), enable:
- Polish → WebP
- Mirage (mobile optimization)
- Auto Minify
Cloudflare automatically serves WebP based on the browser capabilities — no plugin needed.
6
Method 5 — Generate WebP Files Manually
For designers & advanced developers.
Use tools like:
- Photoshop + WebP plugin
- TinyPNG / TinyJPG WebP converter
- Squoosh.app (best quality control)
After generating WebP:
- Upload directly via Media Library
- Replace old images manually or using Elementor
7
WebP With Elementor
Elementor supports WebP natively.
Best practices:
- Upload WebP in image widgets
- Use compressed WebP hero images
- Enable “lazy load” in Elementor Settings → Advanced
Elementor + WebP significantly boosts LCP & CLS scores.
8
WebP for WooCommerce Stores
Improve product image speed.
WooCommerce product images benefit hugely from WebP:
- Faster category pages
- Better mobile speed
- Improved conversion rate
- Better Core Web Vitals
Use Imagify/ShortPixel to auto-convert all product images + thumbnails.
9
Troubleshooting WebP Issues
Fix common WebP problems.
1. WebP not showing?
- Clear cache (plugin + browser + CDN)
- Ensure server module supports WebP
- Check plugin settings
2. Elementor still showing old JPG?
- Replace the image manually
- Clear Elementor → Tools → Regenerate CSS
3. WebP breaking in Safari?
Enable fallback images in Imagify/ShortPixel.
4. WooCommerce thumbnails not converting?
Regenerate thumbnails using Regenerate Thumbnails plugin.
Want a High-Performance Website With Next-Gen Images?
All SiteCrafted premium websites come with automatic WebP conversion, CDN optimization, lazy loading, and 95+ Google PageSpeed scores.
