How to Add WebP Support Check to Site Health Status in WordPress

WebP is a modern image format that can significantly reduce image file sizes and improve page loading times. If your WordPress site is not fully optimized for WebP, you may miss out on these benefits. One way to ensure your site is optimized for WebP is to add a check for WebP support to the Site Health status in WordPress.

This tutorial will show you how to do this using a simple code snippet. First, let’s examine why WebP is essential and how it can benefit your site.

Why Use WebP?

WebP is a newer image format developed by Google that offers several advantages over traditional formats like JPEG and PNG. Some of the benefits of using WebP include:

• Smaller file sizes: WebP images can be up to 25% smaller than equivalent JPEG or PNG images, resulting in faster page loading times and lower bandwidth usage.
• Better image quality: WebP uses lossless and lossy compression algorithms to maintain image quality while reducing file sizes.
• Broad compatibility: WebP is supported by all modern browsers, including Chrome, Firefox, and Safari, as well as many image editing software programs.

With these benefits in mind, it’s clear that WebP can be a valuable addition to any WordPress site. Now, let’s look at how to add a WebP support check to the Site Health status in WordPress.

Adding the WebP Support Check

To add a WebP support check to the Site Health status in WordPress, you will need to add a small piece of code to your site. This code will create a new test in the Site Health status called “WebP support” and check if the GD library is installed on the server and if the server can convert WebP images to other formats. If either of these checks fails, the test will be marked as “recommended,” and a message will be displayed explaining the issue.

Here is the code that you can use to add the WebP support check to your site:

add_filter( 'site_status_tests', 'add_webp_support_check' );
function add_webp_support_check( $tests ) {
  $tests['direct']['webp_support'] = array(
    'label' => __( 'WebP support' ),
    'test'  => 'webp_support',
  );
  return $tests;
}
function webp_support() {
  $success = true;
  $message = '';
  // Check if the GD library is installed
  if ( ! function_exists( 'imagewebp' ) ) {
    $success = false;
    $message = __( 'The GD library is not installed on your server. WebP images cannot be generated without it.' );
  }
  // Check if the server supports WebP conversion
  if ( $success ) {
    $test_image_path = get_temp_dir() . 'webp-test.webp';
    $test_image_url  = 'data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoBAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==';
    // Create a temporary WebP image to test conversion
    file_put_contents( $test_image_path, file_get_contents( $test_image_url ) );
    // Check if the server can convert the test image to a PNG
    $test_image_png = imagecreatefrompng( $test_image_path );
    if ( ! $test_image_png ) {
      $success = false;
      $message = __( 'Your server does not support WebP conversion.' );
    }
    // Clean up the temporary image
    imagedestroy( $test_image_png );
    unlink( $test_image_path );
  }
  return array(
    'label'       => __( 'WebP support' ),
    'status'      => $success ? 'good' : 'recommended',
    'badge'       => array(
      'label' => $success ? __( 'Yes' ) : __( 'No' ),
      'color' => $success ? 'green' : 'red',
    ),
    'description' => $message,
    'test'        => 'webp_support',
  );
}

Conclusion

In conclusion, adding a WebP support check to the Site Health status in WordPress can be a helpful way to ensure that your site is fully optimized for this modern image format. Using the code snippet provided in this tutorial, you can quickly check if the GD library is installed on your server and if the server can convert WebP images to other formats. If either of these checks fails, the test will be marked as “recommended,” and a message will be displayed explaining the issue. This can help you identify any problems with WebP support on your site and take steps to resolve them. Adding a WebP support check to the Site Health status is a simple but effective way to ensure that your site runs at its best.