次世代フォーマット「WebP」をプラグインで簡単に実装する方法!!

 
マーシー
この記事ではプラグインを使って【WebPを実装する方法】ついて紹介しているよ!!

次世代フォーマット WebP (ウェッピー)

WebP (ウェッピー) とは、Googleが開発している静止画フォーマットで拡張子は「.webp」です。容量が重くなりがちな画像のトラフィック量を軽減することで、ページの表示速度を短縮することができます。

WebP (ウェッピー)

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。

ファイルサイズは非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。

引用 : フリー百科事典『ウィキペディア(Wikipedia)』

ブラウザの対応状況

画像は2019年12月現在のもの。 IE / Safari / iOS Safari が未対応ですが、Globalでは80%が対応済み。

最新の対応状況の確認はコチラから!!

WebPのブラウザの対応状況は、Globalでは80%を超えるブラウザが対応している状況です。しかしiPhoneのデフォルトブラウザである「Safari」が対応していない為、日本におけるiPhoneの普及率を考慮すると「WebP」シェア率の向上はSafariの対応待ちということですね。

「WebP」実装プラグイン

WordPressプラグイン「EWWW Image Optimizer」を使用することで、簡単に次世代フォーマットWebPを実装することができます。

基本設定

WordPressプラグイン「EWWW Image Optimizer」のインストール、基本設定と使い方は下記のページで紹介しています。まだ導入していない方は参考にどうぞ!!

【高速表示必須】画像データを最適化「EWWW Image Optimizer」で一括圧縮!!

「WebP」実装の手順


STEP①

「WebP」をクリックして、項目の一番上にある「JPG、PNGからWebP」にチェックを入れます。チェックを入れたら「変更を保存」をクリックします。


STEP②

「.htacsses」ファイルにリライトルールを追記します。左下にある「リライトルールを挿入する」をクリックすることで自動で追記してくれます。

「リライトルールを挿入する」ボタンをクリックした後は、一括最適化をしてアップロードしている画像のWebPフォーマットを作成しましょう。


STEP③

アップロード済の画像をWebPに変換するために「最適化を強制」にチェックを入れて「最適化されていない画像を最適化」ボタンをクリックします。

一括最適化画面にはダッシュボードの「メディア」下部にある、一括最適化をクリックすると一括最適化の画面に切り替わるよ!!


STEP④

一括最適化が完了したら、「メディア」の中にあるライブラリで画像のWebPフォーマットが作成されているか確認しましょう。

画像最適化の部分にWebPの表示があれば無事WebPフォーマットが作成されています。もしWebPの表示がなければ「再最適化」をクリックすることで個別に最適化してWebPフォーマットを作成することができます。


STEP⑤

ここまで確認できれば最後に「EWWW Image Optimizer」の設定に戻り「WebP」の項目を確認します。画面左下に「ルールが正常に検証されました」と表示されて緑色のWEBPに表示が変わればOKです。

先ほどまでは赤色でPNGと表示されていた部分が、緑色でWEBPに変わって入れば無事設定が完了しています。


ブラウザで確認

Google Chromeを使用することで、画像がWebP表示されているかの確認ができます。

Google Chromeから調べたいURLを入力し表示された画面で、「表示」「開発/管理」「デベロッパーツール」と進みます。

「Network」「img」と進み、表示されているページを下にスクロールしていきます。

画面をスクロールしていくとTypeの場所に画像のフォーマットが表示されるので、WebPと表示されていけばブラウザ上で無事「WebP」が表示されていることになります。