WebPのすすめ

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

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

WebP形式

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

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

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

他の画像形式との比較

JPG形式

WepP形式

PNG形式（透過）

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

TinyPNGを用いたPNG形式（透過）

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

WebP形式（透過）

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

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

まとめ

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

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