WebPとは

WebP(ウェッピー)とは、Googleが開発した画質を維持したまま、ファイルサイズを軽量化することができる画像フォーマットです。拡張子は「.WebP」。
発表は2010年と、すでに10年以上経過していますが、Googleの競合であるMicrosoftやAppleの導入が遅れ、対応ブラウザが少なかったために普及していませんでした。
時間の経過とともにサポートブラウザは増え、Internet Explorer(以下、IE)のサポート終了の発表もあり、今まさにWebPを積極的に使っていくタイミングといえるでしょう。
今回はWebPのメリットや、jpg、pngなどの他フォーマットとの違いなどを紹介させていただきます。

IE以外の主要ブラウザにWebP対応

まずWebPの対応ブラウザですが、最新バージョンのブラウザであれば、IE以外ほぼすべてに対応しています。
ただしIEに関しては、最新バージョンのIE11でも対応していません。WebPが普及しなかった最大の要因ともいえる部分ですね。

iPhoneなどのiOSでも利用可能に

バージョンアップにより、iPhoneなどのiOSでも利用が可能になりました。
2020年9月16日にリリースされた、iOS14以降から対応が可能なため、国内のiPhoneユーザーのほとんどは対応しているといえるでしょう。

WebPのメリット

画像形式 圧縮方法 透過 アニメーション
WebP 両方
JPEG 非可逆圧縮 × ×
PNG 可逆圧縮 ×
GIF 可逆圧縮

WebPのメリットは、画質を維持したままファイルサイズが軽量化できることです。jpg、pngと比較するとおよそ30%の軽量化が見込めます。
画像を軽量化できれば、ページの表示速度を上げることにもつながり、ページを閲覧するユーザーへの満足度アップにもつながります。
ページ表示が遅ければ遅いほど離脱につながりやすいので、そういった点でWebP導入はメリットがあるのです。

ファイルサイズ比較

jpg WebP
460KB 129KB

具体的にどれくらい軽量化が図れるのかというと、Googleの発表によれば、jpgと比較して25~34%、pngは26%の軽量化が見込めるようです。
上に設置した画像は、jpg:461KB、WebP:129KBとなり、およそ28%ファイルの軽量化ができました。

jpgとpngの特性を併せ持つ画像フォーマット

WebPは、jpgと同じ非可逆圧縮に対応しています。非可逆圧縮とは、人間の目では判別しづらいデータを削除をして圧縮するという仕組みでです。そのため、画質をほとんど損なうことなく、ファイルサイズを軽くできます。
さらに、pngと同様に透過にも対応しています。pngは可逆圧縮という圧縮しても画質を維持できる特性から、ファイルが重くなりやすいデメリットがあります。
一方、WebPならjpgの軽さとpngの透過できる性質を兼ね備えているため、それぞれの長所を活かした画像フォーマットになっています。

アニメーションの作成が可能
GIF WebP
834KB 625KB

WebPはGIF同様に、アニメーションにも対応しています。
どちらも問題なくアニメーションができており、画質もまったく変わらず、ファイルサイズも軽くなりました。
GIFアニメはファイルサイズが重くなりがちなので、画質を落とさずに軽くできる点ではWebPのほうが優位だといえるでしょう。

まとめ

ファイルサイズを軽量化できる上、背景透過やGIFアニメまでにも対応している万能フォーマットWebP。
画像メインのページを作りたい、目立つようにサイズの大きな画像を使いたい、けど表示速度が遅くなってしまう。そんなときにはWebPを活用してみるといいでしょう。
Web制作において、将来的にはjpgやpngに並ぶスタンダードなフォーマットになりそうです。
そんなWebPを使ってみたい、ページの表示速度を改善したいなど、ご興味のある方はお気軽にお問い合わせください。
Webサイト制作のサービス内容はこちらから

 

ページ表示速度を改善して、ストレスフリーな見やすい使いやすいサイトづくりを目指しましょう!

Written by

売上が上がらない、人手が足りない…EC運営代行歴15年のプロが解決 繁忙期猫の手も借りたい!そんなあなたに代わって制作いたします。バナー・LP・商品画像・イラスト