WordPressサイトでWebP(ウェッピー)に対応させる方法を紹介！WordPressでの画像表示を高速化！

こんにちは！もちです！
今回は画像最適化のお話です。
サイトの表示の速度に大きく関わる画像。
画像データは小さければ小さいほど表示速度が向上し、UXの高いサイトとなります。

そして今回紹介するのは、画像形式の一つであるWebPです。
WebPはGoogleが開発、推奨している画像形式でjpegやpngより少ない容量で遜色ない画像を表示できます。
WebPをWordPressサイトで対応させる方法を紹介したいと思います！

そもそもWebP(ウェッピー)とは

WebP（ウェッピー）はGoogleが開発し導入を推奨している、静止画像フォーマットです。拡張子は「.webp」です。

jpegやpngから比べ25%-35%の容量を削減できます。

つまり、jpegなど画像をWebPに置き換えると転送にかかる時間が2割分早くなるということです。

2021年現在はSafariやChromeでも対応しているようです。
とはいえ、未対応のブラウザではWebPの画像は表示されませんので、
対応されていないブラウザの場合はpngやjpegを表示するなどをしないと何も表示されません。

ブラウザの切り分けはそんなに難しい方法じゃないです、記事通りに進めれば最終的にはブラウザごとに配信する画像を切り替えるのも可能になります。

WordPressでWebPに対応させる方法

WordPressでWebPに対応させる方法はいくつかあるのですが、今回は「EWWW Image Optimizer」プラグインを使う方法を使用していきます。

EWWW Image Optimizerの導入、各種設定

「 EWWW Image Optimizer」を実際に使って行きましょう

EWWW Image Optimizerインストールと有効化

管理画面のプラグインタブから「WebP」などと検索するとEWWW Image Optimizerがでてきます。のでインストールして有効化してください。

管理画面の設定欄に「EWWW Image Optimizer」が追加されていれば有効化できていますのでクリックしてください。

プランとインポートするパッケージを聞かれるので

Speed up
Save Storege
Stick with free mode for now

にチェックを入れましょう。

そうしたら画像をどうしたら処理できるかを聞かれるので
WebP変換にチェックを入れてください。
それ以外の項目は自分の好きなようにカスタマイズしてください。

自動的に画像のPixel数を変えてくれるそうなので
横幅を700Pixel縦幅を6000Pixelに設定しました。
横幅の大きい画像は使いませんが
縦長の画像はよく使うのでこの設定にしましたが自分のサイトで使う画像に合わせて設定してもらえればと思います。
そしたらSave Setteingsを押して設定完了です。

そしたらWordPress側の設定は終了です。

.htaccessを書き換えてWebPの表示を可能にする

ここまではWordPress側の設定でしたが、ここからはサーバーサイドの設定になります。

先程の設定を終えた後表示される画面を下にスクロールすると

PNGと表示されている赤い画像があると思います、ここがWebPになるとWebP対応した状態になるのですが、ここがPNGの方は今の状態ではまだWebP表示することはできません。

正確にはwebpを配信するかpng,jpegを配信するかの選択ができない状態です。もしブラウザがwebpに対応している場合はwebpを配信するように.htaccessを書き換える必要があります。

*.htaccessはApacheが使用されている環境で使用可能なディレクトリ単位のWebサーバー設定ファイルです。

手動で編集してもよいのですが自動で書き換えてくれる機能があるので、左下にある「リライトルールを挿入する」を選択して.haccessを書き換えてください。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp

そうすると.htaccessの最後に上記の文が挿入されます。

ここまで編集を行うとメディアライブラリでWebP変換を行うことができるようになります。

メディアタブから一括最適化模することができます。

まとめ WebP変換や表示をおこなうならEWWW Image Optimizer

ここまでの作業時間にして5分くらいで終わりました、簡単に設定できるのに画像軽量化、サイト表示速度アップができるので実行しない手はありません！

是非試してもらえればと思います！