今回はWebP(ウェッピー)の紹介をします。
WebPとは?
WebPとは、Googleが開発した静止画像フォーマットで、拡張子は.webpです。
2010年9月30日から提供が開始され、今ではよく使われるブラウザ(Chrome、Microsoft Edge、Firefox、Safari、Opera等)で対応されています。
そんなWebPですが、最大の特徴はJPEGやPNG等よりも圧縮率が高いことです。
容量が軽くなればWEBサイトの表示スピードが上がり、ユーザーの離脱率が減ったり、SEOにも効果があるので良いですね。
圧縮率が高いと画質が悪くなるのでは?と思うかもしれませんがこの形式は画質をそこなうことなく圧縮されます。
本当にそうなのか比べてみましょう。
JPEG(201KB)
WebP(28KB)
JPEG(197KB)
WebP(27KB)
容量はとても軽くなりましたが、画質は変わっていないように感じます。驚きですね!
| 画像形式 | WebP | JPEG | PNG | GIF |
|---|---|---|---|---|
| 拡張子 | .webp | .jpg/.jpeg | .png | .gif |
| 圧縮 | 非可逆圧縮 | 非可逆圧縮 | 可逆圧縮 | 可逆圧縮 |
| 透過 | × | × | ○ | △ |
| アニメーション | ○ | × | × | ○ |
| カラー数 | 1670万色以上 | 1670万色以上 | 256～1670万色以上 | 256色 |
JPEGやPNG以外にGIFも変換できるので有難いです。
ただ、PhotoshopやIllustratorで保存するときにwebp形式が無いので、変換する必要があります。
例えば、画像データを修正⇒JPEG等で保存⇒WebPに変換
と手間が少しかかるのがデメリットといえますね。
変換ツール
Squoosh
Googleが開発した変換ツールです。
https://squoosh.app/
サルワカ道具箱
複数枚を一括で変換できるです。
https://saruwakakun.com/tools/png-jpeg-to-webp/
Syncer
シンプルなつくりで分かりやすいです。
https://lab.syncer.jp/Tool/Webp-Converter/
