次世代画像フォーマット「WebP」に対応する方法

こんにちは。FASTCODINGデザイナーの七転び八重子です。
page speed insights（ページスピードインサイト）でページ速度の判定をすると、対策の１つに「次世代フォーマットでの画像の配信」という項目があります。
今回は、次世代フォーマットでの画像「WebP」の特徴や作成方法についてまとめてみたいと思います。

JPAGやGIFなど様々な画像形式をまとめているので合わせてご覧ください。

FASTCODING BLOG

Webサイトに最適な画像形式は何？

こんにちは。FASTCODINGデザイナーの七転び八重子です。Webサイトで利用する画像といっても、GIF、JPEG、PNG、SVG、TIFF、BMPなど様々な画像形式があります。最近では、次世代画像フォーマット「WebP」などが新しく登場していますね。今回は、それぞれの画像の特徴と目的に応じた使い方をまとめました。Webサイトで利用する場合の使い分けもまとめているので参考にしてみてください。目次画像形式と特徴一覧 Webサイトで利用する場合まとめ画像形式と特徴一覧画像形式と拡張子パソコンで画像データを扱う際、ファイル名の後ろに「...

WebP（ウェッピー）とは？
- 他の画像形式とWebPの比較
- WebP対応ブラウザ
WebP画像の作成方法

WebP（ウェッピー）とは？

Webp（ウェッピー）とはGoogleが開発した高圧縮率の次世代の静止画フォーマットで、拡張子は「.WebP」です。ページスピードの測定ツールのpage speed insights（ページスピードインサイト）で、「次世代フォーマットでの画像の配信」という項目の中で「Webp」の使用が推奨されています。Googleは、同等の画質のGoogleは、PNGと比較してサイズが26% 、 JPEG画像では25～34%小さくなると発表しています。
参照：https://developers.google.com/speed/webp

他の画像形式とWebPの比較

画像形式	圧縮形式	画像の透過	アニメーション対応	色数
WebP	非可逆圧縮	○	○	フルカラー
JPEG	非可逆圧縮	×	×	フルカラー
GIF	可逆圧縮	×	○	256色
PNG	可逆圧縮	○	×	フルカラー

WebP対応ブラウザ

https://caniuse.com/webp
WebPは全てのブラウザに対応しているわけではありません。対応していないブラウザには従来のJPEG、PNGなどの画像形式を使用する必要があります。

ブラウザ	IE	Edge	Firefox	Chrome	Safari
対応状況	×	○	○	○	×

WebP画像の作成方法

Webデザインで利用する主要アプリケーション、Sketch,Photoshop,AdobeXD,ではWebPの書き出しに現在対応していません。（2021年12月現在）
使用する場合は、変換ソフトを利用します。

Squoosh

Google開発のオンラインコンバーターです。
https://squoosh.app/

「Drop OR Paste」に変換したい画像をドラッグ＆ドロップします。

左側の画像が元画像、右側の画像が変換後の画像です。画面を見ながら調整できるので、便利ですね。WebP以外の画像形式への書き出しも可能です。

まとめ

今後、WebPは普及していくと思いますが、今は対応ブラウザや変換ソフトが必要な事から、利用には検討が必要です。画像を軽くすることで、ページスピードの改善に繋がります。

ファーストコーディングでは、完全成果報酬でGoogle PageSpeed Insightsで高スコアを獲得できるように、Webサイトを高速化するサービスを提供しています。