Menü schliessen
Created: May 1st 2023
Last updated: March 3rd 2024
Categories: Common Web Development,  IT Development,  Php,  Wordpress
Author: Tim Fürer

WordPress: An Inside Look at a Simple WebP Converter Plugin

Tags:  guide,  optimization,  page optimization,  PHP,  Plugin,  search engine optimization,  wordpress
Donation Section: Background
Monero Badge: QR-Code
Monero Badge: Logo Icon Donate with Monero Badge: Logo Text
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Optimizing your website's performance is essential, and one effective way to achieve this is by utilizing the WebP image format. WebP offers excellent compression and reduced file sizes compared to traditional formats like JPEG and PNG. In this article, we'll examine the inner workings of an open-source WebP converter WordPress plugin and the technologies used to achieve seamless image conversion.

The Plugin Code

Before diving into the details, let's take a look at the source code of the plugin:

<?php
/**
* Plugin Name: Auto WebP Converter
* Plugin URI: https://www.lexo.ch
* Description: Automatically converts JPG and PNG images uploaded to the WordPress media library to the WebP format.
* Author: LEXO
* Version: 1.0.0
* Author URI: https://www.lexo.ch
*/

// Check if Imagick extension is enabled
if (!extension_loaded('imagick') || !class_exists('Imagick')) {
  add_action('admin_notices', 'imagick_not_enabled_notice');
  return;
}

function imagick_not_enabled_notice() {
  ?>
  <div class="notice notice-error">
    <p><?php _e('The Imagick PHP extension is required for the WebP Converter plugin to work.', 'webp-converter'); ?></p>
  </div>
  <?php
}

function webp_converter($file) {
  $file_info = pathinfo($file['file']);

  // Only convert JPG and PNG images
  if (!in_array(strtolower($file_info['extension']), ['jpg', 'jpeg', 'png'])) {
    return $file;
  }

  try {
    $imagick = new Imagick($file['file']);
    $imagick->setFormat('webp');

    if (in_array(strtolower($file_info['extension']), ['jpg', 'jpeg'])) {
      $imagick->setOption('webp:lossless', 'false');
      $imagick->setImageCompressionQuality(70);
    }

    $file_info['filename'] = wp_unique_filename($file_info['dirname'], $file_info['filename'] . '.webp');

    $webp_file_path = $file_info['dirname'] . '/' . $file_info['filename'];

    $imagick->writeImage($webp_file_path);
    $imagick->clear();
    $imagick->destroy();

    unlink($file['file']);

    $file['file'] = $webp_file_path;
    $file['type'] = 'image/webp';
  } catch (Exception $e) {
    error_log('WebP Converter: Failed to convert image to WebP format - ' . $e->getMessage());
  }

  return $file;
}
add_filter('wp_handle_upload', 'webp_converter');

Moving forward, we'll delve into various aspects of the plugin, such as the WebP format, the Imagick PHP extension, the conversion process, and browser compatibility, all while referring to the provided code snippet.

 

The WebP Advantage

WebP is a versatile image format that combines the best features of JPEG and PNG. Unlike JPEG, WebP supports transparency, and compared to PNG, it provides significantly better compression. With lossless conversion, WebP can halve file sizes. By slightly reducing the image quality, you can already reduce file sizes by 66% or more. As a result, WebP is an ideal choice for optimizing website images and improving load times.

Imagick: The Driving Force

The plugin relies on the Imagick PHP extension to handle image conversions. Imagick is a powerful library that supports various image formats and offers numerous image processing functions. By utilizing Imagick, the plugin can efficiently convert images to the WebP format upon upload.

Before using the plugin, you must ensure that the Imagick PHP extension is installed on your server. Follow the instructions in the PHP manual for installing the extension: Imagick Installation

Understanding the Conversion Process

The plugin leverages the 'wp_handle_upload' filter hook to intercept the image upload process in WordPress. This hook allows developers to modify the uploaded file's properties or perform additional actions on the file after it has been uploaded. In this case, the plugin uses the 'wp_handle_upload' hook to initiate the conversion of the uploaded image to the WebP format if it is a JPG or PNG file.

Upon uploading an image to the WordPress media library, the plugin first checks its format, then proceeds with the appropriate conversion:

  • If the image is in PNG format, it is converted to WebP losslessly, preserving the original quality.
  • If the image is in JPEG format, it is converted to WebP with 70% quality, striking a balance between file size and visual quality.
  • If the image is in any other format, it is uploaded as-is without conversion.

The clear and accessible design of this WebP converter plugin makes it an excellent resource for developers who want to learn more about the conversion process and the advantages of using WebP for image optimization.

Dealing with Browser Compatibility

The WebP format is not supported by the deprecated Internet Explorer. However, this is not a significant concern, as modern browsers widely support WebP. By focusing on modern browser compatibility, you can ensure a smooth experience for the majority of your website's visitors.

Conclusion

This simple WebP converter WordPress plugin offers a great opportunity for developers to learn about image conversion and optimization. By examining the plugin's source code and understanding the technologies used, you can enhance your skills as a WordPress developer and optimize your website's images using the efficient WebP format. Embrace the power of WebP and improve your website's performance!

To further explore the technologies used in the WebP converter WordPress plugin and expand your knowledge, consider visiting the following resources: