Webpのデメリットが解消されてきた

インターネット

 

Googleが開発している画像フォーマット、Webpを
導入するか、しないかと悩んでいる人も多い状況でした。

 

これまでWebpは対応しているブラウザが少ないことが大きなデメリットのためです。

 

しかし、2020年9月時点での対応ブラウザは、

  • Chrome
  • Firefox
  • Edge
  • Safari

IE以外の主要ブラウザに対応となりました。
それにより、今までのデメリットが解消されてきたので
導入する人や企業も多くなると思われます。

 

shopifyでは、すでにWebp画像フォーマットの自動サポートを追加しています。

 

Webpとは

Webpは、PNGやJPEG、GIFの従来のファイル形式のメリットを持ちつつ、
見た目をほぼ変えずにファイルサイズを軽量化できる最新の画像フォーマット。

 

拡張子は「.webp」。

 

例えば「abc.jpg」であればjpeg形式です。
Webp画像の場合は「abc.webp」という拡張子となります。

 

 

webpの確認方法をご紹介します!

 

当サイトのトップページの前半では、
私が運用しているshopifyサイトURLを公開しています。
ぜひ、当ページと共にご覧ください!

 

 

【3選】ピックアップ!Webpの確認方法とは

  1. 保存画面からチェック
  2. デベロッパーツールからチェック
  3. chrome拡張機能ツールからチェック

 

1.保存画面からWebpかどうか確認

webp確認

 

画像を選択して「右クリック」をする

 

webp確認

 

「名前をつけて画像を保存」をクリック。

 

ファイル名が「.webp」拡張子になっていれば、webp変換されていることになります。

 

しかし、「.jpg」や「.png」になっている場合もあります。
Webp画像になっている場合は、
キャッシュを削除・更新することで「.webp」に変わります。

 

 

webp確認

 

chromeの「設定」→「その他のツール」→「閲覧履歴を消去」で
消去できます。

 

webp確認

 

一度で変わらない場合は、何回か繰り返しキャッシュの削除をしてください。

 

ただ、ツールを使用する方が簡単に分かります。
ツールは以下の方法です。

 

2.デベロッパーツールからWebpかどうか確認

画像のあるサイトを開いた状態で
「F12」ボタンをクリック。
【もしくは右クリック→「検証」】

 

webp確認ツール

 

デベロッパーツールの「Network」→「IMG」→「Type」を見ます。

 

ここで
Webp変換画像であれば、「webp」と表示され、

 

jpgやpngの場合は「jpeg」「png」となります。

 

見た目では分かりづらいですが、すぐに判断できます!

 

3.chrome拡張機能ツールからWebpかどうか確認

無料のGoogle chromeの拡張機能ツールを使うと更に便利!

 

Webp画像を採用しているサイトが
すぐに見分けをつけることができる♪

 

「WebP Highlighter」を利用♪

 

webp確認拡張ツール

 

Googleの右上にツールのボタンが表示されます。
クリックすると
WebP Highlighterが表示されるので、さらにクリック!

webp確認拡張ツール

 

上位2つのチェック欄で拡張ツールON/OFFを切り替えることができます。
【チェックを入れると「ON」】

 

webp確認拡張ツール

 

詳細はこちら

webp確認拡張ツール

 

  • Enabled」:ツール自体のON・OFF切替え
  • Enabled for this site」:表示しているサイトのON・OFF切替え

 

webp確認拡張ツール

 

Webp変換されている画像にはマークが表示されます。

 

▼ハイライトの色の説明▼

  • 「緑」:非可逆(ロッシー)圧縮【JPEGからの変換など】
  • 「紫」:可逆(ロスレス)圧縮【PNGからの変換など】
  • 「赤」:アルファチャンネルなど拡張を含む画像【透過・アニメーション・カラープロファイル】

 

もし、マークされていない(表示されない)場合は、
まだWebp変換されていない画像か、「更新ボタン」を一度押してみてください。

 

■表示されているサイトだけでなく、ツール自体ONにしている場合、
違うサイトを見ても、マークが表示されます。

 

一度、確認のためにも
他のサイトをチェックしてみても参考になりますね。

 

※常にツールをONにしないようにしましょう。
サーバーに負荷がかかりますので、チェックしたいときにONにすると
いいですよ。

 

楽天市場などの画像が多いECサイトやLPページでは
効果が抜群なのでWebpの利用がすでにされています。

 

画像が多くなりがちな通販サイトでは高いSEO効果が期待♪

 

shopifyの管理画面でもチェック

webp確認拡張ツール

 

ECサイトでは高画質な画像を載せることが必須ですが
高品質の画像はファイルサイズがどうしても大きくなってしまいます。

 

それではShopifyストアの速度が遅くなり悪化。

 

Webp画像を利用することで、
スペースをとりすぎずにページ速度に影響させません。
高画質のまま軽量化を実現♪

 

Googleが
webpを利用すると約25〜35%軽量化すると発表しています。

 

 

【最後におまけ】「ページまるごとWebP変換」でサイト全体をチェック!

 

ページまるごとWebP変換

 

↑ページ全体を確認できるレポートツール。【無料】

 

■すでにwebp画像を変換済みの場合

 

どのくらいwebpが利用されているか、などの確認ができる

 

■まだwebp画像を変換していない場合

 

もし、webpをサイトに導入したら、
どのくらい画像が軽量化されるかを確認できる

 

変換されたWebp画像ファイルは一括ダウンロードができます。

 

  1. チェックするページのURL
  2. 通知先メールアドレス

 

この2点を入力すると無料でチェックできます。
メールアドレスは、シュミレーションに時間がかかる場合があり、
準備ができたら通知してくれるためのようです。

どちらかを選択↓

  • 「スマートフォンとしてアクセス」
  • 「PCブラウザとしてアクセス」

 

すでにWebp変換済みですが、チェックしてみました。↓

 

ページまるごと変換ツールでチェック

 

このように、
Googleが推進する次世代フォーマット「Webp」は
軽量化を手助けしてくれる画像です。

 

Webp画像形式の最大の特徴は
「非可逆圧縮【JPEG】」と「可逆圧縮【PNG】」を併用する事ができる点。

 

見た目は変わらないのに軽量化されます。

 

shopifyではWebp画像フォーマットの自動サポートをしています。
ECサイトには必須のフォーマットですね。