WebPのすすめ

開発チーム豊桑です。毎日暑いですね・・・寒いのにも弱いのですが、暑いのにも弱い、自他共に認めるわがままボディです。

今回は画像形式「WebP(うぇっぴー)」のお話です。

WebP形式

Googleが開発した画像形式です。既存のJPG形式と比較しても画質を維持しながら軽量なうえ、PNG形式と同様に半透明(アルファチャンネル)もサポートしています。しかしながらMac/iOSのSafariやInternet Explorerで表示することができないという課題を抱えていたため積極的に使うことができませんでした。

しかし、2020年秋~冬にかけてのiOSやMacのバージョンアップによりWebPがサポートされ、更にInternet Explorer(IE)が2022年6月15日をもってサポート終了となることから、これで気兼ねなくWebPを使っていくことができます。(IEの終了により気兼ねなくできるようになることは他にもたくさんありますが・・・)

※あったらいいねの制作するWebサイトは既にInternet Explorerを動作保証対象外としています。

他の画像形式との比較

JPG形式

JPG形式 233KB (画質70%)
JPG形式 233KB (画質70%)

WepP形式

 WebP形式 80KB (画質70%)
WebP形式 80KB (画質70%)

PNG形式(透過)

PNG形式では半透明(透過)処理を行うことができます。より自由度の高いデザインを作ることができますが、一方で半透明部分の情報量が増えるためファイルサイズも増えてしまいます。

PNG形式(透過) 1,693KB

TinyPNGを用いたPNG形式(透過)

TinyPNG というサイトでは、PNG形式の画像をいい感じに圧縮してくれます。これまではWebP形式が使えなかったのでこういったサイトを使ってPNG画像を圧縮して、サイトで表示する画像の軽量化を図っていました。TinyPNGを通したPNG形式画像とも比較してみます。

PNG形式(tinypng/透過) 281KB

WebP形式(透過)

 WebP形式 226KB (画質70%)
WebP形式 226KB (画質70%)

いずれも、ブラウザ上で見る限りでは見た目にほとんど差はありません(TinyPNGを通したものをよーーーーく見るとちょっと粗くなっている部分がありますが)。一方で、ファイルサイズの差は歴然としています。

形式ファイルサイズ
JPG233KB
WebP80KB
PNG(透過あり)1,693KB
TinyPNGを通したPNG(透過あり)281KB
WebP(透過あり)226KB
各形式とファイルサイズの比較

JPGを使おうがWebPを使おうが、Webサイトの見た目としての変化はありません。ですがファイルサイズは間違いなく軽量化でき、塵も積もれば山となってWebサイトの表示高速化に寄与します。加えて、TinyPNGを通したPNG画像よりもWebP画像の方が軽いことがわかったので、もはやTinyPNGを使うことはなくなったかな・・・と思います。

まとめ

  • WebPは画質が変わらないのに軽いよ!
  • 今まで使いづらかったけど環境の整備(OSやブラウザのアップデート)が進んで使えるようになったよ!
  • WebP積極的に使おう!

株式会社あったらいいねでは、外から見えない部分にもこだわってサイトづくりを行っていきます。

月別の一覧

2021年

2020年