Webサイトで使われる画像フォーマットは、PNG、JPEG、GIF といった画像フォーマットが主流ですが、近年になって次世代の画像フォーマットの利用環境が整ってきました。
その中のひとつ、WebP （ウェッピー※1）をご存じですか？
Googleが開発した次世代の画像フォーマットで、ページの表示の速度アップ効果を狙えて、画像サイズが PNG や JPEG 等に比べて画像サイズを小さくできるので、通信容量の制限があるモバイル通信にも優しい仕様となっています。
また、WordPress 5.8 から WebP がサポートされ、メディアライブラリにそのままアップロードして使えるようになっています。（以前のバージョンでもプラグイン等で使うことが可能です。）
本記事では「WebP の機能とSEO観点での導入効果」についてまとめています。新規サイトや新しい記事※2への採用、既存ページの画像置き換えを検討している場合などの参考になれば幸いです。
※1・・・現在は公式サイトでは読み方について言及されていません。
※2・・・本記事の画像は WebP を使っています。
■本記事の3行まとめ
・WebP は高圧縮率な画像フォーマットで、透過やアニメーション画像にも対応
・主要なブラウザが対応している
・SEO観点からも WebP 導入はお勧め
WebPとは
WebP とは、Googleが開発した次世代の画像フォーマットで、高圧縮率※で画像サイズを小さくできて、背景の透過やアニメーション GIF や APNG のような画像にも対応します。PNG 相当の WebP lossless、JPEG 相当の WebP lossy、アニメーション GIF や APNG 相当の Animated WebP といったように使い分けることが可能です。
※・・・可逆方式の画像では 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.
引用元：https://developers.google.com/speed/webp
PNG, JPEG, GIF との機能を比較してみました。
使い分けている画像フォーマットを１つにまとめる事ができそうですね。
| 画像フォーマット | 圧縮方式 | 透過 | アニメーション |
|---|---|---|---|
| WebP | 非可逆圧縮 / 可逆方式 | 〇 | 〇 |
| PNG | 可逆圧縮 | 〇 | × |
| JPEG | 非可逆圧縮 | × | × |
| GIF | 可逆圧縮 | △（半透明は不可） | 〇 |
圧縮方式
データを圧縮した後に圧縮前のデータに戻せる圧縮方式が「可逆圧縮方式」、圧縮前のデータに戻せない圧縮方式を「非可逆圧縮方式」といいます。
例えば、画像加工ソフトでは圧縮して保存するため、非可逆圧縮のファイルでは保存の度に品質が劣化していきます。JPEG ファイルを編集しなくても画像加工ソフトで繰り返し保存すると画像が劣化していくのはこの圧縮方式による影響です。逆に、可逆圧縮のファイルではファイルの保存を繰り返しても画像の劣化はおこりません。
WebP では 非可逆圧縮 と 可逆圧縮 のどちらの圧縮方式にも対応しています。
WebP is a modern image format that provides superior lossless and lossy compression for images on the web.
引用元：https://developers.google.com/speed/webp/
透過
透過機能を使う時は可逆圧縮方式の PNG や GIF を使う必要がありましたが、WebP では非可逆圧縮方式で透過機能を使うことが可能となっています。
アニメーション
アニメーション画像を使いたい場合は GIF に変換して編集の必要があります。WebP では別の画像フォーマットに変更することなく対応できます。その上、GIFよりも軽く、24bit カラーに対応しています。8bit カラーの GIF よりも軽くなるのは驚きです。
WebP requires fewer bytes than GIF1. Animated GIFs converted to lossy WebPs are 64% smaller, while lossless WebPs are 19% smaller. This is especially important on mobile networks.
引用元：https://developers.google.com/speed/webp/faq#why_should_i_use_animated_webp
対応ブラウザ
Chrome、Firefox、Edge、Opera、Safari など主要なブラウザで対応しています。iPhoneでは iOS14から対応となりました。
ブラウザの対応バージョンは以下を参照ください。
WebP の機能によって同じブラウザでも対応バージョンが異なります。公式サイトでネイティブサポートが全てされている場合に以下の表では緑色となっていました。古いバージョンでの対応を確認したい時は公式サイトにて対応詳細を確認していただくのをお勧めです。
WebP を使う時の注意点
万能なように思える WebP にも使用する上での注意点があります。PNG、JPEG、GIF の機能を全く同じように搭載している訳ではないので WebP では無い機能もあります。
■機能仕様
- プログレッシブJPEGのような徐々に画像を出す機能は WebP では利用できません。
- クオリティを下げても画像の劣化が見えにくいのですが、ドット絵のような画像だと劣化がわかりやすくなります。
公式サイトのFAQにいろいろ情報が載っていますので、より詳細を確認するにはお勧めです。
■利用環境
- 対応ブラウザが少ない
- 対応している画像編集ソフトが少ない
といった点が考えられます。
とはいえ、機能については情報サイトやブログサイトで使う分には大きな問題にはならないように思います。商用サービスの場合は、使いたい機能仕様で比較するのが良いでしょう。
また、利用環境についてもモダンなブラウザが使われる分には表示は問題ありませんし、画像編集ソフトも JPEG 等の画像編集ソフトと相対的にみた時の少なさであり、選択肢は複数あります。iPhone iOS14 の対応により対応ブラウザへの不安がグッと減り、手間のかかる画像変換もクラウドサービスによる提供も増えています。
WebP 採用による SEO 効果の考察
WebP を使うことで SEO 効果は考えられるのでしょうか？ 結論としては「YES」です。理由は、「表示の遅いページの改善」により「直帰率・離脱率の改善」が見込めると考えるためです。
この「表示の遅いページの改善」がキモで、それ以外は新規ページでの導入や回遊率を見て徐々に導入していくのがお勧めです。
ページの表示速度が遅いサイトだったら、何ページも見なかったり、あまりに表示が遅ければ待たずに他のサイトを見ませんか？
2018年に Google の公式ブログでページの表示についてアナウンスをしています。
そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
引用元：https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
また、
検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。
引用元：https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
とも書かれています。
重要なのは WebP を導入してページの表示を早くすること以上に遅いページの表示を改善することです。その点では大きな効果を得られると考えられます。
総合的に考えれば、注意点よりも WebP を使う恩恵の方が大きくお勧めです。
関連キーワード
- JPEG 2000
- JPEG XR
- AVIF
参考：WebP に変換
WebP への変換を簡単に行ないたい時は、WordPress プラグインを使うか、オンラインサービスを使うのがお勧めです。下の記事に管理人がよく使うオンラインサービスとファイルを変換した時のサイズがどのくらい変わったのか載せていますので参考にして下さい。
本記事を最後までお読みいただきまして、ありがとうございます。
導入の考察については管理人の主観であり、その効果を保証するものではありません。
ご利用の運営サイトの状況に応じてご判断ください。
コメント