“WebP（ウェッピー）”とは、画像ファイルを軽くできる画期的な次世代フォーマットです。
そしてこのファイル形式は、Webページに配置する画像の品質を保ったまま高圧縮によって読み込み速度に効果が期待できるというもので、以下によると開発自体はGoogleが行っており、変換後の拡張子もそのまま“.webp”となります。（もちろん圧縮しすぎると見てわかるほど劣化します。）
WebP（ウェッピー[4][要出典]）は、米Googleが開発しているオープンな静止画像フォーマット。ファイルの拡張子は「.webp」。
そもそも画像フォーマットと言えば…jpgやpng、gifなどを思い浮かべる方が多いかと思われますが、実際には用途に応じて適宜使用していないWebページをかなり多く見受けられます。（酷い場合はデジカメやスマホで撮った画像をそのまま掲載しているケースもあり、それだけでページ読み込み速度にも大きく影響してしまいます。）
例えばjpgは色のデータが多い写真などに適しており、さらにイラストなど比較的画素数が写真よりも少ない画像に関してはgif、そして背景を透過させたい場合はpngをそれぞれ使い分けるべきです。
※ある程度圧縮しても見た目としてはほぼ変わらないケースが多いため、各種編集ソフトのプレビューをチェックしながら各種適したフォーマットで書き出すことが大切です。
そうしなければ無駄に容量の大きな画像ファイルをユーザーに読み込ませることになり、場合によっては離脱の原因に大きく関係してくる重要な要素となります。（gif形式で書き出すべき画像はすでに軽いはずですので、圧縮率などを参考にWebPにするかどうか判断してください。）
そこで、大幅に圧縮できる非可逆圧縮のひとつ“jpg”と可逆圧縮・透過対応の“png”それぞれの利点を活かし、画像ファイルをjpgよりも圧縮しつつ透過にも対応する“WebP”が注目されているというわけです。
特にユーザーファーストを掲げているGoogleが開発したフォーマットですので、読み込みスピードによるSEOにも影響する可能性も十分考えられるでしょう。
ただしこの“WebP”、編集ソフトが対応していない・ブラウザが対応していないなどのデメリットもあり、そういったブラウザに関しては従来の画像を条件分岐によって表示させる必要があります。
では今回は、Webページの閲覧を快適にする画像フォーマット“WebP（ウェッピー）”について、使い方や特徴、対応していないブラウザに対する表示方法などを詳しくご説明していきたいと思います。
目次
WebP（ウェッピー）とは
“WebP”とは、上記のように圧縮率の高いフォーマットにもかかわらず背景透過としても書き出すことができ、以前は一部のブラウザに対応していませんでしたが、下記ページを参考にするとほとんどのブラウザに対応しているため、恐らく一気に使用率が高まっているかと思われます。（iOS14以降からのSafari14も“WebP”に対応しており、Internet Explorerは2022年6月15日に終了しています。）
参考：Can I use… Support tables for HTML5, CSS3, etc
ちなみに“WebP”の開発自体は2010年9月からすでに公開されていて、最大の魅力としてはやはり下記ページにもあるように非可逆圧縮であっても透過のまま書き出すことができ、さらにファイルも軽くなることで、今後重要度を増すと思われるWebページの読み込みスピードに関しても期待できるという点です。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。
また、英語版ではありますが、Appleの方にもSafari14から“Added WebP image support.”と公表されているようですね。
参考：Safari 14 Beta Release Notes | Apple Developer Documentation
これが広がると、これまでjpgやpngなど各種用途によって書き出しフォーマットを適宜変更していたものが“WebP”に統一化することもでき、Webページで扱う画像ファイルは一択となる可能性も十分考えられるでしょう。（世界中のWebサイト全てを考慮しても）
※ただし編集ソフトの対応が大きなネックとなりそうです。
つまりjpgよりも優れた圧縮率でありながらも、gifやpng形式のような透過させたい画像で書き出すことも可能というわけです。（公開中の全画像を“WebP”に変換するプラグインなんかも今後増えてくるかもしれません。）
画像フォーマットの仕様（JPG・PNG・GIFとの違い）について
“WebP”の仕様については概ね上記の通りですが、Webサイトを最適化させるためのヒントとなる“Make the Web Faster | Google Developers（developers.google.com）”内にも「A new image format for the Web | WebP | Google Developers」といったページが公開されていて、これによると…
- pngより約26%小さくできる
- jpgより約25〜34%小さくできる
といったように、“WebP”で書き出すことによって同等の画像であってもjpg・pngよりもさらにファイルサイズを圧縮することができ、結果Webページを快適に閲覧することができるほどWebサイトのトラフィック量軽減に役立つとのこと。
また、gifから変換することも可能ということはアニメーション自体も軽くすることが可能ということになります。（gifアニメーションを作成してから“WebP”に変換。）
これは画像を多く使用しているページだと特に効果的で、1ページ全体としてもかなり効果が期待できるものと思われます。つまり“WebP”とは、Googleが開発した画像フォーマットのひとつで、ページ読み込み速度改善のためにも推奨されており、まさに次世代フォーマットと呼ぶにふさわしい技術ということになります。（拡張子は“.webp”となります。）
WebPの特徴
WebPは可逆圧縮（ロスレス圧縮）と非可逆圧縮（ロッシー圧縮）の両方に対応していて、品質を失わずに画像を圧縮する可逆圧縮（pngやgifなど）と多少の画質低下を伴うものの品質をある程度維持したままファイルサイズを縮小できる非可逆圧縮（jpgなど）をうまく併せ持ったファイル形式のため、ページの読み込み速度を改善したい時に役立ちます。
また、アルファチャンネルをサポートしているので、gifやpngのような背景の透過画像を扱うことができます。こちらはPNGフォーマットの大きなメリットを取り入れたものです。
さらにWebPはアニメーションもサポートしており、複数の画像を含むアニメーションファイルを作成することができ、GIFフォーマットの代替として利用されることも可能です。
可逆圧縮と非可逆圧縮ともに対応
上記の通りWebPでは可逆圧縮と非可逆圧縮の両方に対応していて、圧縮率の高い形式（主にjpg）と透過を扱える形式（主にpngとgif）を併せ持ち、さらに圧縮率が高いファイル形式となっているため、Webページに使用する画像に適しています。
背景の透過処理にも対応
そして、Webデザインを表現するために重宝するpngやgifのような透過画像にも対応していて、画質を落とすことなくjpgよりも高い圧縮率で軽量化でき、部分的に使用することによってページの読み込み速度にも好影響を及ぼします。（本来はできるだけテキストベースのデザインが理想です。）
アニメーションにも対応
gifで書き出す簡単なアニメーションもWebPとして保存できます。
この場合は通常通りアニメーションを作って書き出す方法と、一旦gifで書き出してWebPに変換する無料ツールがWeb上に公開されているので、そちらを利用する方法があります。
ただ、Photoshopのバージョン23.1以前だとプラグインが必要となりますのでご注意ください。
WebPのメリット
まずWebPを使用するメリットとしてはなんと言っても素早く画像を表示できるという点が挙げられます。画像が素早く表示されるということはユーザビリティにとっても良い影響を及ぼしますし、検索ユーザーにとってストレスなくコンテンツを閲覧できることからブラウザバックされることもないでしょう。
逆に画像が表示されるまでに時間がかかってしまうと、ユーザーは数秒でそのページから離れてしまいます。検索ユーザーにとってそのページじゃないといけない理由はありませんから、素早く表示されてスラスラ読み進められるコンテンツへ移動してしまうことと思われます。
また、画像がすぐに表示されるということはファイル自体軽いということを意味しますから、無駄に重たいファイルを見せずに済みますし、画像を数多く扱うサイトだとサーバーの軽量化にも繋がるため、単純に画像を表示させる分にとってはメリットしかありません。
他にも昨今ではページスピードもSEOの要因と言われていますので、ページが早く表示されることによって検索順位にも良い影響を及ぼす可能性があります。（もちろんページが早く表示されるだけで上位表示されるわけではなく、あくまで様々な要因のひとつというわけです。）
画像サイズを軽くできる
WebPはWeb上で公開されている無料ツールを使えば簡単にファイル形式が変えられ、それだけでも相当軽量化できます。
また、“squoosh”というツールだと写真のクオリティを画面で比較しながら圧縮率を調整可能、他にも細かく設定した上で書き出せるのでメインとして使用する画像などに活用すると良いでしょう。
ただ、品質はそのままにと言っても圧縮し過ぎると多少は劣化するので、ユーザーに見せられる範囲で軽量化することが大切です。
ページの表示速度の改善
上記の通りファイルそのものが軽くなるということは、表示されるページの読み込み速度にも良い影響を与えます。
特にモバイルの場合、常に電波状況が良い場所にいるとは限りませんから、画像ファイルの容量はシビアに考えるべきです。
定期的にご自身のモバイルからページを確認してみてユーザーの目線でコンテンツをチェックしてみるのも良いでしょう。
WebPのデメリット
続いて“WebP”のデメリットと言えば、以前までは一部のブラウザ（バージョン）に対応していないという点でしたが、現在はさほど気にする必要はありません。特に当時のiOS SafariはiPhoneのデフォルトブラウザということもあって全ての画像を“WebP”に置き換えてしまうとかなり影響も大きく、スマホ（iPhone）から閲覧すると画像が表示されませんでした。
ただ、上記でもご説明した通り2020年秋頃に公開されたiOSのアップデートによってSafariにも対応するとのことでしたので、現段階では十分に“WebP”についての理解、そして導入方法について対応策を練っておくべきと言えるでしょう。
また、下記を参考にすると、IEのシェアは現状約5%となっていて（PC・タブレット・スマホ全て含め）、ほとんどがChrome（主にPC）とSafari（主にスマホ）で占めているため、IEを切り捨てて考えるのもひとつの手ですが、条件分岐によって対応していないブラウザの場合には従来のjpgやpngなどを表示する方法もありますので、今後のサイト管理を考慮した上で決めると良いかと思われます。（サイトにもよりますので、アナリティクスで流入ブラウザをチェックしてみてください。）
他にも編集ソフトに対応していないという点が挙げられるでしょう。
画像補正・編集ソフトとして有名な“Photoshop”ですら“WebP”のファイル画像を開こうすると、バージョンによっては“要求された操作を完了できません。Photoshopが認識しない種類のファイルです”といったエラーが表示され、書き出すことはもちろん開くこともできません。
非対応のブラウザもある
このファイル形式が流行りだした頃はまだ対応していない（表示されない）ブラウザもありましたが、下記ページを参考にしてみると最近のブラウザだとほとんどが対応しています。
WebP image format | Can I use… Support tables for HTML5, CSS3, etc
ただ、古いバージョンを使用しているとサポートされていないので若干注意が必要です。
この場合、完全にWebPに書き換えるか非対応のブラウザにはこれまでの画像を表示するのかなど、やり方はありますので部分的に対応しても良いかもしれません。
画像を変換する必要がある
既存の画像を軽くするためには当然WebP形式に変換する手間が増えます。
これは画像の数にもよりますが、WordPressをお使いなら一括で変換する“WebP Express”などのプラグインも公開されているので検討してみてください。
一方、手動で変換するにはWeb上に公開されている無料ツールを利用したり、Photoshopで書き出します。
WebPの変換方法
“WebP”形式の画像を作るには、jpgなどの画像を読み込み、圧縮して書き出す方法とWeb上で公開されている変換ツールを利用することになります。
つまり“WebP”に対応した編集ソフトが必要になるというわけで、現在ではフリーの変換ソフトやWeb上で“WebP”形式に変換するツールがほとんどで、編集ソフトと言えば“paint.net”といったWindows版のみのソフト、もしくは後述するPhotoshopにプラグインを追加して読み込み・書き出しするほか方法はありません。
他にもWordPressをお使いの場合だと、画像圧縮で有名な“EWWW Image Optimizer”といったプラグインが“WebP”に対応しており、こちらを利用することで、今後アップする画像は全て“WebP”に変換されたり、すでにアップしてある画像も一括で変換することも可能です。（対応していないブラウザに対しては従来のjpgなどが切り替えられて表示されます。）
ただし、対応ブラウザによって画像を分岐させるためには“.htaccess”に記述するタグが必要となるため、必ずバックアップと取って慎重に行うようにしましょう。
また、“WebP Express”というプラグインなら“.htaccess”を編集することなく簡単な設定のみで“WebP”に対応することが可能です。
こちらを導入することによってWebページに下記のスクリプトが追記され、“WebP”対応ブラウザか否かで適宜画像を差し替えて表示させることができます。
<script>
document.createElement("picture");
if(!window.HTMLPictureElement&&document.addEventListener){window.addEventListener("DOMContentLoaded",function(){var s=document.createElement("script");s.src="https://www.sample.com/wp-content/plugins/webp-express/js/picturefill.min.js";document.body.appendChild(s);});}
</script>ちなみにこのプラグインを実際に導入してみると、“WebP”に対応しているのにもかかわらずjpg画像を表示しているように見えますが、実際のところ上記のスクリプトによって正しく動作しているようです。（“PageSpeed Insights”を見てみると下記のような“次世代フォーマットでの画像配信”に関するエラーが消えました。）
これらプラグインの使い方に関しては割愛しますので、気になる方は検索してみてください。
Photoshopで書き出す方法
先ほどもご説明した通り、Photoshopの23.1以下のバージョンでは“WebP”形式で保存された画像を開くことも書き出すこともできませんが、“WebPShop”というプラグインを導入することによって読み込み・書き出すことができます。
これを導入するには、「GitHub – fnordware/AdobeWebM: WebM plug-ins for Adobe programs」の下の方、“Download”と記載されている箇所に“Mac | Win”とそれぞれリンクが表示されていますので、適宜選択してプラグインをダウンロードします。
※今回試してみたのはMac Photoshop CS4です。
続いて“アプリケーション”＞“Adobe Photoshop CS4”＞“Plug-ins”にダンロードして解凍した“WebP.plugin”を追加してください。
その後、Photoshopを再起動してみると“WebP”形式の画像ファイルでも読み込んだり書き出すことも可能となり、jpgで読み込んだ画像に対してリサイズ・色補正などを行った後に“WebP”として書き出せます。
また、“WebPShop”のバージョンもいくつか公開されているようでしたので、上記でうまく動作しない場合はこちらでも試してみてください。この場合、ダウンロードしたフォルダの中の“bin”というフォルダにmac/winそれぞれバージョン違いの“WebPShop.plugin”が格納されています。
参考：WebPShop | Google Developers
ツールを利用して変換する方法
“WebP”自体はかなり前から公開されているフォーマットではありますが、jpgやpngなど双方に変換するツールはWeb上にそれほど多くは公開されていません。
そんな中、今回は以下3種の無料ツールを簡単にご紹介したいと思います。
- WEBP変換ツール
- Squoosh
- ファイルコンバーター
まずこういったツールを活用するなら“WEBP変換ツール”が挙げられます。
こちらの使い方は非常にシンプルで、jpgやpng形式の画像をWebPに変換・圧縮し、逆にWebP画像をpngに変換するすることも可能なWeb上の無料ツールです。
参考：WEBP変換ツール (jpg、pngとwebpを相互変換)
“WebP”を利用して画像を軽くしたい場合、そして編集ソフトで開けない“WebP”ファイルを変換したい場合のどちらにも対応しています。
例えば…下記画像のように、36.7KBあった画像をWebPとして圧縮した場合（この場合png画像からの変換）、品質を保ったまま5.2KBにまで圧縮されていることが確認できるように、Googleがどれだけ“WebP”を推奨しているのかがわかりますね。
続いての“squoosh（スクオッシュ）”は、Googleが提供・推奨している画像圧縮ツールのひとつで、画像をドラッグアンドドロップまたは選択すると編集画面に遷移し、“WebP”など適宜ファイル形式を選択して“Quality”で画質をどこまで落としても問題ないか画像を見ながらスクロールで調整していきます。
参考：Squoosh
そして下記のように画面中央には大きなスライダーがあり、左が元画像で右が圧縮した後の画像となっていて、これをスライドすることによって画質の違いが一目瞭然ですので、劣化しすぎない程度に“Quality”を調整してみてください。
この場合、試しに“WebP”を選択し、“Quality”を50にしてみたんですが、元画像2.79MBに対して419KBと品質はそのままに、かなりの圧縮率によって画像を軽くしていることがわかります。
※こちらの写真は“squoosh”内のサンプル画像です。
続いて、“ファイルコンバーター”という無料ツールでもどういった画像形式でも“WebP”に変換することが可能です。
参考：Convertio — ファイルコンバーター
そのため、こちらは簡易的に“WebP”形式へ変換する無料ツールと言えるでしょう。（様々なファイル形式に対応しています。）
ただし、こういったWeb上に公開されている無料ツールのデメリットと言えば、画像を1枚ずつしか変換できないという点です。
この“ファイルコンバーター”は複数の一括変換に対応しています。
picture要素で対応する方法
上記の方法を活用して“WebP”形式の軽いファイルを用意した後は、通常通り“img”タグを利用して画像を表示させるわけですが、対応していないブラウザにも正しく画像を表示させるためには、“picture”タグを利用して対応しているブラウザに対して“WebP”形式のファイルを表示、未対応のブラウザに対しては従来のjpgなどの画像を読み込ませる分岐が必要となります。
また、手動で行う分岐と言ってもそれほど難しくはなく、以下のように2種類の画像を“picture”タグで囲み記述するだけです。
<picture> <source type="image/webp" src="/img/sample.webp"> <img src="/img/sample.jpg"> </picture>
こういった手作業で配置する作業を一括でできるのが先ほどご紹介したWordPressのプラグイン“WebP Express”で、こちらだと設定によっては元画像を残しつつ“WebP”形式を書き出し、さらに対応ブラウザによって表示させる画像を切り替えることも可能です。
※WordPressに関する大きな変更は、必ずバックアップしてから行うようにしましょう。
ただし、Safari14からは“WebP”対応となるため、他のブラウザも確認した後、“WebP”形式に書き出した画像のみの対応にしても良いかと思われます。（“WebP Express”には“WebP”のみを表示させる書き換え機能も備わっています。）
一方で“WebP”ファイルをjpgに変換したい場合は、“iLoveIMG”という無料ツールが便利です。
参考：iLoveIMG | 画像編集用オンラインツール
まとめ
今回は、これまでの画像品質をそのまま保ちつつ大幅に圧縮できる次世代フォーマットとして期待される“WebP（ウェッピー）”について、仕様や各種ブラウザの対応策などを詳しくご説明しました。
ページ読み込み速度は今後の検索順位にも影響する要素のひとつでもありますので、わかりやすく説明するために多くの画像を使用したことによって逆に閲覧ユーザーに対してストレスを与えないよう、ひとつひとつの画像の圧縮にも気を配りたいところです。
そんな中、今回ご説明した“WebP”といった次世代フォーマットを活用することによって、従来の品質を保ちつつ軽量化できるため、どういった手順で導入するのか？そもそも“WebP”とは何なのか？といった理解を深めて適宜対応すると良いでしょう。
特に多くの画像を使用しているサイトに関しては全体としての効果も大きいものと思われるので、今後必須となる要素として早いうちから理解しておく必要があります。
「キーワードファインダー」
キーワード選定でお悩みですか？
「キーワードファインダー」なら、検索ボリュームから順位チェック、関連語や新しいキーワードの発見など、アクセスを伸ばすために重要なキーワード選定を自動取得、一括管理が可能！
また、自動取得したキーワードは、ご自身のサイトだけでなく競合の順位も取得します。この整理された情報を元にあなたの集客経路の拡大にお役立てください！
関連記事
検索順位を改善するには正しいSEOの知識が必要です
