Smaller images mean faster web experiences for your visitors. Google likes this and will typically reward you with an improvement in your search engine rankings. Tired of seeing “serve images in next generation format” on my Google pagespeed insights results, I decided to tackle this issue.
WordPress plugins try to do too much
All of the WordPress plugins I could find for converting my jpeg and PNG images into WebP either added javascript bloat to my site, kept trying to upsell me, or potentially added one more plugin I had to monitor for potential vulnerabilities. So instead I decided to find a way to batch convert them myself.
These instructions assume you have commandline access to your server, you feel pretty comfortable with linux, MySQL, and you know how to back things up before you start messing around with your WordPress site. Please use at your own risk. Author assumes no responsibility!
1. check if webp is installed on your server:
cwebp -version
3. If not, install:
sudo apt install webp
4. Run these three commands seperately to convert PNG, JPG, and JPEG to WEBP with 80% compression:
for i in *.png; do cwebp -q 80 "$i" -o "${i%.png}.webp"; done
for i in *.jpg; do cwebp -q 80 "$i" -o "${i%.jpg}.webp"; done
for i in *.jpeg; do cwebp -q 80 "$i" -o "${i%.jpeg}.webp"; done
5. Login to your mysql database (back it up) then run these six commands:
UPDATE wp_posts SET post_content = REPLACE(post_content, '.png', '.webp');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, '.png', '.webp');
UPDATE wp_posts SET post_content = REPLACE(post_content, '.jpeg', '.webp');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, '.jpeg', '.webp');
UPDATE wp_posts SET post_content = REPLACE(post_content, '.jpg', '.webp');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, '.jpg', '.webp');
6. In WP install “regnerate thumbnails” plugin
Either run from WP-admin or through the CLI. This will make sure all of the images and variations are all connected properly and will if your site is using srcset, it will restore srcset image function on the site.
sudo wp media regenerate
7. In wordpress admin, install “performance lab” plugin. This will automatically convert your images to webp format going forward.
Clear your cache and you should be up and running!