サイトの高速化の方法のひとつに、表示させる写真や画像に次世代フォーマットを利用するというものがあります。次世代フォーマットにはいくつか案があるのですが、今回はGoogleが開発している WebP （ウェッピー）の利用方法について取り上げます。

プラグインは、現在は下記の「GitHub」のサイトにて配布されていますので、それを利用することにします。

https://github.com/fnordware/AdobeWebM#download

上記のサイトにアクセスすると、赤枠の部分にダウンロードリンクがあります。

Mac、Windowsのそれぞれでダウンロードします。ダウンロード後はZIPファイルなので解凍します。今現在のバージョンは「WebP_v0.5b9_win.zip」となっていました。

ダウンロードが終わったらZIPファイルなので解凍します。（Windowsならダブルクリック）

Photoshopのプラグインフォルダは、標準状態では下記にあると思います。

• Windows：C:\Program Files\Adobe\Adobe Photoshop CC 2019\Plug-ins
• Mac：\アプリケーション\Adobe Photoshop CC 2019\Plug-ins

プラグインフォルダに WebP.8bi ファイルを入れると、プラグインがインストールされ、Photoshopを起ち上げると、WebPファイルを読み書きできるようになります。WebPファイルとしたい画像を読み込みます。

ファイルの保存メニューのファイルの種類としてWebPが選択できるようになります。

WebPではアルファチャンネルがサポートされるのも大きな違いですね。でも今回は、Webでの画像表示スピードアップのために使うので、

• Lossy Quality ： 下記で変化させて試します（60～80がベスト？）
• Alpha Channel ： None（アルファチャンネルのデータは無しに）
• Save Metadata ： チェックを外します（日付や撮影情報のメタデータを消す）

と設定して利用します。WebP の画質が優れている点については下記にて比較をしています。

WebPファイルは、ワードプレスにアップロードの許可設定をしないと、メディアの新規追加では下記のように「セキュリティ上の理由によりこのファイル形式は許可されていません」と表示されてアップロードできません。

プラグイン「 WP Add Mime Types 」を入れて許可設定を変更しましょう。

表示される画面の下記の「追加の項目」に「webp = image/webp」と入力して「設定を保存」をクリックします。

そうすると、メディアの新規追加で WebP ファイルをアップロードしてもエラーにはならなくなります。

ワードプレスのサイトに設置するには、画像のリンクを入れればいいのですが、WebP ファイルがサポートされていないブラウザでの表示も考えてあげなければなりません。picture 要素を使い表示を切り替えます。

下記の画像が表示サンプルです。WebP ファイルをサポートしている Google Chrome では WebP で表示し、サポートしていないブラウザではJpeg ファイルを表示するようになります。

実際のソースコードは、下記のように<picture>要素を使い記載します。

<picture>
<source type="image/webp" srcset="https://websvr.org/wp-content/uploads/2019/05/photoshop-webp09-loss80.webp" width="600">
<img src="https://websvr.org/wp-content/uploads/2019/05/photoshop-webp14.jpg" alt="" class="wp-image-785" width="600">
</picture>