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!

  • "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
    Nov 19 '20 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
    Nov 19 '20 at 18:26
  • But this task is plugin territory, whether you write your own or take something that exists.
    – fuxia
    Nov 19 '20 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
    Nov 20 '20 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
    Nov 20 '20 at 12:11

if GD is enabled you can use PHP

$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 );
  • Hey, thanks for your answer! I’m going to test it out this afternoon/tomorrow. Will let you know how it does!
    – ralphjsmit
    Nov 20 '20 at 7:24
  • Hey ktscript, sorry for being so awfully late! Thanks anyway😊
    – ralphjsmit
    Dec 18 '20 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.