I'm building a simple WordPress theme for personal use. Speed is important. My Google PageSpeed Score is high, but it keeps saying that I should use WebP, rather than JPG. ('modern web formats').

As I've built my theme completely from scratch, so that it only contains the bare necessities and no other unneeded things.

I would very much like not to use a plugin for this, but do it myself. So I came up with the following:

1. Upload JPG/PNG
2. WordPress creates all the image sizes twice: once in JPG/PNG (the original format) and once in WebP
3. When the page is loaded, I check whether to call the WebP version (when the browser supports it) or the original.

I already Googled a lot about webp in WordPress, but I only found out about plugins. I found this unanswered question with sample code for converting JPG/PNG to WebP, but I don't know if this is really correct. To me it seems like only the extension is changed. Does anybody know if that's also correct?

How do I add image sizes and convert an additional set to WebP?

Many thanks in advance!

I'm building a simple WordPress theme for personal use. Speed is important. My Google PageSpeed Score is high, but it keeps saying that I should use WebP, rather than JPG. ('modern web formats').

As I've built my theme completely from scratch, so that it only contains the bare necessities and no other unneeded things.

I would very much like not to use a plugin for this, but do it myself. So I came up with the following:

1. Upload JPG/PNG
2. WordPress creates all the image sizes twice: once in JPG/PNG (the original format) and once in WebP
3. When the page is loaded, I check whether to call the WebP version (when the browser supports it) or the original.

I already Googled a lot about webp in WordPress, but I only found out about plugins. I found this unanswered question with sample code for converting JPG/PNG to WebP, but I don't know if this is really correct. To me it seems like only the extension is changed. Does anybody know if that's also correct?

How do I add image sizes and convert an additional set to WebP?

Many thanks in advance!

• images
• uploads
• media
• media-library

• "How do I add image sizes that convert to WebP?" - you've already stated that there are plugins that are capable of doing this. Why not check out how they solve it? Personally, I oppose your thinking and will gladly use plugins for anything non-trivial. Especially since WebP Express does a great job of what you're trying to achieve. – kero Commented Nov 19, 2020 at 17:27
• Hi @kero thanks for reading through it. I agree that my last question was formulated a bit weird, so I changed that a bit better. I always prefer to not use prefer, since that always comes with an additional load and things you don't need. If I use a plugin for everything non-trivial, WordPress would be significantly slower. – ralphjsmit Commented Nov 19, 2020 at 18:26
• But this task is plugin territory, whether you write your own or take something that exists. – fuxia ♦ Commented Nov 19, 2020 at 21:06
• Ok @fuxia good that you point that out. Do you also have an explanation why this is plugin territory? I mean, image sizes etc are also registered in my functions.php, so why not register an additional ‘upload function’ there? It’s really theme specific.. – ralphjsmit Commented Nov 20, 2020 at 7:26
• You might want to use these images after a theme switch, and themes should do as little as possible – only the tasks related to presentation. – fuxia ♦ Commented Nov 20, 2020 at 12:11

1 Answer 1

if GD is enabled you can use PHP

$path = 'YOUR_PATH_TO_IMAGES';
$pngFile = 'name.png';
$webpFile = 'name.webp';

$image = imagecreatefrompng($path . $pngFile);
imagepalettetotruecolor($image );
imagealphablending($image , true);
imagesavealpha($image , true);
imagewebp($image , $path . $webpFile , 100);
imagedestroy($image );