2024.05.22

WPで画像をアップロードしたときにWebpを作成する方法

adachi

2024.05.22

こんにちは、KNAPの足立です。
今回はWordPressの管理画面で画像をアップロードしたときに、同時にWebpを作成する方法を
PHPで実装してみたので、それをブログに書いていこうと思います！

実装はこちら！

こちらをfunctions.phpに書いていきます

function generate_webp_images($attachment_ID) {
  $image_path = get_attached_file($attachment_ID);
  $file_extension = pathinfo($image_path, PATHINFO_EXTENSION);
  if ($file_extension !== 'webp') {
    if ($file_extension === 'jpeg' || $file_extension === 'jpg') {
        $source_image = imagecreatefromjpeg($image_path);
    } elseif ($file_extension === 'png') {
        $source_image = imagecreatefrompng($image_path);
    }
    $webp_image_path = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_path);
    imagewebp($source_image, $webp_image_path, 70);
  }
}

add_action('add_attachment', 'generate_webp_images');

Webp生成のロジック

大きく分けて3つの流れで実装しています

アップロードされた画像のパスを取得し、取得した画像の拡張子を取得する

取得した画像の拡張子がwebpでなかった場合GDライブラリを活用し、アップロードされた画像を読み込む。

webp形式に変換し保存する

アップロードされた画像のパスを取得し、取得した画像の拡張子を取得する

$image_path = get_attached_file($attachment_ID);
$file_extension = pathinfo($image_path, PATHINFO_EXTENSION);

get_attached_file 関数を使用して、WPの管理画面でアップロードされた画像のパスを取得し、
pathinfo関数を使用し、画像ファイルの拡張子が何なのかを取得します。

取得した画像の拡張子がwebpでなかった場合GDライブラリを活用し、アップロードされた画像を読み込む

  if ($file_extension !== 'webp') {
    if ($file_extension === 'jpeg' || $file_extension === 'jpg') {
        $source_image = imagecreatefromjpeg($image_path);
    } elseif ($file_extension === 'png') {
        $source_image = imagecreatefrompng($image_path);
    }

アップロードされた画像の拡張子がjpg,jpegまたはpng形式の場合、
imagecreatefromjpeg、imagecreatefrompng関数を使用し、PHPで後の処理時にwebp形式の画像に変換できるように画像情報を読み込みます。

webp形式に変換し保存する

    $webp_image_path = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_path);
    imagewebp($source_image, $webp_image_path, 70);

preg_replace関数を使用し、画像のパス名をwebpに変換させ、そこにimagewebp関数を使用し、
webp画像ファイルとして保存させることで、アップロード画像をwebp画像として生成させることができます。
ちなみに70というのはWebP 画像の品質を設定する数値になります。
１００が上限で値が高いほど品質が良くなりますが、ファイルサイズが大きくなります。
後は、この一連の処理をadd_attachment フックでアップロード直後に発火させます。

こんな感じです！
webpは画質を保ったまま画像を軽量化できるので、表示速度の面でも対応を考えていきたところですね。
では本日はこのへんで〜

ありがとうございます！