Webpって何だろう？jpgやpngとどう違う？？
というわけで今回は画像フォーマット「Webp(ウェッピー)」をご紹介します。
Webpについて
Webp（ウェッピー）とは、Googleが開発した新しい画像フォーマットです。
画像フォーマットというと「jpg」や「png」などがありますが、どう違うのか？
メリットやデメリット、使い方などをご紹介していきます。
Webpのメリット
サイズを軽くしても画質が劣化しない
Webpは画像サイズを軽くしても、画質の劣化を抑えることができます。
ページの読み込みスピードが上がる
上記で述べた通り、画像サイズを軽くしても画質が劣化しないので、
多くの画像を使用しても、画像の重さによるページ読み込みの遅延影響を受けにくくなります。
SEOに良い影響を与える
Googleなどの検索エンジンは、ページのロードスピードをランキング要因の一つとしています。
Webpのデメリット
Webpのデメリットとしては、古いバージョンのブラウザでは非対応の場合があるということです。
2025年5月時点でWebpが非対応のブラウザ（ヴァージョン）
・Internet Explorer 11以前
Microsoftの旧ブラウザであり、WebPをネイティブにサポートしていません。
・KaiOSブラウザ（バージョン2.5）
一部のフィーチャーフォンで使用されるKaiOSの古いバージョンでは、WebPがサポートされていません。
・旧版のAndroid標準ブラウザ（4.1以前）
Android 4.2以降の標準ブラウザではサポートされていますが、それ以前のバージョンでは対応していません。
・旧版のSafari（バージョン13以前）
Safariはバージョン14以降でWebPをサポートしています。
2025年現在、Webpをサポートしていないブラウザの市場シェアは約0.5％未満と推定されていて、
ほとんどのウェブサイトではWebp形式のみを使用しても問題はなさそうに感じます。
画像をWebpとjpg・pngと出し分けたい
基本はWebpを使いたいけどWebpが表示されないブラウザの場合はjpgやpngを出し分けたいという場合は
「picture」タグを使えば可能です。
picureタグでは様々な属性を使用して、画像の出し分け方を指定することができます。
srcset ・・・ 条件に一致したときに表示する画像のパス
media ・・・ ブラウザ幅に応じて表示するものを出し分ける（min-width,max-midth）
type ・・・ jpg,png,webpなど画像形式を記述
width ・・・ 画像の幅を記述
height ・・・ 画像の高さを記述
実際の使用例を見てみましょう↓
<picture>
<source media="(max-width: 767px)" srcset="/images/blog-sp.webp" type="image/webp">
<source media="(max-width: 767px)" srcset="/images/blog-sp.png" type="image/png">
<source srcset="/images/blog-pc.webp" type="image/webp">
<img src="/images/blog-pc.png" alt="トップ背景">
</picture>
これはメインでwebpで画像を出そうとしてます。767pxでブレイクポイントを設定して
pcとspで画像を出し分けるパターンですね。
また、webpで表示されないブラウザのフォローとして、imgタグを使用しております。
まとめ
というわけで今回は、Webpについてご紹介しました。是非ご活用ください！！
