検索ランキングの要素の一つにに加わったCore Web Vitals(コアウェブバイタル)。
その指標を調べるため、PageSpeed Insight(ページスピードインサイト)を使っていると、画像軽量化のためにWebP(ウェッピー)などの次世代フォーマットでの画像配信を指摘されることがよくあります。
PageSpeed Insight(ページスピードインサイト)画面

これまでは対応ブラウザの少なさから次世代フォーマットの使用は敬遠されがちでしたが、最近ではWebP(ウェッピー)を積極的に使える環境になってきました。

そこで、画像軽量化におすすめなWebP(ウェッピー)の特徴や変換の仕方を解説していきます。
画像ファイルをWebP(ウェッピー)に変換するだけで、画像容量が大きく圧縮され、サーバー負担も減るため、内容を確認し積極的に使っていきましょう。

WebP(ウェッピー)とは

WebPとは、 Googleが開発している非可逆圧縮の画像フォーマット です。(拡張子 .webp)
Googleによると、ほぼ同等の画質の場合、PNGと比べ約26%、JPEGと比べ約25〜34%軽くできると公表しています。

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

訳:WebPロスレス画像は、PNGと比較してサイズが26%小さくなっています。WebPの不可逆画像は、同等のSSIM品質インデックスで同等のJPEG画像よりも25〜34%小さくなります。

引用元:Google Developers

WebP形式の画像を利用すれば、JPEGやPNGよりも軽量な上、キレイな画像を扱うことができます。
また、WebPは非可逆圧縮画像ですがアフファチャンネルを扱えるため、透過ができるのも特徴です。

WebPの対応ブラウザ

WebPはJPEGやPNGよりも軽量ですが、対応ブラウザの心配をする人も多いでしょう。
ですが、実は、WebPは現在、主要ブラウザのほぼ全てで対応可能になっています。
対応ブラウザ

引用元:Can I use

2018年、『Firefox』『Microsoft Edge』がWebPに対応することを発表し、2020年には『Safar14とシステムベース(iOS14、iPadOS14、macOS11 Big Sur)』が正式にサポートされたことにより、Google Chromeをはじめ、主要ブラウザのほぼ全てで対応可能となりました。

また、2021年8月にはMicrosoftのサービスとしてのIEのサポートが終了することになり、大きな対応負荷もなくなりました。
IEのサポート終了には、WebP以外の色々な面で嬉しいですね!

今後、Core Web Vitals(コアウェブバイタル)も導入され、SEOでもサイトの読み込み速度が重要視される中、WebPの利用頻度はますます高くなっていくことは安易に想像できます。

WebPとJPEG、PNG、GIFの違い

画像形式 圧縮方法 透過 アニメーション
WebP 非可逆圧縮
JPEG 非可逆圧縮 × ×
PNG 可逆圧縮 ×
GIF 可逆圧縮

WebPは、JPFGと同じように非可逆圧縮の画像となります。
非可逆圧縮は、データの一部を欠落や改変を許容することで、圧縮率を高め容量を軽くします。
そのため、圧縮率によっては画像の劣化が目に見えてわかります。
しかし、WebPは劣化がほとんどない状態で、高い圧縮率で圧縮できます。

また、可逆圧縮であるPNGやGIFと同じようにアルファチャンネルを扱えるので、透過利用もできます。
アニメーションにも対応可能です。

WebPは、 JPEG、PNG、GIFのそれぞれの良いところを併せ持った次世代の画像フォーマット です。

WebPのメリット・デメリット

メリット

WebPのメリットは、上記でも記載したように、高い圧縮率で容量を抑えた画像に変換できる点にあります。
さらに、透過やアニメーションでの書き出しにも対応しているため、JPEG、PNG、GIFの上位互換として利用できます。
画像のフォーマットを用途に分けずとも利用できるため、管理もしやすくなります。

そして何より軽量な画像として扱えるため、Webサイトの表示速度を上げることにつながります。
ランキング要素の一つに加わったCore Web Vitals(コアウェブバイタル)でも、サイトの表示速度は重要になってくるため、SEO対策の一つにもなります。

デメリット

WebPのデメリットは、大きく分けて2つあります。

一つは、古いブラウザを使い続けている場合には表示できない点です。
とはいえ、昨年までに『Firefox』と『Microsoft Edge』、『Safar14とシステムベース(iOS14、iPadOS14、macOS11 Big Sur)』で、WebPが正式にサポートされました。
また、2021年8月には、MicrosoftのサービスとしてIEのサポートを終了することになっているため、主要ブラウザのほとんどで表示可能です。

2つ目のデメリットは、WebP変換、生成する方法が少ないということです。
例えば、最高峰の画像ツールであるPhotoshopでさえ、現状はプラグインが必要となります。
今後、各種アプリもWebPに対応してくると思いますが、しばらくは生成方法が限られることが予想されます。

WebP変換、生成する方法

Squoosh(スクワッシュ)

spuoosh
Squoosh(スクワッシュ)

WebP変換で簡単でおすすめなのが、Squoosh(スクワッシュ)です。
 Google Chrome Labsが開発している画像圧縮サービス になので、安心して使えますね。
ブラウザ上で機能するオンラインツールで、誰でも無料で簡単に使えるので非常におすすめです。

使い方

Squoosh(スクワッシュ)使い方
Squoosh(スクワッシュ)の使い方は簡単!
ドラッグ&ドロップするだけで、他の形式の画像からWebP変換に出来ます。
画質の調整なども直感的な操作だけで自由に変更できます。

基本的には、画面右下のプルダウンから変換したい画像フォーマットが選び、スライダーを動かせば画質の調整ができます。
圧縮率と画像を確認したら、あとはボタンを押してダウンロードするだけです。

操作はブラウザ上で行いますが、変換処理自体はローカル環境で行われます。
サーバーにはアップロードされないのでプライバシーの観点からも気になりません。
もちろん、アプリとしてPC上にインストールしても使えます。

また、スマホでも使えるので、外出先やいざという時でもWebP変換できます。
圧縮の度合い(劣化具合)をリアルタイムに確認しながら作業できるのも良い点です。

SYNCER(シンカー)

SYNCER(シンカー)
SYNCER(シンカー)

JPG、PNGからWebPに変換する、WebPからPNGに変換する事が可能なオンラインツールです。
また、SVGからPNG変換も行えるので、SVGを含む多数の画像をWebP変換するのにもとても重宝します。
ただし、 Chromeブラウザにのみの対応 なので注意が必要です。

使い方

SYNCER(シンカー)使い方
SYNCER(シンカー)の使い方も簡単!
ドラッグ&ドロップするだけで、画像のアップロードができます。
容量を確認したら、画像をクリックするだけで、ダウンロードができます。
ただし、Squoosh(スクワッシュ)と違い、画質の細かな調整はできないので、注意しましょう。

Photoshop用プラグイン「WebPShop」

先述しましたが、Photoshop用プラグイン「WebPShop」の利用もおすすめです。
WebP公式のPhotoshop用プラグインで、PhotoshopだけでWebPの読み書きができるようになります。
Photoshop用プラグイン「WebPShop」

使い方はシンプルで、プラグインをダウンロードし、PhotoshopのPlug-insフォルダーにコピーするだけ。
それだけで、 「保存」「別名保存」の際、WebP形式も選べる ようになります。
ただし、「Web用に保存」や「書き出し形式」からではWebP形式を選択することができないので注意が必要です。

また、CC以前のPhotoshopでは利用できないので、その場合は、上記Squoosh(スクワッシュ)やSYNCER(シンカー)がおすすめです。

Photoshopが利用できることが前提になり使える人は限られてしまいますが、通常ではできないWebP画像の読み込みや編集も可能になるので、編集にこだわりたい人は、「WebPShop」をご利用ください。

まとめ

最近では、画像軽量化のために次世代フォーマットのWebP(ウェッピー)を積極的に使える環境になってきました。現在、主要ブラウザのほぼ全てで対応可能になっています。

メリットは、高い圧縮率で容量を抑えた画像に変換でき、透過やアニメーションにも対応していること。
デメリットは、古いブラウザやSafarの一部に制限があるため、利用の際には注意が必要なことです。

WebP変換、生成する方法は、以下のツールがおすすめです。
どれも無料で使え、直感的かつ簡単に扱えます。

  • Squoosh(スクワッシュ)
  • SYNCER(シンカー)
  • Photoshop用プラグイン「WebPShop」

画像軽量化を検討する際は、WebP(ウェッピー)の利用を考えてみてはいかがでしょうか?

関連記事