WebP（ウェッピー）とは？【変換方法と使用するメリット・対応ブラウザなど徹底解剖】

Webp（ウェッピー）とは、Googleが開発した新しい画像フォーマットのことで、web表示に特化した軽い画像が最大の特徴です。

ここではWebpの特徴やメリット、変換方法なども詳しく紹介していきます。

Webpとは

ほぼすべてのブラウザに対応している

Webpは、2010年の9月からツールの提供が始まりましたが、当初は対応しているブラウザが多くはありませんでした。

しかし2018年からPCの主要ブラウザとされる「Firefox」と「Microsoft Edge」がWebpに対応すると発表し、2020年にはAppleのiOS14と新しいmacOS Big Sur（Safari）においてWebPに対応すると発表され、すべてのパソコンとスマホの主要ブラウザで利用可能になったという経緯があります。

なおAndroidは可逆圧縮に対応したWebP画像はAndroid4.0から。可逆圧縮と透明度に対応したWebP画像は、Android 4.3以上からサポートされています。

Webpとほかの画像形式との違い

WebPの開発元であるGoogleは、ほぼ同等の画質でPNGよりも約26％、 JPGより約25〜34％軽くできると発表しています。（参照：https://developers.google.com/speed/webp）

WebPを使用することで、画像のファイル容量を大きく削減することが可能です。以下はほかの画像フォーマットとの違い一覧です。

画像 形式	色	圧縮 方法	透過	アニメーション	備考
WebP	1670万色以上	非可逆圧縮	〇	〇	・画像の容量が他の拡張子と比べて圧倒的に軽い ・JPEG(JPG)と比べると25~30％くらい軽い
JPEG	1670万色以上	非可逆圧縮	×	×	写真などの高画質なものを低容量で保存が可能
PNG	256～1670万色以上	可逆圧縮	〇	×	ロゴやシンプルなイラストを高画質かつ低容量で保存が可能
GIF	256色	可逆圧縮	△	〇	・ロゴやシンプルなイラストを高画質かつ低容量で保存が可能。 ・PNG-8よりも容量が大きくなる

JPEG

JPEG(JPG)は、1670万色以上の色を表現することができ、写真などの高画質なデータを低容量で保存することが可能です。

ただし、ロゴやシンプルなイラストの場合、容量が大きくなってしまうというデメリットがあります。また、非可逆圧縮のため画像を保存する度に画質が劣化します。

PNG

Portable Network Graphicsの略語であるPNG（ピング）は、JPEGと同じく表現できる色の数が豊富で、画像の質を維持したまま透過処理ができるのが特徴です。

たとえ保存を繰り返しても画質が劣化することはありませんが、データ容量がJPEGの倍以上になるといわれています。

PNGは可逆圧縮に対応しており、一度圧縮しても元の状態に戻すことが可能です。また、WebPはアニメーションに対応していますが、PNGは対応していません。

GIF

GIFフォーマットは、アニメーション画像が作成できるのが大きな特徴です。

色数が256色と少ないのですが、その分データが軽く、サイズを変更しても画質が劣化しません。

透過GIFの作成も可能なため、グラデーションの少ないイラストやアイコン、フォントに向いているフォーマットです。

Webpのメリット

ファイルサイズを圧縮しても画像がきれいなまま

WebPは画質を保ったままで、軽量化した画像が書き出せることが大きな特徴です。

JPEGのように圧縮率が高いため、Webサイトへの負担や読み込みにかかる時間を軽減できます。

PNGのように背景の透過も可能で、GIF同様にアニメーションにも対応しているなど、さまざまな用途に合わせて利用できる点も大きな魅力です。

元のデータを損失させない可逆圧縮と、画質を保ったままで高圧縮率が望める非可逆圧縮、両方のデータ圧縮形式に対応が可能です。

他のフォーマットと同じ見た目を保ちつつ、そのフォーマットよりも軽量であるのが特徴です。

またページ内に設置する画像のデータ容量が軽くなればなるほど、ページの読み込み・表示スピードが向上します。

ページの読み込み・表示スピードを向上させると、以下のようなメリットがあります。

• SEOの評価が改善する可能性がある
• ユーザーの直帰・離脱率が改善する可能性がある
• CVRが改善する可能性がある

ページの読み込み・表示が遅い状態では、ページエクスペリエンス（ユーザーのページ内の体験）を損ねることになりますので、

ページスピードは出来るだけ改善できるようにしましょう。

画像の透過・アニメーションも作れる

WebPは画像の背景の透過が可能なフォーマットです。

背景の透過はPNGでも可能ですが、高画質で保存しようとするとデータ容量が大きくなってしまうのがネックです。

この点を解決するのがWebpです。なんとアニメーション画像の保存も可能だからです。

今までアニメーション画像といえば「GIF画像」を指すことが多かったですが、GIF画像は色の数が「256色」と少ないので、複雑で繊細な色調表現に限界があるというデメリットがありました。

しかしWebpならフルカラーで表現できるのでその問題を解決することにもつながります。

フォーマットで悩まなくていい

WebPならJPEG、PNG、GIFそれぞれの特徴をカバーできるため、フォーマット選びに悩む必要がなくなります。

間接的なメリットではありますが、Webサイトにアップロードする画像フォーマットをWebPに1本化できるのは、とても便利です。

作業効率アップにもつながることが予想されますね。

SEOに好影響

webp(ウェッピー)はSEOにおいても非常に有効な手段になります。

画像が軽量化され、Webサイトの表示速度が改善されるということは、結果的にユーザーの満足度を高めることができるからです。

Webサイトの運営やWebマーケティングにおいて、UX（ユーザーエクスペリエンス）の改善は重要な課題です。

Webサイトの表示速度はUXを考える上で重要な項目にもなるということからも、webp(ウェッピー)の需要は今後ますます高まってくると言えます。

実際、PageSpeed InsightsやLighthouseではwebp(ウェッピー)の利用を推奨されます。

Googleのツールが推奨するくらいですから、SEOに好影響を及ぼす事は間違いありません。

SEOにおけるページスピードの改善について、関連深い項目にコアウェブバイタル（Core Web Vitals）があります。

Webpのデメリット

変換ツールやサービスが限られている

WebPは2010年に登場した画像フォーマットですが、これまでは普及があまり進まなかった状況もあってか、変換ツールやサービスが比較的少ないのがデメリットといえます。

すでにほかの画像形式をメインに使っている人にとっては、PNGやJPEGなどの従来の形式で使用されている画像をWebP形式に変換するためには、変換する手間と時間がかかります。

また、サイトをwebpに対応させるために新たにURL構築を行う必要もあります。

IllustratorやXDでは、直接WebPを書き出すことはできませんが、Photoshopのように今後は対応が進む可能性もあります。

今のところは変換手段がまだ充実しているとはいえませんが、今後WebPの普及に合わせ、ソフトやサービスも増えてくるでしょう。

Webpの変換方法：Squoosh

画像のWebP変換は、基本的に画像変換ソフトを用いて行います。

中でも一般的なのがSquooshです。

Squooshの特徴・メリット

スマホからでも利用可能

「squoosh」は、ブラウザ上で動作するため、スマートフォンでも利用することができます。

そのため、通勤電車や休憩の合間で作業できるという観点から、「squoosh」は利便性にも優れたツールと言えるでしょう。

「Squoosh」はセキュリティ面でも安心

他の画像圧縮ツールと「Squoosh」の大きな違いは、ローカルで画像を圧縮・変換しているという点です。

公式でも以下のように言及しています。

Squoosh does not send your image to a server. All image compression processes locally.
ーSquooshは、画像をサーバーに送信しません。すべての画像圧縮はローカルで処理されます。

つまり、「squoosh」を利用して画像の圧縮や変換を行う場合、サーバーにアップロードされることはないため、画像に関するプライバシーの侵害や情報漏洩の危険性はありません。

そのため、セキュリティ面でも安心して利用することができます。

変換できるフォーマットが豊富な「Squoosh」

フォーマットの変換作業が別個に必要となるツールがほとんどですが、「Squoosh」は画像圧縮しながらフォーマットを変換することもできます。変換可能なフォーマットは以下の通りです。

• AVIF
• JPG
• PNG
• JPEG XL
• MozJPEG
• OxiPNG
• WebP
• WebP v2
• GIF（一部ブラウザ）
• BMP（一部ブラウザ）

従来のフォーマット（ JPG や PNG ）を高画質のまま、容量だけ少なくするためにデータを圧縮したフォーマットが「JPEG XL」「OxiPNG」「MozJPEG」「WebP」。

「WebP」は、2020 年 12 月現在では Chrome、Firefox、Edge で対応済。

「OptiPNG」と「MoxJPEG」は、拡張子自体は変わらないのでブラウザを選ばずに表示できます。

画像の大きさも「Squoosh」なら自由に変換

「Squoosh」は画像を圧縮しながら、大きさも同時に変更することができます。小さくするだけでなく、大きくすることもできるのが大きなメリットといえるでしょう。

また、変換後の画像のファイルサイズやどのくらいファイルサイズを縮小できたかをパーセンテージとして確認することもできます。

「Squoosh」はリアルタイムに画像変換

新しい画像圧縮ツールではよく採用されている手法ですが、「Squoosh」でも画質の違いをリアルタイムに確認しながら圧縮率や大きさを変えられます。

デフォルトの状態だと違いが分からないほどの画質で圧縮してくれますが、数字でも表示してくれるので目安にしながら圧縮率を変えてみると良いでしょう。

Squooshのデメリット

「squoosh」の唯一のデメリットは、一括で複数の画像を圧縮・変換できないという点です。

近年では、20枚の画像を一括圧縮できるツールがあるなか、「squoosh」では、1枚ずつの処理しか実行できません。

そのため、大量の画像を扱うWebサイトの場合、「squoosh」は不便と言えるでしょう。

とはいえ、フォトギャラリーを扱うようなサイトでない限りは、デメリットと感じる人は少ないのではないでしょうか。

Squooshを使って変換する

squooshは、2018年にGoogleが提供を始めたWebアプリケーションです。
変換したい画像をドラッグ&ドロップします。

右側と左側のタブで表示されるCompress部分の画像フォーマットをWebPに変更することで簡単に変換ができます。また、WebPの他にも7種類の画像フォーマットに変換が可能です。

まずは、一般的に画像変換の際に利用するケースが多いは以下の通りの手順で進みます。

１．画像をアップロード

Squoosh のサイトにアクセスをして、圧縮・変換したい画像をアップロードします。

アップロードするには、ドラッグ＆ドロップで画面に持っていくだけ。

もしくは、中央の画像アイコン「 （画像マーク） 」をクリックするとファイル一覧が表示されるので、選択して「開く」を押してください。

２．フォーマットを選択して比較

画面の左側は元の画像、右側は変更後の画像となります。

左下は「Original Image」のままにして、右下のフォーマットを圧縮させたいフォーマットにしてください。デフォルトでは、「MozJPEG」で圧縮率が「75」になっているはずです。

もう少しだけ画像の容量を減らしてみようという場合には、「Quality」の数値を変えて調節してみてください。

３．画像の大きさを変える

画像の大きさを変える場合には、「Resize」と書かれているスイッチを切り替えます。

デフォルトでは「高さ」だけを変えても、比率を変えずに自動で「幅」も変更してくれます。

ただ、比率も変えたい場合には「Maintain aspect ratio」のチェックを外すことで設定できるようになります。

基本的には「Lanczos3」のままで問題ないです。

４．色彩情報を変える

「Reduce palette」というスイッチを切り替えると色彩を変える・色彩情報の数を少なくするコトができます。

色彩情報の数を少なくするコトで画像のデータは軽くなりますが、同時に画像の深みは無くなります。

５．設定が済んだらダウンロード

望み通りに圧縮の設定が済んだら、右下にある「ダウンロード」のボタンを押すことでデバイスに保存されます。

これでブログやSNSなどでアップロード可能になります。

Webpの変換方法：Syncer

「Syncer」とは、Twitterの動画を保存するためのURL変換器です。無料で使うことができ、使い方も簡単な点のが特徴になります。方法はいたって簡単なのですぐにできます。

1. 保存したいTwitter動画のページにアクセスして、URLをコピーする
2. Syncerのサイトにアクセスして、コピーしたURLを貼り付ける
3. 好きな画像サイズで保存

別タブで動画が再生されるので、その画面で右クリックから「名前をつけて動画を保存」を選択すれば、パソコン内に動画を保存することができます。

Webpの変換方法：WebPShop

グーグル公式のPhotoshop用のプラグイン「WebPShop」を使った変換方法です。

Photoshopデフォルトの状態ではwebp(ウェッピー)形式の画像の読み込みや書き出しができませんが、プラグインをインストールすることで利用可能になります。

手順は以下の通りです。

1. WebPShopを開き、「these instructions.」をクリック
2. WebPShopのプラグインをダウンロード
3. 「bin」フォルダを開き、Macを使用している人はMac、Windowsを使用している人はWindowsのフォルダを開く
4. フォルダの中にある「WebPShop.8bi」または「WebPShop.plugin」をPhotoshopの「Plug-ins」の中にコピー
5. Photoshopでwebp(ウェッピー)形式の画像の読み込みや書き出しが可能になる

まずは、WebPShopを開いて「these instructions.」をクリックしましょう。

すると以下のプラグインのURLが表示されるので、windows・Macに適した方をクリックしてダウンロードします。

ダウンロードが完了したら、「bin」フォルダの中から、Windowsを使用している人はWindowsのフォルダを、Macを使用している人はMacのフォルダを開きます。

そして、Windowsを使用している人は「WebPShop.8bi」を、Macを使用している人は「WebPShop.plugin」をPhotoshopの「Plug-ins」の中にコピーしたらインストール完了です。

Photoshopを再起動してください。

画像をドラッグ&ドロップすることで、webP (ウェッピー)形式の画像ファイル読み込みはもちろん、Photoshopで作成した画像データの書き出しも可能になります。

Webpの変換方法：WebP Express

WordPressにアップロードされているJPEG画像などを、そのまま変換したい場合には、プラグインを活用するとよいでしょう。

WebPに変換してくれるプラグインはさまざまなものがありますが、画像変換とソースコードの書き換えを同時に行ってくれるプラグインがおすすめです。

「WebP Express」は、一括でのフォーマット変換とソースコードの書き換えを同時に行ってくれるプラグインです。

1. 「WebP Express」をダウンロードしてインストール、有効化
2. プラグインページから「Settings」をクリックし設定画面へ
3. 「General」でWebPに変換する画像の範囲を指定
4. 「Alter HTML」にチェック
5. 最後に「Bulk Convert（一括変換）」をクリックすると変換される

「Operation mode」の個所は、初期値である「Varied image responses」のままでOKです。

「アップロードフォルダの画像のみを変換するのか」と「テーマの画像も含めて変換するのか」を選んで設定ができるのも大きな特徴です。

「Alter HTML」にチェックを入れることで、過去に作成したHTMLコードが、WebPを呼び出すコードに書き換えられます。

また「Convert on upload」にチェックを入れておくと、今後アップロードしたJPEG画像なども、自動でWebPに変換してくれるので、手間もなく便利に活用できるでしょう。

Webp以外の表示速度を上げる意味・方法

サイトの表示速度を上げるメリットは以下の4つが挙げられます。

• Googleからの評価が上がり、検索順位が上がる。
  
• ページの表示が早いため、ユーザーに与えるストレスが少なく、CS(顧客満足度)が上がる。
  
• CV(コンバージョン/問い合わせや会員登録などの行動)が上がり、売上が上がる。（ECサイトなどが該当）
• アクセス数(トラフィック)が上がる。

Webサイトの表示が遅いと、クリックした直後に「別ページに移動する」「前のページに戻る」という行動が起きやすくなります。つまり、サイトスピードの遅さはユーザーの離脱率の上昇に繋がってしまうということにもなります。

一説には、サイト表示速度が2秒違うと、サイト直帰率が50%も増加するという話もあります。また、それだけではなく、サイトスピードの遅さは単純に「ユーザビリティの悪さ」と捉えることもできます。「ユーザーにとって使いづらい」と認識されたサイトは、SEO評価が下がることも忘れてはなりません。

そのため、Webp以外にもサイトの表示速度を上げる施策を行うことは大変重要であることが分かります。

サイトの表示速度を知る方法

Webサイトの表示速度を測るサービスで最も有名なサイトは、Googleが無料で提供している Google PageSpeed Insightsです。

URLを入力するだけでGoogleの評価に沿って点数を付けてくれます。また、改善点のアドバイスをしてくれるので、アドバイスに沿ってサイトを改善していけば、表示速度が改善されるので、非常に使いやすいサイトとなっています。

今回はこのサイトを使って実際に表示速度を改善した実例を紹介していきます。

Googleが提供しているページ表示速度に関する他のツールとしては、Test my siteがあります。このツールでは、モバイルにおける表示速度と予想される離脱率を教えてくれます。

一般的にGoogle PageSpeed Insightsで85点以上取れば表示速度は問題ないサイトと言われています。

cssを縮小する

次に対応した内容は「cssを縮小する」という項目です。

「cssを縮小する」と言うのは、簡単に言うとCSSファイル内にある余分な余白、改行、インデントを削除するという対応になります。

この対応は無料サイトを使用して自動で縮小する方法とテキストエディタの一斉置換で対応する方法が一般的です。

ブラウザのキャッシュを活用する

ブラウザのキャッシュは.htaccessと呼ばれるファイルに下記コードを記入することで活用することができます。

この対応はある程度サーバーサイドの知識が必要なので、対応する場合はサイトに合わせた方法を調べて実施するようにしましょう。

ページエクスペリエンスも意識しよう

ページエクスペリエンスとは、あるWebページがユーザーにとって使いやすいかどうかを測るための指標です。Webページがユーザーに与えている情報以外の部分でWebページの価値を判断するということであり、ページエクスペリエンスの良し悪しは、検索順位の決定にも影響を与えます。

もしSEOを意識していたり、検索上位を上げたいという場合にはぜひ意識してほしいです。

ページエクスペリエンスのシグナルとして重要な項目に関しては、主だったものがGoogle公式サイトに書かれています。

具体的には、この4つです。

• Core Web Vitals
• モバイルフレンドリー
• HTTPS
• 煩わしいインタースティシャルがない

ただし、Googleは、ページエクスペリエンスシグナルの見直しを毎年行う予定と明言しています。これらの基本的なシグナルは変わらないとは思いますが、どの指標がより重要なのかといった比重に関しては変更になる可能性があることも覚えておきましょう。

ページエクスペリエンスの測定方法

自社サイトのページエクスペリエンスの測定は、Google Search Consoleで行うことができます。Google Search Console内に新しく「ページ エクスペリエンス レポート」が表示されるので、これを利用します。

「検索パフォーマンスのレポート」でも「優れたページエクスペリエンス」を持っているページをフィルタリングすることができるようになりました。両方を使いながら、ページエクスペリエンスが「良好」なページを目指しましょう。

• ウェブに関する主な指標
• モバイルユーザビリティ
• セキュリティの問題
• HTTPSの使用状況
• 広告エクスペリエンス

などが分かります。

ウェブに関する主な指標

測定したページについて

• 良好
• 改善が必要
• 不良

という評価が下されますが、これらのデータがページエクスペリエンスレポートにインポートされるまで、2、3日の遅れがあります。対策をとった後すぐにレポートを表示されても実際とは誤差が生じるということですので、注意しましょう。

モバイルユーザビリティ

モバイルユーザビリティのエラーがあるかどうかについて測定されます。

モバイルユーザビリティのエラーは

• 画像が大きすぎる
• 文字が小さすぎる
• リンクと文字の間隔が狭い

などがあります。GoogleSearchConsoleに登録しているサイトなら、メールで警告が届きます。

セキュリティの問題

万が一、Webサイトのどこかにセキュリティの問題があった場合、全てのWebページのユーザーエクスペリエンスの「良好」判定が失われます。

Webサイトを訪れたユーザーに害をなすようなコンテンツが含まれるということですので、早急な対処が必要になります。

HTTPSの使用状況

WebページがHTTPSで配信されているかどうかの測定です。

ただし、ページエクスペリエンスレポートでのHTTPS判定は、ページ単体ではなくWebサイト全体での判定になります。Webページ全体としてHTTPで配信されているページが多い場合は、Webサイト全体として「不合格」となり、ページエクスペリエンスの「良好」判定がなくなってしまいます。

広告エクスペリエンス

広告エクスペリエンスは、サイト訪問者の注意を逸らしたり操作を邪魔するような形の広告が配信されていないかどうかが測定されます。

この項目についても、Webページ単位ではなくWebサイト単位で評価されるので、Webサイト内で広告エクスペリエンスが低いページがあると、Webサイト全体としてページエクスペリエンスが悪いとされてしまいます。

広告の自動配信サービスを利用している場合、「ページ遷移時に画面に大きく広告を表示させるとクリック率が上がります」と、全画面表示の広告が自動配信される場合があります。こういったことも広告エクスペリエンスを下げる原因になりますので、一度チェックした方がいいでしょう。

ページエクスペリエンス対策

まずは、Google Search Consoleで現状の数値を確認し、数値の低いものから優先的に対策していくのがいいでしょう。

所有しているWebサイト内に多くのページがある場合は、上位表示されていなければ困るページから優先的に対策を取り、対策のうち全てのページに共通するものについては全てのページ対策を施すイメージがいいかもしれません。

誰でも簡単に対策できる作業があれば、短期的に外注作業者を雇えば、その分時間が空きます。

まとめ

Webpの特徴やメリット・使い方などについて解説していきました。画像のクオリティを下げずに、画像のサイズを変えることができるので、SEOを意識したサイト構築をしている人にはぜひ活用してほしいツールです。

1枚ずつしか変換できないので、画像ファイルを大量に扱う場合には手間と感じるかもしれません。

しかし、だれでも手軽に使えるので、導入自体は難しくありません。

またWebp以外にもサイトの表示速度を上げる方法はいくつかあります。

ぜひ、サイトの表示速度改善をはじめ、検索順位アップに必要な施策を行ってみましょう。