最近ではほとんどのメジャーブラウザで表示できるようになったWebP形式の画像。
それ以前にスタンダードだったJPEG形式と比べると同一の画像の場合でも30%前後ファイルサイズ（容量）が削減でき、その分ページ読み込み時の転送量が減ることでより高速にページが表示できるようになります。
そして、どのバージョンからかは覚えていませんがWordPressでも直接WebP形式の画像をアップロードしてサイトで扱えるようになっています。
メリットあるなら使いたい！というところではあるものの、パソコンなどではまだまだJPEG形式がスタンダードで、一旦JPEG形式で保存したものを何かのサービス等を使ってWebP形式に変換するか、WebP形式での保存ができる画像エディターを使って画像を作ってからWordPressのメディアへアップロードしなければならず、知っててもやっていないという方が多いのではないでしょうか？
そこで本ページでは、比較的短いコードを追加することで、以降アップロードしたJPEG形式の画像を自動でWebP形式へ変換して保存する方法を紹介します。
もちろん元の画像だけではなく、WordPressの設定に応じて生成するいろいろなサイズの画像もすべてWebP形式になりますので、どんなサイズでも高速表示が可能になります。
自動変換させるには、収容しているサーバーに画像処理プログラム（GDやImagickなど）がインストールされ、利用可能になっている必要がありますが、WordPressのメディアアップロードが問題なく稼働しているサイトであれば恐らく大丈夫でしょう（心配な方はサイトヘルスの情報タブにあるメディア処理項目を参照して画像処理プログラムが動作しているかを確認しましょう）
アップロードした画像を自動でWebP形式に変換するコード
有効化しているテーマのfunctions.phpへ以下のコードを追加するだけで、それ以降アップロードしたJPEG形式の画像が自動でWebP形式に変換されて保存されるようになります。
function pwcn_convert_and_register_as_webp($metadata, $attachment_id, $context) {
if (!wp_attachment_is_image($attachment_id)) {
return $metadata;
}
// 元ファイル（JPEG）のパスを取得
$file_path = get_attached_file($attachment_id);
if (!file_exists($file_path)) {
return $metadata;
}
$path_info = pathinfo($file_path);
if (!in_array(strtolower($path_info['extension']), ['jpg', 'jpeg'])) {
return $metadata;
}
$dirname = $path_info['dirname'] . '/';
// A. フルサイズをWebPに変換して保存し、元のJPEGを削除してDB登録をWebPに書き換える
$editor = wp_get_image_editor($file_path);
if (!is_wp_error($editor)) {
$webp_file_name = $path_info['filename'] . '.webp';
$webp_file_path = $dirname . $webp_file_name;
$saved = $editor->save($webp_file_path, 'image/webp');
if (!is_wp_error($saved)) {
unlink($file_path); // 元のフルサイズJPEGを物理削除
update_attached_file($attachment_id, $webp_file_path); // メディアライブラリの標準パスをWebPに変更
}
}
// B. 各サムネイルサイズもWebPに変換して上書きする
if (!empty($metadata['sizes'])) {
foreach ($metadata['sizes'] as $size_name => $size_info) {
$sub_file_path = $dirname . $size_info['file'];
if (file_exists($sub_file_path)) {
$sub_path_info = pathinfo($sub_file_path);
$sub_editor = wp_get_image_editor($sub_file_path);
if (!is_wp_error($sub_editor)) {
$new_sub_filename = $sub_path_info['filename'] . '.webp';
$saved_sub = $sub_editor->save($dirname . $new_sub_filename, 'image/webp');
if (!is_wp_error($saved_sub)) {
unlink($sub_file_path); // 元のJPEGサムネイルを削除
$metadata['sizes'][$size_name]['file'] = $new_sub_filename;
$metadata['sizes'][$size_name]['mime-type'] = 'image/webp';
}
}
}
}
}
// メタデータの基本情報をWebPに書き換え
if (isset($metadata['file'])) {
$metadata['file'] = str_replace('.' . $path_info['extension'], '.webp', $metadata['file']);
}
return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'pwcn_convert_and_register_as_webp', 10, 3);なお、何度か書いていますのでお分かりかとは思いますが、コード追加以降にアップロードした画像に対してのみ動作します。既にアップロードしている画像には適用されませんのでご注意ください。
この機能は本サイトで配布しているHima Art Utilityプラグインのバージョン6.2以降で実装しており、以下のページで機能の概要や、過去画像の変換方法、過去画像を使った個別ページなどでのメンテナンス方法（置き換え方法）などを解説していますので、よかったらどうぞ。
本ページ公開時点でのHima Art Utilityの最新バージョンは6.1で本機能は搭載していません。これを機にHima Art Utilityを使ってみようという方はバージョン6.2のリリースまでしばらくお待ちください。
