次世代フォーマット！Webp（ウェッピー）について ― コラムーベイクロスマーケティング株式会社

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の透過できる性質を兼ね備えているため、それぞれの長所を活かした画像フォーマットになっています。

WebPをpngに変換する軽量化などのメリットを持つWebPですが、Photoshopをはじめとしたデザインソフトで編集ができないなど、互換性を持たない場合もあります。
その場合にはpngなどの拡張子に変換して使用することをおすすめします。
Canvaでwebp変換する

アニメーションの作成が可能

GIF	WebP

834KB	625KB

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

まとめ

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

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

Written by koyama