画像ファイルを軽くできる画期的な次世代フォーマット“WebP（ウェッピー）”をご存知ですか？
この“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”とは、上記のように圧縮率の高いフォーマットにもかかわらず背景透過としても書き出すことができ、2020年7月現在ではSafari・IEに対応していませんが、下記ページを参考にすると2020年秋公開予定のiOS14以降からのSafari14は“WebP”に対応するとのことで、恐らく一気に使用率が高まるかと思われます。
参考：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を使用するメリットとしてはなんと言っても素早く画像を表示できるという点が挙げられます。画像が素早く表示されるということはユーザビリティにとっても良い影響を及ぼしますし、検索ユーザーにとってストレスなくコンテンツを閲覧できることからブラウザバックされることもないでしょう。
逆に画像が表示されるまでに時間がかかってしまうと、ユーザーは数秒でそのページから離れてしまいます。検索ユーザーにとってそのページじゃないといけない理由はありませんから、素早く表示されてスラスラ読み進められるコンテンツへ移動してしまうことと思われます。
また、画像がすぐに表示されるということはファイル自体軽いということを意味しますから、無駄に重たいファイルを見せずに済みますし、画像を数多く扱うサイトだとサーバーの軽量化にも繋がるため、単純に画像を表示させる分にとってはメリットしかありません。
他にも昨今ではページスピードもSEOの要因と言われていますので、ページが早く表示されることによって検索順位にも良い影響を及ぼす可能性があります。（もちろんページが早く表示されるだけで上位表示されるわけではなく、あくまで様々な要因のひとつというわけです。）
WebPのデメリット
続いて現状の“WebP”についてのデメリットと言えば、やはり現状ではSafari・IEには対応していないという点で、Safariと言ってもiPhoneのデフォルトブラウザということもあって今現在全ての画像を“WebP”に置き換えてしまうとかなり影響も大きく、スマホ（iPhone）からの閲覧ユーザーにとっても支障をきたすことになります。
ただ、上記でもご説明した通り2020年秋頃に公開されるOSのアップデートによってSafariにも対応するとのことでしたので、現段階では十分に“WebP”についての理解、そして導入方法について対応策を練っておくべきと言えるでしょう。
また、下記を参考にすると、IEのシェアは現状約5%となっていて（PC・タブレット・スマホ全て含め）、ほとんどがChrome（主にPC）とSafari（主にスマホ）で占めているため、IEを切り捨てて考えるのもひとつの手ですが、条件分岐によって対応していないブラウザの場合には従来のjpgやpngなどを表示する方法もありますので、今後のサイト管理を考慮した上で決めると良いかと思われます。（サイトにもよりますので、アナリティクスで流入ブラウザをチェックしてみてください。）
他にも編集ソフトに対応していないという点が挙げられるでしょう。
画像補正・編集ソフトとして有名な“Photoshop”の最新版ですら“WebP”のファイル画像を開こうすると、“要求された操作を完了できません。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のデフォルトでは“WebP”形式で保存された画像を開くことも書き出すこともできませんが、“WebPShop”というプラグインを導入することによって読み込み・書き出すことができます。
※ただし、2020年7月時点では“macOS Catalina”には対応していません。
これを導入するには、「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
- iLoveIMG
まずこういったツールを活用するなら“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変換ツール”と若干仕様が似ていますが、“iLoveIMG”という無料ツールだとシンプルにどういった画像形式も全てjpgに変換することが可能です。
参考：iLoveIMG | 画像編集用オンラインツール
そのため、こちらは“WebP”形式の画像が開けなくて困っている方向けの無料ツールと言えるでしょう。（書き出すファイル形式はjpgのみとなっています。）
ただし、こういったWeb上に公開されている無料ツールのデメリットと言えば、画像を1枚ずつしか圧縮できないという点です。
picture要素で対応する方法
上記の方法を活用して“WebP”形式の軽いファイルを用意した後は、通常通り“img”タグを利用して画像を表示させるわけですが、先ほどもご説明した通り2020年7月現在ではIEとSafariには対応していません。
そこで、“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（ウェッピー）”について仕様や、対応していないブラウザの対応策などを詳しくご説明しました。
ページ読み込み速度は今後の検索順位にも影響する要素のひとつでもありますので、わかりやすく説明するために多くの画像を使用したことによって逆に閲覧ユーザーに対してストレスを与えないよう、ひとつひとつの画像の圧縮にも気を配りたいところです。
そんな中、今回ご説明した“WebP”といった次世代フォーマットを活用することによってファイル形式は一択に絞られ、これまでの品質を保ちつつ軽量化することができるため、どういった手順で導入するのか？そもそも“WebP”とは何なのか？といった理解を深めて適宜対応すると良いでしょう。
特に多くの画像を使用しているサイトに関しては全体としての効果も大きいものと思われるため、今後必須となる要素として早いうちからしっかりと理解しておく必要があります。
