WebP導入で画像の表示速度を改善！Core Web Vitalsのランキング対策
2020.07.27
Googleが2021年からランキング要因としてCore Web Vitalsの追加を発表して以降、表示速度が向上する画像フォーマット「WebP」が再注目されています。そこで今回は、WebPの概要を踏まえたうえで、具体的な導入方法についてまとめてみました。
WebPとは？次世代の画像フォーマット！
WebP（ウェッピー）とは、米Google社が新しく開発した静止画像フォーマットです。WebP は、Apple推奨の「JPEG 2000」やMicrosoft推奨の「JPEG XR」と同じく次世代の画像フォーマットとも呼ばれており、下記のような特徴があります。
▼WebPの特徴
- 開発の目的：表示速度の短縮とWebサイトのトラフィック量軽減
- JPEGに対する優位性：よりファイルサイズが小さく、画質も劣化しにくい
- 最大ピクセル数：16383×16383ピクセル
- 拡張子：「.webp」
WebPの歴史！Core Web Vitals発表で再注目
WebPは次世代の画像フォーマットという位置づけではあるものの、意外なことに2010年から存在していました。
▼WebPの歴史
- 2010年9月30日：初めてWebP の仕様がGoogle Chrome公式ブログ上で公表された
- 2011年：Google Chrome 9.0とAndroid 4.0のリリース時にWebPを対応
- 2013年：Opera 15のリリース時にWebP対応、APNG非対応と発表
上記の情報からWebPの歴史は意外と古く、着実に対応ブラウザのシェアを伸ばしてきたとい事実が見えてきます。では、なぜ今になってWebPが再注目されているのでしょうか？
その理由は、2020年5月28日に行われたGoogleの公式発表！画像の表示速度が構成要素に含まれているCore Web Vitalsを、2021年から検索ランキングを評価するUX指標として追加すると告知したのです。
したがって、表示速度の短縮とWebサイトのトラフィック量軽減を目的に開発されたWebPを導入するなら、今が絶好のタイミングだと言えます。なお、コアウェブバイタルの詳細やユーザビリティの改善方法については下記の記事を参考にして下さい。
WebPのメリット！他画像フォーマットより優秀？
WebPを導入する最大のメリットは、何と言っても画像の軽量化でしょう。下記の通り、理論上ではJPEGやPNGと比べてかなり画像サイズが小さくなるそうです。
▼WebPファイルサイズの軽量率
- JPEGと比較：25～34%小さくなる
- PNGと比較：約28%小さくなる
さらに、アニメーションがサポートされているうえ、非可逆圧縮でもアルファチャンネルを扱えるので透過した画像の書き出しにも適しています。事実、他の画像フォーマットと多様性を比較してみると、WebPの優秀さは一目瞭然です。
▼画像形式5種類の比較表
| 形式 |
圧縮性能 |
可逆圧縮 |
非可逆圧縮 |
透過 |
アニメーション |
| WebP |
非常に高い |
〇 |
〇 |
〇 |
〇 |
| SVG |
高い |
〇 |
× |
〇 |
〇 |
| PNG |
高い |
〇 |
× |
〇 |
× |
| JPEG |
高い |
△ |
〇 |
× |
× |
| GIF |
普通 |
〇 |
〇 |
△ |
〇 |
WebPのデメリット！対応ブラウザの種類は？
何かとメリットばかりが注目されがちなWebPですが、デメリットが全くない訳ではありません。最大の難点は、JPEGやPNGに比べて対応ブラウザが少ないという点でしょう。
出典：CAN I USE
メジャーなブラウザが WebP をサポートしているためグローバル基準では80％以上の対応率になりますが、100％ではありません。
▼WebPの対応ブラウザ（2020年7月現在）
- 対応：PC 版＆Android版Chrome／PC 版＆Android版Firefox／Edge
- 非対応：IE／Safari／iOS Safari
なお、WebP対応ブラウザの更新情報については開発者向け公式サイトGoogle Developersでもアナウンスされています。
Apple公式発表！「Safari Ver.14」からWebPのサポート開始！
今まで、Safari非対応を理由にWebPの導入を控えていた方も多いのではないでしょうか。そんなAppleユーザーに朗報です！今後、iOS 14およびmacOS 11に採用されるSafari 14からWebPが適応されると公式に発表されました。
メディア 新機能
・WebP画像のサポートが追加されました。
・HDRビデオ再生のサポートが追加されました。
・<img>サイズ属性からアスペクト比を派生するように変更されました。
・Picture-in-Picture APIのサポートがiOS版iPhoneで利用できるようになりました。
引用：Apple Developer
なお、WebP対応のSafari 14が搭載されたiOS 14およびmacOS 11は、当初2020年6月に発売を予定していましたが、同年秋にリリース時期が変更になっているようです。
HTMLの記述例！非対応ブラウザに画像を表示させる方法
せっかくWebPを導入して表示速度のパフォーマンスが改善しても、その画像が表示されるのは対応ブラウザを使用している閲覧ユーザーのみ。ここで重要となるのがHTMLのpicture要素！「1つの画像に対して2種類のフォーマット形式を設定」し、ブラウザによって選び分けができるように工夫しておきましょう。
<picture>
<source type="image/webp" srcset="sample.png.webp" />
<img src="sample.png" />
</picture>
上記の記述により、非対応ブラウザでは元画像の「sample.png」が、対応ブラウザではより軽量な「sample.png.webp」を選択して表示されます。
コマンドによるWebPの変換方法4つ
WebP変換に必要なコマンドは、公式サイトGoogle Developers Getting Started上で提供されており、使用するには2通りの方法があります。
▼コマンドを使用する方法
cwebpコマンド変換
こちらは、PNG・JPEG・TIFF・生のY’CbCrサンプル・WebPの画像をWebPファイル形式で圧縮するコマンドです。
cwebp -q 80 image.png -o image.webp
ちなみに、可逆圧縮にする「-lossless」や非可逆圧縮にする「-q」については、cwebpコマンドのオプションを参照して下さい。
dwebpコマンド変換
こちらは、WebP画像を解凍してPNG・PAM・PPM・PGMPNGファイルへ変換するコマンドです。
dwebp image.webp -o image.png
gif2webpコマンド変換
GIF画像からWebPへ変換する場合は、「gif2webpコマンド」を使用します。
gif2webp [options] input_file.gif -o output_file.webp
img2webpコマンド変換
こちらは、入力画像のシーケンスからアニメーションWebPファイルを作成する際に使用するコマンドです。
img2webp argument_file_name
Webp変換ツール4つ！
画像サイズの軽量化に繋がるとはいえ、手間がかかるのは避けたいもの。そんな時に便利なのが、Webpへの変換ツールです。ここでは、代表的な4種類についてご紹介します。
JPEGとWebPの画像サイズを比較！
JPEGフォーマットの画像をWebPへ変換すると、どの程度サイズが小さくなるのでしょうか。例題として、当サイトのTOPページ画像をJPEGからWebPへ変換した結果をご紹介します。なお、今回使用したのは「syncer WebP変換ツール」です。
上記の通り、278.3KBだったJPEG画像がWebPに変換しただけで、わずか32.4KBまで軽量化されました。
まとめ
Googleが何度もアナウンスしている通り、画像の軽量化はユーザビリティに直結する要素です。だからこそ、今後はランキング要因としてCore Web Vitalsを追加し、表示速度のパフォーマンス向上を促しているのでしょう。従来の画像フォーマットより格段に小さく軽くなるWebPを導入するなら、今が絶好のタイミングかもしれません。
関連
Webサイト制作
Webサイト制作
SEO外部対策SEO対策
