サイトでWebPが読み込まれているか確認する方法2つです。次世代フォーマット画像WebPやAVIFの見分け方。

2021-09-14
サイト構築

WebPの読み込みを確認する方法_004

Googleが開発した次世代フォーマットの画像形式であるWebP(ウェッピー)が本当にWebページで読み込まれているか確認する方法を2つご紹介します。

JPEGやPNGと見比べてもWebPは画像劣化が少ないので見た目で分かりません。

またWebPはブラウザによって出し分けられる画像のため、ソースコードを見ても拡張子がjpgやpngとなっていてやはり確認することが出来ません。

ChromeのNetworkタブを使うか、画像を保存すれば確認できます。

WebPが読み込まれているか確認する

最近WebPに対応するブラウザが少しづつ増えてきました。
IOSのSafariも正式にWebPに対応したので、当サイトにもWebPを導入しました。

導入後に気になるのが動作確認です。
そこで、本当に自分のサイトでWebPが読み込まれているのか確認するためにソースを確認したのですがjpgのままになっていました。

WebPの読み込みを確認する方法_001

ソースコードでは.webpと表示されない

どうやらWebPはサーバー上の.htaccessによって対応しているブラウザにはWebPを、非対応のブラウザには今まで通りjpgやpngというように出し分けて提供しているためソース上では従来の拡張子が表示されるようです。

そんなWebPの読み込みを確認する方法を2種類ご紹介します。

ポイント

.htaccessの反映に少し時間がかかるようです。
設定した直後の場合は少し時間をおき、違うページでも確認してみて下さい。

方法1.Chromeの機能でWebPか確認する

ChromeのデベロッパーツールのNetworkタブを使えば、ページで読み込まれた画像の情報を簡単に確認することが出来ますのでこの機能を使いましょう。

まずデベロッパーツールを起動します。

WebPの読み込みを確認する方法_002

ページ上で右クリック→検証

ページ上で右クリックし、メニューの下にある「検証」をクリックします。

WebPの読み込みを確認する方法_003

デベロッパーツールでNetworkタブを開き、Imgを選ぶ

Chromeのデベロッパーツールが起動しますので、Networkタブに移動します。
そしてフィルター機能で「Img」を選択しましょう。

「All」のままでもOKですが、ページで読み込まれたファイル全てが表示されますので若干見にくくなります。

WebPの読み込みを確認する方法_004

ページをリロードすると読み込まれた画像の情報が見れる

後はその状態でページをリロードしましょう。
念のためキーボードのShift+F5を押してスーパーリロードして下さい。

するとページ上で読み込まれた画像の情報が確認できます。
「Type」の欄に拡張子が表示されますので、ここがwebpになっていればOKです。
「Type」をクリックすると拡張子ごとに並べ替えることが出来ます。

ポイント

Chromeで説明しましたが、Edgeでも同様の手順で確認が可能です。

方法2.画像を保存でWebPか確認する

実はWebPなのか確認したい画像を保存しようとするだけでも拡張子が確認できます。

しかし、この方法はブラウザの画像キャッシュが邪魔になることがあります。
方法1の方が確実で早いと思いますがこちらもご紹介します・w・

まずWebPか確認したい画像の上で右クリックを押します。

WebPの読み込みを確認する方法_005

拡張子を確認したい画像の上で右クリック

そして「名前を付けて画像を保存」を押します。

WebPの読み込みを確認する方法_006

ファイル名の最後にある拡張子を確認する

すると画像名の後に「.○○」が付いており、ここで拡張子を確認できます。

しかし今回は.jpgとなっていました...
適切にWebPが設定されている場合、ブラウザの画像キャッシュが原因です。

うまくいかない場合は次の画像キャッシュの削除をお試しください。

ブラウザに保存された画像キャッシュの削除

ChromeやEdgeの場合、設定でキャッシュされた画像を削除することが出来ます。
ここではChromeを例に進めていきます。

まずは設定画面を開きましょう。

画面右上のメニュー()をクリック。
メニューが表示されたら「設定」に進む。

WebPの読み込みを確認する方法_007

プライバシーとセキュリティ→閲覧履歴データの削除に進む

設定画面が表示されたら、左側のメニューから「プライバシーとセキュリティー」を開きます。

その中に「閲覧履歴データの削除」があるのでこれを開きます。

もしくは以下のURLに直接アクセスしても移動できます。

chrome://settings/clearBrowserData
WebPの読み込みを確認する方法_008

キャッシュされた画像とファイル"のみ"チェックする

ウィンドウが開いたら「キャッシュされた画像とファイル」のみにチェックマークを絞ります。

あとは「データを削除」をクリックすればブラウザに保存された画像情報が削除されますので、もう一度画像の保存をお試しください。

Edgeの場合

Edgeの場合もほとんど同じ手順で画像キャッシュを削除できます。

WebPの読み込みを確認する方法_009

プライバシー、検索、サービスから画像キャッシュを削除可能

  1. メニューから設定を開く。
  2. 左側のメニューでプライバシー、検索、サービスに進む。
  3. 閲覧データをクリアの中で「クリアするデータの選択」を押す。
  4. 「キャッシュされた画像とファイル」のみ削除する。

こちらも以下のURLに直接アクセスすれば移動できます。

edge://settings/clearBrowserData

画像保存についての補足

ブラウザに保存された画像のキャッシュを削除したら、もう一度同じ手順で画像を保存しようとしてみます。

WebPの読み込みを確認する方法_010

拡張子が.webpに変わった!

すると先ほどと違い拡張子が「.webp」に変わっていました。

追記

この方法でWebpを保存しようとすると.jpgで保存される事を確認しました。
もしかしたら最近ブラウザの仕様変更があったのかもしれません…

これは分かりやすい方法なのですが、調べたい画像ごとに一回ずつ行わないといけないのでやはり方法1がオススメです。

まとめ

Webページで本当にWebPが読み込まれているか確認する方法2つでした。

WebPはJEPGやPNGと見比べても分からないくらい画像の劣化が少ないので、見た目ではなかなかWebPが読み込まれているかどうかが判断できません。
そんな時はこの方法をお試しください。

ちなみにGoogleが提供するツールである「PageSpeed Insights」の「次世代フォーマットでの画像の配信」というチェック項目でも確認することが出来ます。
ただ、AVIFかWebPかの判断が出来ませんので触れませんでした。

また、Chromeの拡張機能にもWebPを確認できるものがあったので試したのですが、WebPが読み込まれているのに上手く読み取れない場合があったのでここでは紹介しませんでした。

ではではこのへんで・w・

-サイト構築
-

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学