Googleが開発した次世代フォーマットの画像形式であるWebP（ウェッピー）が本当にWebページで読み込まれているか確認する方法を２つご紹介します。
JPEGやPNGと見比べてもWebPは画像劣化が少ないので見た目で分かりません。
またWebPはブラウザによって出し分けられる画像のため、ソースコードを見ても拡張子がjpgやpngとなっていてやはり確認することが出来ません。
ChromeのNetworkタブを使うか、画像を保存すれば確認できます。
この記事の目次
WebPが読み込まれているか確認する方法
最近WebPに対応するブラウザが少しづつ増えてきました。
IOSのSafariも正式にWebPに対応したので、当サイトにもWebPを導入しました。
導入後に気になるのが動作確認です。
そこで、本当に自分のサイトでWebPが読み込まれているのか確認するためにソースを確認したのですがjpgのままになっていました。
ソースコードでは.webpと表示されない
どうやらWebPはサーバー上の.htaccessによって対応しているブラウザにはWebPを、非対応のブラウザには今まで通りjpgやpngというように出し分けて提供しているためソース上では従来の拡張子が表示されるようです。
そんなWebPの読み込みを確認する方法を２種類ご紹介します。
ポイント
.htaccessの反映に少し時間がかかるようです。
設定した直後の場合は少し時間をおき、違うページでも確認してみて下さい。
方法１．Chromeの機能でWebPか確認する
ChromeのデベロッパーツールのNetworkタブを使えば、ページで読み込まれた画像の情報を簡単に確認することが出来ますのでこの機能を使いましょう。
まずデベロッパーツールを起動します。
ページ上で右クリック→検証
ページ上で右クリックし、メニューの下にある「検証」をクリックします。
デベロッパーツールでNetworkタブを開き、Imgを選ぶ
Chromeのデベロッパーツールが起動しますので、Networkタブに移動します。
そしてフィルター機能で「Img」を選択しましょう。
「All」のままでもOKですが、ページで読み込まれたファイル全てが表示されますので若干見にくくなります。
ページをリロードすると読み込まれた画像の情報が見れる
後はその状態でページをリロードしましょう。
念のためキーボードのShift＋F5を押してスーパーリロードして下さい。
するとページ上で読み込まれた画像の情報が確認できます。
「Type」の欄に拡張子が表示されますので、ここがwebpになっていればOKです。
「Type」をクリックすると拡張子ごとに並べ替えることが出来ます。
ポイント
Chromeで説明しましたが、Edgeでも同様の手順で確認が可能です。
方法２．画像を保存でWebPか確認する
実はWebPなのか確認したい画像を保存しようとするだけでも拡張子が確認できます。
しかし、この方法はブラウザの画像キャッシュが邪魔になることがあります。
方法１の方が確実で早いと思いますがこちらもご紹介します・ｗ・
まずWebPか確認したい画像の上で右クリックを押します。
拡張子を確認したい画像の上で右クリック
そして「名前を付けて画像を保存」を押します。
ファイル名の最後にある拡張子を確認する
すると画像名の後に「.○○」が付いており、ここで拡張子を確認できます。
しかし今回は.jpgとなっていました...
適切にWebPが設定されている場合、ブラウザの画像キャッシュが原因です。
うまくいかない場合は次の画像キャッシュの削除をお試しください。
ブラウザに保存された画像キャッシュの削除
ChromeやEdgeの場合、設定でキャッシュされた画像を削除することが出来ます。
ここではChromeを例に進めていきます。
まずは設定画面を開きましょう。
画面右上のメニュー（）をクリック。
メニューが表示されたら「設定」に進む。
プライバシーとセキュリティ→閲覧履歴データの削除に進む
設定画面が表示されたら、左側のメニューから「プライバシーとセキュリティ」を開きます。
その中に「閲覧履歴データの削除」があるのでこれを開きます。
もしくは以下のURLに直接アクセスしても移動できます。
chrome://settings/clearBrowserData
キャッシュされた画像とファイル"のみ"チェックする
ウィンドウが開いたら「キャッシュされた画像とファイル」のみにチェックマークを絞ります。
あとは「データを削除」をクリックすればブラウザに保存された画像情報が削除されますので、もう一度画像の保存をお試しください。
Edgeの場合
Edgeの場合もほとんど同じ手順で画像キャッシュを削除できます。
プライバシー、検索、サービスから画像キャッシュを削除可能
- メニューから設定を開く。
- 左側のメニューでプライバシー、検索、サービスに進む。
- 閲覧データをクリアの中で「クリアするデータの選択」を押す。
- 「キャッシュされた画像とファイル」のみ削除する。
こちらも以下のURLに直接アクセスすれば移動できます。
edge://settings/clearBrowserData
画像保存についての補足
ブラウザに保存された画像のキャッシュを削除したら、もう一度同じ手順で画像を保存しようとしてみます。
拡張子が.webpに変わった！
すると先ほどと違い拡張子が「.webp」に変わっていました。
追記
この方法でWebpを保存しようとすると.jpgになってしまうこともありました。
もしかしたら最近ブラウザの仕様変更があったのかもしれません…
後日確認したところ、ちゃんとWebPになっていました。
当サイトで使用しているWebP生成プラグインのタイムラグだったのかも。
これは分かりやすい方法なのですが、調べたい画像ごとに一回ずつ行わないといけないのでやはり方法１がオススメです。
まとめ
Webページで本当にWebPが読み込まれているか確認する方法２つでした。
WebPはJEPGやPNGと見比べても分からないくらい画像の劣化が少ないので、見た目ではなかなかWebPが読み込まれているかどうかが判断できません。
そんな時はこの方法をお試しください。
ちなみにGoogleが提供するツールである「PageSpeed Insights」の「次世代フォーマットでの画像の配信」というチェック項目でも確認することが出来ます。
ただ、AVIFかWebPかの判断が出来ませんので触れませんでした。
また、Chromeの拡張機能にもWebPを確認できるものがあったので試したのですが、WebPが読み込まれているのに上手く読み取れない事もあったのでここでは紹介しませんでした。
ではではこのへんで・ｗ・
