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