WordPressで画像をアップロードした時にWebP画像を生成する

今どきのWebブラウザならまず対応している軽量画像フォーマット、WebP。

サイトの高速化のためにWebPを使う機会も増えてきました。

https://trapezium-movie.com/

映画『トラペジウム』のキービジュアルもWebPですがこの画質・サイズで361KB。

WordPressプラグインのEWWW Image Optimizerなんかを使えば簡単にWebPに変換できるんですが、

別にプラグインなしでも簡単に機能を追加できるので管理人は自作関数を使うことにしました。

サーバーにcwebpがインストールされていればプラグインなしでWordPressのメディアアップロード時に勝手にWebpを作成できます。

さくらサーバーはcwebpが最初から入っているみたいですね。

Xサーバーとかも自分でwebpをアップロードすれば使えるようです。

画像アップロード時にWebPに変換するコード

以下のコードをfunctions.phpに書くと画像をアップロードした時に『画像ファイル名.webp』でWebPが作成されます。

別途関数名を付けたり、クラスに分けてもいいですが記事に掲載するには短い方がいいので匿名関数を使用。

• アップロードした画像をWebPに変換

add_filter('wp_handle_upload', function($file) {
    $path = $file['file'];
    $editor = wp_get_image_editor($path);
    $tmpPath = $path . '_tmp';

    if ($file['type'] !== 'image/webp') {
        if (!is_wp_error($editor)) {
            $editor->save($path);
            exec(sprintf('cwebp "%1$s" -o "%1$s.webp"', $path));
        }
    }

    return $file;
});

• 生成されるサムネイルなどの別サイズの画像をWebPに変換

add_filter('wp_generate_attachment_metadata', function ($imageMeta) {
    if (exif_imagetype($imageMeta['file']) === IMAGETYPE_WEBP) {
        return $imageMeta;
    }
    $uploadDir = wp_upload_dir();
    foreach (array_keys($imageMeta['sizes']) as $targetSize) {
        if ($targetMeta = $imageMeta['sizes'][$targetSize]) {
            exec(sprintf('cwebp "%1$s/%2$s" -resize %d %d -o "%1$s/%2$s.webp"', $uploadDir['basedir'], $targetMeta['file'], $targetMeta['width'], $targetMeta['height']));
        }
    }

    return $imageMeta;
});

あとはNginxやらApacheやらの設定で画像ファイルにアクセスされた時にWebP側を表示すればOK。

Nginx + WordPressにおいてのWebP化対応

本体の画像が削除された時にWebPも削除する

WebP画像はWordPressのメディアのアップロード・削除機能とは無関係に作られるものなので、

画像を削除してもWebPファイルは残ります。

画像削除時にWebPも削除したい場合、以下のURLのコードで削除できます。

WordPress function to delete add-on .webp files with their paired attachments

Enable Media Replaceで画像を入れ替えた時には非対応

画像入れ替えプラグインEnable Media ReplaceではWordPressの標準機能を使っていないので、

Enable Media Replaceで入れ替えた画像はWebPに変換されません。

なので画像の差し替えもfunctions.phpを使ったコードに変更しました。

WordPress関連記事

• WordPressテーマUnderStrapのカスタマイズ例
• WordPressのメディアや記事全文の文字を置換して日付も更新するSQL
• プラグインを使わずにWordPressのショートコードで広告を管理する
• WordPressの絵文字やEasy Table of Contents関係のファイルの読み込みを止める
• WordPressの投稿画面のツールバー・ショートカットキーをカスタマイズする
• プラグインなしでアップロード画像をWebPに変換
• プラグインなしでWordPressの画像入れ替えをする