サイトコンテンツを作る際、画像の作り掲載すると思います。その際の画像の形式として従来はJPEG・GIF・PNG・SVCあたりが使われてましたが、それらよりも、Googleが開発した、より軽量化された画像形式がWebPです。

今後、Googleの検索エンジンはCore Web Vitals(コアウェブバイタル)などを含み、サイトの軽量化を促進していくことと思われます。サイト軽量化の最短が画像軽量化なので、サイト運用で多用される可能性が高いWebPについて知っておきましょう。

WebPとは

WebPはウェッピーと読みます。WebPは2010年9月30日にGoogleから仕様が発表された新しい画像形式(静止画フォーマット)です。ファイルの拡張子は「.webp」となります。主にウェブサイトの表示速度短縮とトラフィック量軽減を目的として開発されていて、画像の軽量化に1番最適なフォーマットをWebPは目指しています。

Googleの示した事例で、従来の画像形式からのファイルサイズの圧縮は下記になります。

  • 非可逆圧縮モードで同一画像・同等画質のJPEGと比較して25-34%圧縮
  • 可逆圧縮モードで同一画像・同等画質のPNGと比較して28%圧縮

(参考サイト:wikipedia「WebP」

上記からわかるように従来の画像形式の約4分の1程度の圧縮に成功しています。このように従来より画質を落とさず圧縮ができるので、Googleが推し進めるウェブサイトの軽量化に適した画像形式が、今後WebPになる可能性は高いと考えられます。

WebPのメリット

WebPのメリットとして1番は軽量化。その次に来るのが、非可逆圧縮でアルファチャネルに対応しているということです。

簡単に説明すると、画像を圧縮して元に戻した時、元に戻らないのが非可逆圧縮、そのまま元に戻るのが可逆圧縮。アルファチャネルは背景を透過できるか否かです。WebPは圧縮して元に戻すことはできず、透過が利用できる画像形式ということになります。

画像形式の対応表
対応 WebP JPEG PING GIF
アルファチャネル 対応 対応
圧縮 非可逆圧縮 非可逆圧縮 可逆圧縮 可逆圧縮

上記のように、アルファチャネルにも対応していて、圧縮率が上述のよくある画像形式よりも高いことから、今後ウェブサイトにおける画像形式で1番に選ばれる可能性が高いとされています。

WebPのデメリット

WebPのデメリットは対応しているブラウザがまだ限られているということです。Googleが開発している為、Safari(Apple)などの対応も遅れていて、iOSに関しては14からようやく対応し始めました。

以下にWebPの対応表を作りましたので、ご確認下さい。

WebPのOS対応表
Android 非可逆圧縮は4.0以降、可逆圧縮は4.3以降
Windows 10 Creators Update以降
iOS 14以降
WebPのブラウザ対応表
Google Chrome Google開発なので当然対応済み
Mozilla Firefox 65以降
Microsoft Edge 対応済み
Opera 対応済み
Safari 14以降

上記を見て頂くとわかるように、iOSが2020年9月に行った14のアップデートでほぼ有名なOS・ブラウザがWebPに対応済みになります。WebPのデメリットであった対応OS・ブラウザを選ぶ必要性がなくなることで今後普及していくものと考えられます。現在のところMacOS版のみまだ非対応のようですが、Safariには対応しているので、スマホ側のウェブサイトにおいてはWebPは有効です。ユーザーのほとんどはスマホユーザーなので、仮にWebPを主体にウェブサイトを構築してもほぼ問題ないポジションまで来ていると推測できます。

画像形式をWebPに変換しよう

今保有されているウェブサイトの画像をWebPに変換したい場合は、WebPに変換できる画像変換・画像編集ソフトを利用するのが良いと思います。

SEOの教科書で1番見られているページの「画像編集ソフトはどれを選べばいい?おすすめの画像編集ソフト7選」でも紹介している「ShortPixel」「pixlr」または、「EWWW Image Optimizer」でも可能となっています。

当サイトでも画像はまだJPEG・PNGがほとんどです。年内にかけてWebPへの変換を行う予定です。7月のSEO対策記で記したように、当サイトは非常に重いです(笑)2020年以降、来年はサイトの軽量化をしていないとGoogleにて弾かれてしまう可能性もある為、対策をしていこうと思います。皆様のウェブサイトでもサイトの画像軽量化=WebP化、進めてみて下さい。私の方で調査している限り、順位が著しく降下したなどのデータは今のところありません。不変か上昇なので、そこまでデメリットはないと思います。

画像編集ソフトはどれを選べばいい?おすすめの画像編集ソフト7選
画像編集ソフトを選ぼう 画像編集ソフトはどんなソフトなの? 画像編集ソフトとは名前の通り、画像を編集するソフトです。見た人に対して印象のあるもの…

ページエクスペリエンスを向上する為に色々調べていると、WebPにするよう指示がでたりしているのが現状で、そちらに対応しているサイトはまだあまりない印象です。

ページエクスペリエンスとは?ページエクスペリエンスを重視するGoogleはどう対策をすれば良い?
Googleより2021年5月に新たなランキングに影響を与えうるシグナル「ページエクスペリエンス」の導入発表が公式サイトの方で行われました。あと…