Search code examples
phpwordpressfilterhookaction

WordPress convert image to WebP format programmatically with GD image engine

There are many PHP solutions and WP plugins, they all come with additional options that I don't want/need, i.e. how the converted files are served, where they are stored, etc.

I need none of all that and am after pure simple code using GD. I don't want to use a plugin, thank you.

  1. When should the encode happen ? At any time you know it is a good point in the hook routine, could be this https://make.wordpress.org/core/2019/11/05/use-of-the-wp_update_attachment_metadata-filter-as-upload-is-complete-hook/ but if you know better or have another solution then use that and possibly let me know why you choose another hook. I would i.e. also be happy with firing a cron job once new images are uploaded if that is better. Also I don't need to have metadata of the converted images in the WP db, fine with having the original .jpeg files and their metadata in the Media Library, the .webp files are just there to be used inside the picture element.

  2. Where should the converted files be stored? wp-content/uploads/ default folder structure, .webp files should be next to .jpeg files all in there.

  3. GD image engine should be used for the conversion. https://developer.wordpress.org/reference/classes/wp_image_editor_gd/ Lately I find imagick just crashes or takes ages to do anything. In WP 5.2 things still worked just fine with imagick but there must have been changes introduced that make using imagick in later versions of WP useless. I find GD to me quite stable and fast, it does not matter it creates lossy WebP versions. The methods for the GD image engine from WP do not seem to include conversion/encoding https://developer.wordpress.org/reference/classes/wp_image_editor_gd/#methods so I am also happy with any methods using in the GD module https://www.php.net/manual/en/book.image.php concerning encoding to WebP.

  4. To get rid of all the extra unneeded image sizes and options WP introduced over time I have these functions/filters in functions.php.

function namespace_disable_image_sizes($sizes)
{
    unset($sizes['thumbnail']);    // disable thumbnail size
    unset($sizes['medium']);       // disable medium size
    unset($sizes['large']);        // disable large size
    unset($sizes['medium_large']); // disable medium-large size
    unset($sizes['1536x1536']);    // disable 2x medium-large size
    unset($sizes['2048x2048']);    // disable 2x large size

    return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'namespace_disable_image_sizes');

// disable scaled image size
add_filter('big_image_size_threshold', '__return_false');

// disable rotated image size
add_filter('wp_image_maybe_exif_rotate', '__return_false');

// disable other image sizes
function namespace_disable_other_image_sizes()
{
    remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size()
    remove_image_size('another-size');   // disable any other added image sizes
}
add_action('init', 'namespace_disable_other_image_sizes');

  1. High resolution and large dimension images are to be converted, see attached image as example, image types can be jpeg, png, etc.

  2. The sizes in place are more or less these with possible variations.

add_image_size('4096w', 4096, 0);
add_image_size('3200w', 3200, 0);
add_image_size('2560w', 2560, 0);
add_image_size('1920w', 1920, 0);
add_image_size('1600w', 1600, 0);
add_image_size('1280w', 1280, 0);
add_image_size('1140w', 1140, 0);
add_image_size('1024w', 1024, 0);
add_image_size('960w', 960, 0);
add_image_size('800w', 800, 0);
add_image_size('768w', 768, 0);
add_image_size('640w', 640, 0);
add_image_size('425w', 425, 0);
add_image_size('320w', 320, 0);
add_image_size('240w', 240, 0);
  1. I use the picture element with more or less the following setup, so I have the browser decide what is needed and hence don't want/need server side .htaccess rules or backend configs. https://dev.opera.com/articles/responsive-images/
<picture>
    <source
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.webp 200w,
                opera-400.webp 400w,
                opera-800.webp 800w,
                opera-1200.webp 1200w,
                opera-1600.webp 1600w,
                opera-2000.webp 2000w"
        type="image/webp">
    <img
        src="opera-400.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.jpg 200w,
                opera-400.jpg 400w,
                opera-800.jpg 800w,
                opera-1200.jpg 1200w,
                opera-1600.jpg 1600w,
                opera-2000.jpg 2000w">
</picture>
  1. What have I tried? a) https://wordpress.stackexchange.com/questions/256351/hook-after-image-is-uploaded-and-image-sizes-generated/256352 b) https://wordpress.stackexchange.com/questions/38582/hook-to-get-image-filename-when-it-is-uploaded c) WordPress - Blur Image on Upload d) Convert Images into WebP e) I have read through and understood https://kinsta.com/blog/wordpress-hooks/#filters-example-2-insert-content-after-a-post - however what I am missing is a way to see/know what data I am working with, i.e.
add_filter('wp_generate_attachment_metadata', 'gd_webp_encode', 10, 3);
function gd_webp_encode($metadata, $attachment_id, $context){
    ob_start();
    echo $attachment_id;
    echo $metadata;
    ob_end_clean();
    return $metadata;
}

will show me nothing, same with trying to log to console or to a file in the plugin folder. Without knowing/seeing the data and what variable names hold what data I am just doing trial and error and guessing, no coding. So given above code, how would it first of all be possible to see/know what variables hold what data at that point in time and make that readable somewhere, i.e. in a log file in the plugin folder?

Bottom line, given above setup, help me understand what variables hold what data i.e. after upload in a hook and include code where I can make a WebP version of all the sizes and the original created using the GD image engine.

JPEG and WebP images next to each other in uploads folder

Example image

Solution

  • To know what data you work with inside a filter or action and to see what variable names hold what values a helper function like below can be used.

    function debug( $info ) {
    $message = null;

    if ( is_string( $info ) || is_int( $info ) || is_float( $info ) ) {
        $message = $info;
    } else {
        $message = var_export( $info, true );
    }

    if ( $fh = fopen( ABSPATH . '/gdwebpconvert.log', 'a' ) ) {
        fputs( $fh, date( 'Y-m-d H:i:s' ) . " $message\n" );
        fclose( $fh );
    }
}

    This will create a gdwebpconvert.log file in the root directory of your WordPress installation and any string, integer, float or array you put into debug($value_xyz); will be logged to that file with a date and time. On Linux you can then just go to the directory that holds the file and do tail -f gdwebpconvert.log and the latest entry to that file will be shown in the terminal.

    As an alternative you can use WordPress's own debugging feature by adding these lines to wp-config.php.

    define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', true);

    This will lead to info being output to the debug.log file, also in the root directory of your WordPress installation, though it will also add tons more data in there all the time. So I prefer the above little helper function to get just the value I currently want to see without having to search the debug.log file for what I am looking for.

    As for the conversion, as soon as I could see what data I am working with I wrote a class that converts the uploaded image and all its created sizes after the upload is done to the WebP format. Go ahead an uncomment the debug() statements to follow along. Given this https://github.com/Imagick/imagick/issues/358 and the issues I described with Imagick since WordPress 5.2 this presents a simple solution to just create WebP versions of your files on the server that you can then use in any way you like without automatic .htaccess or other features added.

    Feel free to do with this what you want and need. ;)

    <?php
/**
* Plugin Name: GD WebP Converter
* Plugin URI: https://stackoverflow.com/a/67234000
* Description: After uploading an image it will be converted to WebP format using the GD image engine. <a target="_blank" href="https://developer.wordpress.org/reference/classes/wp_image_editor_gd/">WP GD Image Engine</a> If the file is deleted form the Media Library the created WebP conversions will also be deleted.
* Version: 1.0.0
* Requires at least: 5.5
* Requires PHP: 7.2
* Author: lowtechsun
* Author URI: https://stackoverflow.com/users/1010918/lowtechsun
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

//=================================================
// Security: Abort if this file is called directly
//=================================================
if ( ! defined( 'ABSPATH' ) ) {
    die;
}

function debug( $info ) {
    $message = null;

    if ( is_string( $info ) || is_int( $info ) || is_float( $info ) ) {
        $message = $info;
    } else {
        $message = var_export( $info, true );
    }

    if ( $fh = fopen( ABSPATH . '/gdwebpconvert.log', 'a' ) ) {
        fputs( $fh, date( 'Y-m-d H:i:s' ) . " $message\n" );
        fclose( $fh );
    }
}

add_filter( 'wp_generate_attachment_metadata', 'gd_webp_converter', 10, 2 );

function gd_webp_converter( $metadata, $attachment_id ) {

    $gd_webp_converter = new GDWebPConverter( $attachment_id );
    $gd_webp_converter->check_file_exists( $attachment_id );
    $gd_webp_converter->check_mime_type();
    $gd_webp_converter->create_array_of_sizes_to_be_converted( $metadata );
    $gd_webp_converter->convert_array_of_sizes();

    return $metadata;
}

class GDWebPConverter {

    private $file_path;
    private $file_dirname;
    private $file_ext;
    private $file_name_no_ext;

    private $array_of_sizes_to_be_converted = array();
    private $array_of_sizes_to_be_deleted   = array();

    public function __construct( $attachment_id ) {

        $this->file_path = get_attached_file( $attachment_id );
        debug( $this->file_path );

        // https://stackoverflow.com/questions/2183486/php-get-file-name-without-file-extension/19040276
        $this->file_dirname = pathinfo( $this->file_path, PATHINFO_DIRNAME );
        debug( $this->file_dirname );

        $this->file_ext = strtolower( pathinfo( $this->file_path, PATHINFO_EXTENSION ) );
        debug( $this->file_ext );

        $this->file_name_no_ext = pathinfo( $this->file_path, PATHINFO_FILENAME );
        debug( $this->file_name_no_ext );
    }

    public function check_file_exists( $attachment_id ) {

        $file = get_attached_file( $attachment_id );

        if ( ! file_exists( $file ) ) {
            $message = 'The uploaded file does not exist on the server. Encoding not possible.';
            debug( $message );
            throw new Exception( 'The uploaded file does exist on the server. Encoding not possible.', 1 );
        }

    }

    public function check_mime_type() {

        // https://www.php.net/manual/en/function.finfo-file.php
        $finfo = finfo_open( FILEINFO_MIME_TYPE );

        $this->file_mime_type = finfo_file( $finfo, $this->file_path );

        finfo_close( $finfo );
        // debug( $this->file_mime_type );

        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
        $this->allowed_mime_type = array( 'image/jpeg', 'image/png' );

        if ( ! in_array( $this->file_mime_type, $this->allowed_mime_type, true ) ) {

            $message = 'MIME type of file not supported';
            // debug( $message );
            throw new Exception( 'MIME type of file not supported', 1 );

        }
    }

    public function create_array_of_sizes_to_be_converted( $metadata ) {

        // push original file to the array
        array_push( $this->array_of_sizes_to_be_converted, $this->file_path );
        // debug( $this->array_of_sizes_to_be_converted );

        // push all created sizes of the file to the array
        foreach ( $metadata['sizes'] as $value ) {
            // debug( $value['file'] );
            array_push( $this->array_of_sizes_to_be_converted, $this->file_dirname . '/' . $value['file'] );
        }
        // // debug( $this->array_of_sizes_to_be_converted );
    }

    public function convert_array_of_sizes() {

        debug( $this->array_of_sizes_to_be_converted );

        switch ( $this->file_ext ) {
            case 'jpeg':
            case 'jpg':
                foreach ( $this->array_of_sizes_to_be_converted as $key => $value ) {

                    $image = imagecreatefromjpeg( $value );

                    if ( 0 === $key ) {

                        imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '.webp', 80 );

                    } else {

                        $current_size = getimagesize( $value );
                        // debug( $current_size );
                        imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '-' . $current_size[0] . 'x' . $current_size[1] . '.webp', 80 );

                    }

                    imagedestroy( $image );
                }
                break;

            case 'png':
                foreach ( $this->array_of_sizes_to_be_converted as $key => $value ) {

                    $image = imagecreatefrompng( $value );
                    imagepalettetotruecolor( $image );
                    imagealphablending( $image, true );
                    imagesavealpha( $image, true );

                    if ( 0 === $key ) {

                        imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '.webp', 80 );

                    } else {

                        $current_size = getimagesize( $value );
                        // debug( $current_size );
                        imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '-' . $current_size[0] . 'x' . $current_size[1] . '.webp', 80 );

                    }

                    imagedestroy( $image );

                }
                break;

            // animated GIF to WebP not supported by GD - imagecreatefromgif
            // case 'gif':
            //  foreach ( $this->array_of_sizes_to_be_converted as $key => $value ) {

            //      $image = imagecreatefromgif( $value );

            //      if ( 0 === $key ) {

            //          imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '.webp', 80 );

            //      } else {

            //          $current_size = getimagesize( $value );
            //          // debug( $current_size );
            //          imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '-' . $current_size[0] . 'x' . $current_size[1] . '.webp', 80 );

            //      }

            //      imagedestroy( $image );

            //  }
            //  break;

            default:
                return false;
        }

    }

    public function create_array_of_sizes_to_be_deleted( $attachment_id ) {

        // debug( $attachment_id );

        $this->attachment_metadata_of_file_to_be_deleted = wp_get_attachment_metadata( $attachment_id );
        // debug( $this->attachment_metadata_of_file_to_be_deleted );

        // push original file to the array
        array_push( $this->array_of_sizes_to_be_deleted, $this->file_dirname . '/' . $this->file_name_no_ext . '.webp' );
        // debug( $this->array_of_sizes_to_be_converted );

        // push all created sizes of the file to the array
        foreach ( $this->attachment_metadata_of_file_to_be_deleted['sizes'] as $value ) {

            // debug( $value );

            $this->value_file_name_no_ext = pathinfo( $value['file'], PATHINFO_FILENAME );
            // debug( $this->value_file_name_no_ext );

            array_push( $this->array_of_sizes_to_be_deleted, $this->file_dirname . '/' . $this->value_file_name_no_ext . '.webp' );
        }
        // debug( $this->array_of_sizes_to_be_deleted );
    }

    public function delete_array_of_sizes() {

        debug( $this->array_of_sizes_to_be_deleted );

        foreach ( $this->array_of_sizes_to_be_deleted as $key => $value ) {

            // debug( $value );
            unlink( $value );

        }
    }

}

add_action( 'delete_attachment', 'delete_webp_conversions', 10 );

function delete_webp_conversions( $attachment_id ) {

    $delete_webp_conversions = new GDWebPConverter( $attachment_id );
    $delete_webp_conversions->create_array_of_sizes_to_be_deleted( $attachment_id );
    $delete_webp_conversions->delete_array_of_sizes();

}

    In the end I also added a method that, once you opt to delete a file by clicking `Delete Permanently" in the Media Library it will delete all the created WebP versions of the file. If you delete a post this will not happen as per default behavior of WordPress as you never know if you might need the file in another post.

    Make sure that you default to the GD image editor if you want to make good use of this class. => https://support.pagely.com/hc/en-us/articles/115000052451

    <?php
/**
* Plugin Name: Use GD For Image Processing
* Plugin URI: https://support.pagely.com/hc/en-us/articles/115000052451
* Description: Sets GD to the default image processor.
* Version: 1.0.0
* Requires at least: 5.5
* Requires PHP: 7.2
* Author: JeffMatson, Pagely
* Author URI: https://pagely.com
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

add_filter( 'wp_image_editors', 'pagely_default_to_gd' );
function pagely_default_to_gd() {
    return array( 'WP_Image_Editor_GD', 'WP_Image_Editor_Imagick' );
}

    Thx, Jan!