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

Webサイトの表示速度を改善するうえで、画像の軽量化は重要な施策のひとつです。特にWordPressではメディアライブラリに大量の画像がアップロードされるため、自動でWebP形式に変換して容量を削減することで、パフォーマンス向上とSEO対策に効果が期待できます。

WebPとは｜次世代の画像フォーマット

WebP（ウェッピー）はGoogleが開発した画像フォーマットで、JPEGやPNGと比較して高い圧縮率を誇ります。画質をほとんど落とさずにファイルサイズを大幅に削減できるため、表示速度の高速化やモバイル環境での通信量削減に有効です。

サーバーのWebP対応状況を確認する

WebP画像を生成するには、PHPのGDライブラリやImagickライブラリがWebPに対応している必要があります。以下のコードを一時的に設置し、対応状況を確認しましょう。

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

「WebP非対応」と表示された場合は、サーバー管理者に連絡してGDまたはImagickのWebP対応を有効にしてもらう必要があります。

画像アップロード時にWebPを自動生成するコード

以下のコードをfunctions.phpに追加することで、JPEGおよびPNG画像がアップロードされた際に、同時にWebP形式の画像も自動生成されます。

function create_webp_on_upload($metadata, $attachment_id) {
  $mime_type = get_post_mime_type($attachment_id);
  $file = get_attached_file($attachment_id);

  if (!function_exists('imagewebp')) {
    return $metadata;
  }

  $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 $metadata;
  }

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

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

この処理により、アップロード時に.webp形式の画像が同じディレクトリ内に生成されます。

WebP画像をHTMLで出し分ける方法

生成されたWebP画像をブラウザに適切に表示するには、<picture>タグを活用する方法が一般的です。

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

これにより、WebPに対応したブラウザではWebP画像が表示され、未対応のブラウザではJPEGやPNG画像が表示されるため、互換性を保ちつつ軽量化が可能です。

既存の画像をWebP化したい場合

すでにアップロード済みの画像についても、プラグインやWP-CLIなどを使えば一括変換が可能です。たとえば、以下のような無料プラグインがあります：

• WebP Express：Apache/Nginxに応じた設定が可能で、ブラウザに応じた画像出し分けも自動対応。
• EWWW Image Optimizer：WebPを含む多形式に対応し、CDN連携も可能。

手動で変換したい場合は、cwebpなどのCLIツールで対応することもできます。

まとめ

WordPressにおける画像のWebP化は、サイト表示の高速化とユーザビリティの向上に大きく貢献します。functions.phpにコードを追加するだけで簡易的に自動生成を導入できるため、まずは自サイトの対応状況を確認し、導入を検討してみましょう。