見出し画像

WebPについて

gun

2022.2.21

少し前にWebPについて質問を受けたことがあるので、どんなものかまとめました。

WebP（ウェッピー）とは

oogleが開発した画像形式。画像の品質を保ちながら軽量化できることからWebサイトの表示速度改善方法の一つとして推奨されています。
PNGと比較して26%、JPEGと比較して25～34%データサイズが小さくなるといわれています。

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
【引用】Google Developers：WebP
https://developers.google.com/speed/webp

JPG、PNG、GIFと比較

図1


サポートブラウザ
chrome、Firefox、Edge、Safari（macOS Big Sur 11以降、iOS14以降）、Operaなどでサポート。Can I useによると、サポート率は90％以上になっています（2022年2月時点）。

--【参考】------------------
Google Developers
https://developers.google.com/speed/webp/faq#which_web_browsers_natively_support_webp
------------------------------


画像2

【引用】Can I use：WebP image format
https://caniuse.com/webp

・非対応ブラウザ
2022年2月時点でWebP非対応の主要ブラウザは以下になります。
　IE（全てのバージョン）
　safari（macOS Catalina以前、iOS バージョン13以前）

非対応ブラウザでは、サーバ設定やHTMLでjpgなどへ出し分けが対応できます。
HTMLでの出し分けは、<picture>タグを使って以下のように記述をします。WebPに対応しているブラウザはxxxx.webpが表示され、非対応ブラウザではixxxx.jpgが表示されます。

<picture>
<source srcset="xxxx.webp" type="image/webp">
<img src="xxxx.jpg" alt="">
</picture>

IEは<picture>に対応していませんが、、Polyfill（ポリフィル）を使用することで対応が可能。polyfill.ioが勧められてることが多いようです（知識不足なので要勉強）。

サーバ設定での出し分けは、.htaccessに出し分けの記述をしますが、書き方はWordPressの「EWWW Image Optimizer」プラグインで提示される方法を参考にされることが多いようです（知識不足なので要勉強）。

--【参考】------------------
KAITEKI CHOKIN：WebP対応/非対応ブラウザで画像を表示させる方法2選。PC、スマホで切替も
https://kaiteki-chokin.com/coding-webp/
Qiita：.htaccessによるWebPの選択的レスポンスとその問題点と改善案
https://qiita.com/miyanaga/items/6570c3c9ae8e15dbb57c
アイデアマンズブログ：新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？https://blog.ideamans.com/2019/04/webp-direction.html
------------------------------


ブラウザのサポート率は高くなっていますが、サポートされていない一部ブラウザや画像編集ソフトもあります。
画像編集ソフトの代表的なところで、Photoshop 23.2でサポートされるようになりました。それ以前のバージョンでは「WebPShop」プラグインの使用で編集が可能。
Adobe illustrator、Adobe XDなどはサポートされていないようです。

画質を保ったままデータサイズを小さくして、サイトの表示速度を改善できるため導入される機会が増えていくと思われます。