WebP(ウェッピー)は米Googleが開発したオープンソースの静止画像フォーマットです。実はJpeg、Pngのような既存フォーマットをおさえて、次世代のフォーマットとして期待されているのをご存じでしょうか？今回はそんな「WebP」のメリットや概要、実際に導入する場合に必要な変換方法などを解説していきます。

WebP(ウェッピー)とは？

WebP(ウェッピー)とは、米Googleが開発したオープンソースの静止画像フォーマットのことです。2010年に仕様が公表・提供され、「Google chrome」に実装されました。Webサイトの表示速度の短縮やトラフィック量の軽減を目的としており、「.Jpeg」「.png」に代わる次世代の画像フォーマットとして注目されています。ファイルの拡張子は「.WebP」が使用されています。

Webpの特徴

画像圧縮率の高さや背景透過、アニメーションに対応しているなど、多彩なサポートがあるのが「WebP」の特徴の一つ。従来であれば、「背景透過するためにpng」「アニメーションのためにGIF」などフォーマットを使い分ける必要がありました。一方「WebP」であればWebサイトで使用するフォーマットをある程度統一できるようになります。

WebPとJPEGの違い｜他画像フォーマットとも比較

※可逆圧縮とは、圧縮過程でデータを一切毀損しないように圧縮する手法。
※非可逆圧縮とは、圧縮過程でデータの欠落や改変を許容することで効率よく圧縮する手法。

WebPの対応プラウザ一覧

※リアルタイムの対応プラウザについてはこちらで確認できます
https://caniuse.com/webp

Webpが注目される理由

メリットの多いwebPですが、なぜ注目が集まっているのでしょうか？実はWebPが注目されるのに理由があります。それぞれ詳しく見ていきましょう。

IOS14対応で利用可能ユーザー数が増加した

2020年にIOS14が「WebP」に対応することとなり、多くのユーザーが「WebP」のフォーマットであっても画像を閲覧できるようになりました。
それまでAppleは競合するGoogleが開発したフォーマットである「WebP」を採用しておらず、使用できるユーザーは限られていました。特にiPhoneのシェア率が高い日本では世界と比べても「WebP」を使用できる人は極端に少ない傾向にあったのです。

こうした状況が2020年のIOS14の「WebP」サポートで一変。大多数の人が「WebP」を使用できるようになり、以前にも増して注目が高まっています。

SEO的な効果が期待できる

画像容量を圧縮することはページスピードの改善につながり、UX向上が期待できます。こうしたことから、間接的にSEO的な効果も期待できます。特に近年ではページスピードを始めとしたUX指標の重要性が高まってきており、今後ますます「WebP」の需要は高まることでしょう。

またGoogleは全サイト管理者が意識すべき最重要指標として「Core Web Vitals」を発表しています。ランキング要因にもなっているこの「Core Web Vitals」のスコアを改善するためにも、画像容量の圧縮は重要です。

「Core Web Vitals」について詳しくはこちら

WebPを使用するメリットとは？デメリットもある？

Webpを使用するメリット

メリット①：画質を保ったまま画像サイズを軽量化できる

Webpの最も大きなメリットは、画像データの画質を保ったまま圧縮し、サイズを軽量化できる点です。Googleが発表しているデータによると、WebpはPNGの約26%、JPEGの約25〜34%圧縮できるとされています。

※データ圧縮率についてはこちらで言及されています
https://developers.google.com/speed/webp

メリット②：非可逆圧縮なのに背景透過やアニメーションが作れる

WebPは、JPEGと同様、非可逆圧縮形式のフォーマットでもあります。非可逆圧縮には、画像の上書きや改変後、元の画像に戻せなくなるデメリットがありますが、極めて小さい画像データに圧縮できるというメリットがあります。

次にJPEGとの違いを見てみましょう、WebPはJPEGと違い「アルファチャンネル」を扱うことができます。アルファチャンネルとは、色から透明な成分のみを分離したカラーチャネルの1つです。デジタル画像や映像の処理において、透過度の高い情報を扱うために用意された補助的なデータ領域ともいえます。またアルファチャンネルが扱えると、PNGのような背景透過に対応可能です。

Webpを使用するデメリット

デメリット①：非対応のブラウザや画像編集ソフトがある

WebPは公表されてからまだ歴史が浅い画像フォーマットです。そのため、2021年7月現在においても、WebP非対応のブラウザや画像編集ソフトがあります。

※対象ブラウザについてはこちらのサイトで確認できます
https://caniuse.com/?search=webp

非対応のブラウザでWebPを使用したい場合は、他の画像フォーマット(JPEG、GIF、PNG)へ書き出す必要があるため、一部ユーザーの流入を損なう可能性もあります。また有名な画像編集ソフトの「Photoshop」や「Adobe XD」なども直接「WebP」に対応していないため、注意が必要です。

デメリット②：変換の手間がある

先ほども簡単に解説しましたが、WebPは全てのブラウザに対応しているわけではありません。そのため、Webサイト内の画像をWebPに変換したい場合は、無料の拡張機能などを使うなど一手間加える必要があります。

WebPを生成・変換する方法｜導入のためにすべきこと

ツールで「WebP」データを生成・変換する

データを「WebP」へ生成・変換したい時はGoogleが作成した画像変換サイト「squoosh」の使用をおすすめします。

「squoosh」では、ブラウザ上で画像ファイルを選択でき、画像フォーマットの変換や圧縮、サイズ変更などができます。加えてPCだけでなくモバイル端末でも使用可能です。

変換可能なフォーマットは、「JPEG」「MozJPEG」「png」などがあり、変換した画像ファイルはサーバーにアップロードされず、ローカルで実行されます。またローカル環境で変換できるため、大きなファイルを圧縮するために通信量を消費しない点もメリットです。

コマンドラインで生成・変換する

大量の画像や動画を一括変換したい場合は、エンジニアがビルドのタイミングで行うのが一般的です。

その際には動画と音声を変換できるフリーソフトウェア「ffmpeg」を使うと便利です。これを使えば、拡張子を「webp」にするだけで簡単にファイルを変換することができます。

また、圧縮率等の設定も柔軟に変えられます。
詳細はffmpeg公式ドキュメントの9.10 libwebpの項をご確認ください。

その他、画像圧縮ができるライブラリは「npm」から多数配布されています。
ビルド時にWebPを生成する際に役立ててみてください。

WebPの特徴をつかんでユーザビリティの高いコンテンツを作ろう！

WebPを使用すれば、Webページの軽量化や画像・動画のファイルサイズを圧縮できます。こうした効果は、結果としてユーザビリティ向上が期待できます。

またWebページ軽量化はSEO対策としても有効です。「Core Web Vitals」を始めとしたUX指標がランキング要因に組み込まれ初めている中で、WebPはさらに注目を集めていくでしょう。

SEOを考慮してサイト改修を進めていきたいという方は、お気軽にipe(アイプ)へご相談ください。SEOの観点から貴社サイトの価値を損なうことのない最適解をご提案いたします。また毎月SEOに関するメルマガを発行しています。SEOに関する最新情報が気になるという方は下記フォームよりご登録ください。

【特別オファー】SEOメルマガのご登録と特典資料について

この記事をお読みいただいた方限定で、メルマガ登録にSEO事例資料の特典を追加しております。

大手実績多数の株式会社ipeのSEO事例は、SEOコンサル今後Webマーケティングで結果を残したいという方には必ず役立つかと思います。ぜひこの機会にご登録ください。

SEOメルマガではGoogleアップデート後の変動状況などの、SEOに関する最新動向を毎月お届けしています。
SNSやブログでは発信していない競合他社に差をつけられるような情報をお届けできたらと思いますので、
ぜひ一度ご登録ください。