Webp converter for WordPress

readme.md

Save the converter.php file to a publicly accessible directory. Require this file in your functions along with adding the two lines of code in functions.php

Only requirement is rosell-dk/webp-convert, install by running composer require rosell-dk/webp-convert and requiring autoload.php somewhere in your installaton - you don't need to worry about requiring autoload.php if using Bedrock

converter.php

<?php

namespace Converter;

use WebPConvert\WebPConvert;

class Converter
{
    public $lazy = false;
    public function __construct($lazy = false)
    {
        $this->lazy = $lazy;

        add_filter('wp_generate_attachment_metadata', function ($meta) {
            
            $path = wp_upload_dir(); // get upload directory
            $file = $path['basedir'].'/'.$meta['file']; // Get full size image

            $files[] = $file; // Set up an array of image size urls

            foreach ($meta['sizes'] as $size) {
                $files[] = $path['path'].'/'.$size['file'];
            }

            foreach ($files as $file) { // iterate through each image size
                list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
                $image = wp_load_image($file);
          
                switch ($orig_type) {
                    case IMAGETYPE_PNG:
                    case IMAGETYPE_JPEG:
                          $success = WebPConvert::convert($file, $file.'.webp', array(
                            'quality' => 90,
                            // more options available!
                            ));
                        break;
                }
            }
            return $meta;
        });
        
        add_action('delete_attachment', function ($id) {
            if (wp_attachment_is_image($id)) {
                $path = wp_upload_dir(); // get upload directory
                $images  = $this->getImages($id);
                foreach ($images as $i) {
                    // Need to check if webp version exists, unable to convert all files only PNG and JPG
                    if (file_exists(ABSPATH . '..' . wp_make_link_relative($i).'.webp')) {
                        unlink(ABSPATH . '..' . wp_make_link_relative($i).'.webp');
                    }
                }
            }
        });

        add_filter('post_thumbnail_html', function ($html, $post_id, $post_thumbnail_id, $size, $attr) {
            $id = get_post_thumbnail_id(); // gets the id of the current post_thumbnail (in the loop)
            $src = wp_get_attachment_image_src($id, $size); // gets the image url specific to the $size param
            $alt = get_the_title($id); // gets the post thumbnail title
            $class = $attr['class']; // gets classes passed to the post thumbnail
            if (empty($src)) {
                $src = wp_get_attachment_image_src($id, 'full'); // gets the image url specific to the $size param
            }
            
            $html = "<picture class=\"$class\">";
            if (file_exists(ABSPATH . '..' . wp_make_link_relative($src[0]).'.webp')) {
                $html .= "<source srcset=\"{$src[0]}.webp\" type=\"image/webp\">";
            }
            $html .= "<source srcset=\"{$src[0]}\" type=\"image/jpeg\">";
            $html .= "<img src=\"{$src[0]}\" alt=\"$alt\">";
            $html .= "</picture>";
        
            if (empty($src)) {
                $html = '';
            }
            return $html;
        }, 99, 5);


        add_filter( 'image_send_to_editor', function ($html, $id, $caption, $title, $align, $url, $size, $alt ) {
            $src = wp_get_attachment_image_src($id, $size); // gets the image url specific to the $size param
            $class = $align; // gets classes passed to the post thumbnail
            if (empty($src)) {
                $src = wp_get_attachment_image_src($id, 'full'); // gets the image url specific to the $size param
            }
        
            $html = "<picture class=\"$class\">";
            if (file_exists(ABSPATH . '..' . wp_make_link_relative($src[0]).'.webp')) {
                $html .= "<source srcset=\"{$src[0]}.webp\" type=\"image/webp\">";
            }
            $html .= "<source srcset=\"{$src[0]}\" type=\"image/jpeg\">";
            $html .= "<img src=\"{$src[0]}\" alt=\"$alt\">";
            $html .= "</picture>";
        
            if (empty($src)) {
                $html = '';
            }
            return $html;
        }, 99, 10 );

    }
    public function getImages($id)
    {
        if (!wp_attachment_is_image($id)) {
            return;
        }

        $links = array();
        $sizes = get_intermediate_image_sizes();
        $sizes[] = 'full';
        foreach ($sizes as $size) {
            $image = wp_get_attachment_image_src(get_the_ID(), $size);
            if (!empty($image) && ( true == $image[3] || 'full' == $size )) {
                $links[] = $image[0];
            }
        }

        return $links;
    }
}

functions.php

<?php

use Converter\Converter;

$converter = new Converter();