3

I want to convert every PNG and JPEG to WebP on upload so that I can serve WebP and PNG/JPEG without requiring the user to upload a WebP version of every photo.
I want to save the WebP in the same folder with the same name, for example:

uploads/2022/09/image.png
uploads/2022/09/image.webp

How can I do this? Is there a hook I can use? Is there a reason not to use imagewebp for this?

4
  • Modern WP should be able to do this automatically if enabled via filter, no hooks should be necessary, though your server does need to support webp processing. you should check wordpress.org/plugins/performance-lab to see if webp is supported on your server. Also note there's been a significant amount of work and discussion around automatically converting JPEGs to webp on upload when the webp version is smaller, but this isn't in a current release of WordPress. Converting JPEG files in place to webp will break your site, and any answer won't account for old uploads
    – Tom J Nowell
    Sep 5, 2022 at 17:15
  • Also a lot of image serving software will automatically serve Webp, e.g if you set up a service such as Tachyon or used a CDN.
    – Tom J Nowell
    Sep 5, 2022 at 17:16
  • I can really recommend WebP Express for this which is a very small and (in my opinion) well written plugin that offers exactly this functionality.
    – kero
    Sep 6, 2022 at 8:39
  • You can use Imagify plugin that automatically converts PNG and JPG images to WebP format while uploading. Sep 6, 2022 at 12:55

3 Answers 3

1

Hooking using wp_handle_upload works:

add_filter( 'wp_handle_upload', 'create_webp' );

function create_webp($file) {

    if ($file['type'] === "image/png") {
     // Create and save
        $img = imagecreatefrompng($file['file']);
        imagepalettetotruecolor($img);  
        imagealphablending($img, true);
        imagesavealpha($img, true);
        imagewebp($img, str_replace(".png" ,".webp", $file['file']), 100);
        imagedestroy($img);
   
    }
    return $file;
}

It's advised to hook on deletion so to avoid having orphaned WebP files:

add_filter( 'wp_delete_file', 'delete_webp' );

function delete_webp($file) {
    if (file_exists(str_replace(".png" ,".webp", $file))) {
        @unlink(str_replace(".png" ,".webp", $file));
    }
    return $file;
}
0

Doing this in vanilla WordPress using hooks requires code that hasn't been released yet, specifically:

That Trac ticket adds new filters which are available in WordPress 6.1.

Note that if your server cannot process webp images for resizing then webp will not work for you even with these filters. You will need to contact your server admins to install the needed packages ( which package is needed depends on how your server is setup and the OS used ).

Is there a reason not to use imagewebp for this?

If you create copies of all your images in webp there will be nothing to tell WordPress that they exist, or to use them. WP also will not return webp URLs when returning the URLs of images, because it's unaware.

Fixing this would mean making WordPress aware of multiple mime types for an image, which is exactly what the Trac changeset that's being released in v6.1 is trying to do.

The closest you could get is trying to determine from the server side if the browser can handle webp, but this has caching consequences, as is extremely unreliable.

1
  • Currently, I'm using <picture> with str_replace to change .png/.jpg to .webp in the src URL, so it's OK if it just creates a copy without WP knowing. Right now, all the content is a placeholder, so converting old images isn't necessary, just new ones. The WebP is used in full size exclusively, so smaller sizes are not needed. Until 6.1 is released, is there any hook I can use to generate a WebP copy of the photo?
    – Ron
    Sep 5, 2022 at 17:54
-1

You shouldn't use

uploads/2022/09/image.png
uploads/2022/09/image.webp

Because uploading uploads/2022/09/image.png in same month may overwrite uploads/2022/09/image.webp

There is a hook to force generated thumbnails output format, but that will replace default thumbnails image format, it will not create WebP clones - see here.

If that is not enough, I recommend using plugin, either from WP repository or GitHub. Or you can wait for WP version 6.1 to see if your needs are addressed

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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