WordPress（ワードプレス）初心者向けに、今回はワードプレスで次世代フォーマットでの画像配信を簡単に行う方法、「EWWW Image Optimizer」を用いた方法についてまとめさせていただきます。
ワードプレスで WebP を簡単に作成する方法
EWWW Image Optimizer
Google PageSpeed Insights で高速化の手段として「次世代フォーマットでの画像配信」が提案されることから、あるいは、Googleが開発してきた WebP を、最近になって Firefox や Edge が対応方針であることを発表したことから、次世代フォーマットへの関心が高まっています。今回はそのうちの一つである「WebP」について、その作成を行えるプラグインのインストールから、サイトへの設置の方法まで、なるべく図を使いながら簡単に解説させていただきます。
１．EWWW Image Optimizer のインストール
WebP作成を簡単に行うために、無料でも使える「EWWW Image Optimizer」をインストールします。月額の有料アカウントとするか、あるいは写真単位で費用を払うことで、非常に優れた機能を発揮できますが、基本的な圧縮と、WebPを作成させるだけであれば無料でも使用できます。しかも設定も簡単です。
ワードプレスのダッシュボードの「プラグイン」＞「新規追加」で、「EWWW Image Optimizer」と入力して下記を検索します。
「今すぐインストール」をクリックし、インストールが終わったら「有効化」します。
インストールが終わるとプラグイン画面に、トラッキングデータに協力することで500枚までは無料で利用できるとのメッセージが出ます。
協力しても良いですし、しなくても良いです。今回のWebPの作成には特に関係ありません。
２．WebP画像のための EWWW Image Optimizer 設定
 | ワードプレスダッシュボードの「設定」＞「EWWW Image Optimizer」をクリックして設定画面を開きます。 |
WebPを利用するために下記の設定を行います。
１）Basic
① Remove Metadata
「Basic」で「Remove Metadata」のチェックを入れるかどうか選択します。チェックを入れると、画像のメタデータ（日付や撮影者、場所といった情報）を削除します。情報保護の観点からはチェックを入れて画像から消すのがおすすめです。
② 最適化レベル
有料化すると画像をより綺麗に圧縮できるオプションを選べますが、今回は無料で使うので、Jpegは「Pixel Perfect」を選びます。PNGとGIF、PDFは圧縮するなら「Pixel Perfect」を、圧縮しないなら「無圧縮」を選びます。
２）ExactDN
CDN（コンテンツデリバリーネットワーク）を使う場合の設定になります。有料にはしないので全てチェックを外しておきます。
３）Advanced
Advancedの設定は基本は全て空白で良いです。
① JPG Quality Level
圧縮率を設定できます。WebP圧縮の場合も圧縮率は有効です。多少画質を落としてもサイズを小さくしたい場合は60～80ぐらいがちょうどよいサイズになる印象です。画質については別記事でWebPの画質比較をしていますので参考にしてください。
４）Convert
① コンバージョンリンクを非表示
コンバージョンリンクを非表示にのみチェックを入れます。（※チェックしておくと他のユーザーによるコンバージョン（画像種の変更操作）が行われるのを防ぎます）
５）WebP
① JPG, PNG から WebP
JPG, PNG から WebP にチェックを入れます。ここにチェックを入れておくと、画像をアップロードした際に自動でWebPのファイルも作成されます。
６）Contribute
使用状況のトラッキングの設定があります。インストール時に有効化したけど、やっぱり消したいといった場合は消せます。
以上の設定を行うと、画像をアップロードした際に自動でWebP画像も作成されて、サーバーに保存されるようになります。
次にサイトへの設置の方法を見ていくことにしましょう。
３．サイトでWebPを利用する
サイト上にWebP画像を配置する場合は、サイトの閲覧者が対応していないブラウザを使用している場合用に、画像を切り替えて表示できるようにしてあげる必要があります。
別の記事で picture 要素を使って画像ごとに切り替える方法を書きましたが、また別の方法として、 .htaccess ファイルを書き換えるという手もあります。 EWWW Image Optimizer はそれを mod_rewrite とmod_headers を使用して実現するという機能があります。
１） .htaccess リライトルールを挿入する
EWWW Image Optimizer の設定画面に移動し、WebPタブの下の方にある下記の画面で赤枠の「リライトルールを挿入する」をクリックします。
 | 挿入成功に変われば完了です。 |
これでアップロードした画像ファイルは、自動でWebP画像も作成され、サーバーで切り替えて表示されるようになります。
「ファイル名.jpg.webp」という名称のファイルが作られ、切り替え表示されます。確認する場合は右クリックでダウンロードしてみるか、ブラウザの開発者ツールで確認してみれば変わっていることがわかります。
２）上の設定でうまくいかない場合
設定させるサーバーによっては、無理な場合があります。その場合はあきらめて、別の方法での切り替えを試しましょう。
① 直接 .htaccess のルールを書き換える
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
② picture 要素で表示させる
EWWW Image Optimizer はWebPファイルを、アップロードした画像及びその別サイズ画像の「ファイル名.jpg.webp」のように末尾に「.webp」を追加する形で作ります。
下記のようにコードをカスタムHTMLとして書くと、下のようにブラウザによって表示を切り替えて表示させることができます。
<picture> <source type="image/webp" srcset="https://websvr.org/wp-content/uploads/2019/05/gintama-cosplay-kobe-japan-2-600x400.jpg.webp"> <img src="https://websvr.org/wp-content/uploads/2019/05/gintama-cosplay-kobe-japan-2-600x400.jpg"/> </picture>
EWWW Image Optimizer を使うことで簡単にサイト画像の次世代フォーマット対応（WebP化）を行うことができます。 非常に便利です。
でも、サイトを一度にWebP対応させるのには良いのですけど、 この画像はWebPはいらない、こっちはいるというように切り替えるのが難しいです。写真のサイトでこだわって細かく設定したいのなら、Photoshopの利用の方がおすすめです。
