ページ速度をチェックできる「PageSpeed Insights」で「次世代フォーマットでの画像の配信」という項目で指摘されたため、サイトの表示速度を改善させるため「WebP（ウェッピー）」に対応してみました。
今回はWordPressのプラグイン「EWWW Image Optimizer」を利用して画像を最適化（WebP対応）していく手順を紹介します。
次世代フォーマットWebP（ウェッピー）とは？
WebP（ウェッピー）はGoogleが開発している画像形式でJPEG画像やPNG画像と比べて容量が20～30%ほど削減できると言われています。
サイトやブログの表示速度を上げたい時に画像の最適化は非常に有効なのでWebPへの対応はやっておくべき。
実際にページ速度をチェックできる「PageSpeed Insights」でチェックをしてみるとWebP未対応のサイトでは以下のように改善できる項目として指摘されます。
■改善できる項目
次世代フォーマットでの画像の配信
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
WebPのデメリットは？
WebPはSafariやIEのブラウザには対応していません。そのため、サイト上の画像の表示をブラウザ別に差し替える必要があります。
ただ、今回は自動で差し替えする所までプラグインでやってしまうので一度設定が済めば面倒なことはありません。
WebPへの変換と設定の手順
WebPの変換はやり方は色々ありますが、今回は「EWWW Image Optimizer」というプラグインで一括変換と自動差し替えの設定をしていきます。
手順的には
- EWWW Image Optimizerのインストールと有効化
- WebPの設定
- .htaccessへの記述
- 一括最適化
という流れになります。順番に図解で解説していきます。
1.EWWW Image Optimizerのインストールと有効化
管理画面から「プラグイン」⇒「新規追加」。検索窓にEWWW Image Optimizerと入力して検索し、インストールと有効化。
EWWW Image Optimizerの設定はデフォルト（初期状態）のままでも良いのですが、1点だけ変更しておきます。
「設定」⇒「EWWW Image Optimizer」で、ベーシックタブの「メタデータを削除」にチェックを入れて保存しておきます。
2.WebPの設定
「設定」⇒「EWWW Image Optimizer」をクリック。
WebPのタブを選択して一番上の「WebP Conversion」の項目にチェックを入れたら「保存」。
一旦保存すると同じページに以下のようなコードが出てくるのでコピー。
※「リライトルールを挿入」を押すと自動的にタグが「.htaccess」へ記述されるようになっていますが、エラーが出てしまうので手動で行います。
コピーしたコードは.htaccessというファイルにコピペしていきます。
.htaccessの記述を追記することで「WebP」に対応していないブラウザだった場合にアップロードした元画像（jpgやpngなど）を表示することができるようになります。
3.リライトルールを.htaccessに追記
.htaccessファイルへはファイルマネージャーから行けます（ロリポップならロリポップFTP）。
エックスサーバーの場合は
WordPressの入っているドメインのフォルダ。
public_htmlをクリック。
「.htaccess」のファイルにチェックを入れて「編集」。
.htaccessの一番上（先頭）に先程のコードを貼り付けて保存。
以上で.htaccessの設定は完了です。
4.一括最適化
WordPress管理画面から「メディア」⇒「一括最適化」をクリック。
右側の「再最適化を強制」にチェックを入れてから「最適化されていない画像をスキャンする」をクリック。
「○○点の画像を最適化」をクリックしたら最適化がスタートします。
完了が出たら一括変換は終了です。
再度「設定」⇒「EWWW Image Optimizer」⇒WebPのタブを選択して下の方にスクロールしてWebPマークが表示されていればOKです。
今後メディアにアップロードされる画像は自動的にWebPに変換されます。
PageSpeed Insightでチェックしてみると「次世代フォーマットでの画像の配信」の項目が合格になってました！
以上でWebPへの変換は完了です。
コメント