【WordPress】メディアライブラリの画像を自動でWebP化して軽量化する方法

<?php
if (imagetypes() & IMG_WEBP) {
  echo 'WebP対応済み';
} else {
  echo 'WebP非対応';
}
?>

function create_webp_on_upload($metadata, $attachment_id) {
  if (!function_exists('imagewebp')) {
    return $metadata;
  }

  $upload_dir = wp_upload_dir();
  $base_dir = trailingslashit($upload_dir['basedir']) . dirname($metadata['file']) . '/';

  // オリジナルファイルをWebP化
  convert_file_to_webp(get_attached_file($attachment_id));

  // thumbnail・medium・large等、生成された全サイズもWebP化する
  if (!empty($metadata['sizes']) && is_array($metadata['sizes'])) {
    foreach ($metadata['sizes'] as $size) {
      convert_file_to_webp($base_dir . $size['file']);
    }
  }

  return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'create_webp_on_upload', 10, 2);

function convert_file_to_webp($file) {
  $mime_type = wp_check_filetype($file)['type'];
  $image = null;

  switch ($mime_type) {
    case 'image/jpeg':
      $image = imagecreatefromjpeg($file);
      break;
    case 'image/png':
      $image = imagecreatefrompng($file);
      imagepalettetotruecolor($image);
      imagealphablending($image, true);
      imagesavealpha($image, true);
      break;
    default:
      return;
  }

  if ($image) {
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);
    imagewebp($image, $webp_path, 80);
    imagedestroy($image);
  }
}

<picture>
  <source srcset="画像パス.webp" type="image/webp">
  <img src="画像パス.jpg" alt="代替テキスト">
</picture>

function convert_uploads_to_webp($output_format, $filename, $mime_type) {
  if ('image/jpeg' === $mime_type) {
    $output_format['image/jpeg'] = 'image/webp';
  }
  if ('image/png' === $mime_type) {
    $output_format['image/png'] = 'image/webp';
  }
  return $output_format;
}
add_filter('image_editor_output_format', 'convert_uploads_to_webp', 10, 3);