COLUMN コラム

みなさんは”WebP”画像使っていますか？

以前の記事でWebPについて少し紹介しましたが、今回はその特徴や使い方について詳しく紹介してみようと思います。

https://dol.co.jp/column/jpg%e3%80%81gif%e3%80%81png%e3%80%81svg%e3%80%81webp%e3%81%ae%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88%e3%83%bb%e3%83%87%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88/

1.WebPとは

WebPとは、Googleが開発した新しい画像フォーマットです。拡張子はそのまま”.webp”

WebPはPNGやJPEG画像の画質を保ったままファイルサイズを軽量化することが出来ます。

2.WebPのメリット

ファイルの軽量化

まず一つ目はファイルの軽量化です。

ファイルを軽量化することで画像の読み込み時間を短縮し、PNGやJPEGを使った場合と比べWebサイトを高速化することが出来ます。

その圧縮率はPNG画像の場合26%、JPEG画像の場合25~34%も小さくすることが出来ます。

画像フォーマットの統一

今までは背景が透過されたものはPNG、写真など色が多い画像はJPEG、アニメーションの場合はGIF、と場面に応じてフォーマットを使い分けてきました。ですがWebPは透過やアニメーションにも対応しているため画像フォーマットを統一することが出来ます。

コーディングの際にフォーマットを気にしないで済むのは非常にありがたいですね。

3.WebPのデメリット

そんな便利なWebPにもデメリットはあります。

全てのブラウザに対応している訳ではない

WebPは全てのブラウザが対応している訳ではありません。

ですが、今まで対応していなかったsafariが、2020年9月16日にiOS版safari 14.0~で対応され、

2020年11月12日にはMacOS Big Surのリリースにより、主要なブラウザ全てでWebPが表示されるようになりました。

なので、今ではデメリットというほどではありません。

その他ブラウザのWebP対応はこちらをご覧ください。

・“webp” | Can I use… Support tables for HTML5, CSS3, etc

WebPへの変換が面倒

WebPを利用するには元となるPNG、JPEG画像を変換する必要があります。

変換する方法は、Webアプリケーションを利用する、コマンドラインで変換する(黒い画面)、フォトショップを利用するなど方法はありますが、特にコマンドラインから変換する方法は慣れていないと難しいかもしれません。

ここでは一番簡単なWebアプリケーションを使った変換方法をご紹介します。

squoosh

squooshは2018年にGoogleが開発した画像変換ツールです。

変換したい画像をドロップし、右側のメニューで変換する際の詳細を設定することが出来ます。

WebPに変換するには、フォーマット形式をWebPと選択するだけです。

参照：squoosh

おわりに

今回はWebPについて紹介しました。

Webサイトを制作する上で表示速度の向上は常に意識しないといけません。今サイトを作っている方やこれからサイトを作ろうと思っている方はぜひ、新時代のフォーマット形式”WebP”を使用してみてください。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。