WebP（ウェッピー）利用でWEBサイトの表示速度改善・SEOを対策しよう！
web上で使える画像フォーマットには「JPG」「PNG」「GIF」など様々な種類がありますが、画像ファイルを軽くできる次世代フォーマット”WebP（ウェッピー）”をご存知でしょうか？
画像ファイルが軽くなるということは、web上での表示速度も速くなり、SEO対策にも有効です。
対応ブラウザが増えたことで注目されているWebP（ウェッピー）について詳しく解説してきます。
INDEX 目次
１．次世代画像フォーマット、WebP（ウェッピー）とは
「WebP（ウェッピー）」とは、Googleが新たに開発した画像フォーマットです。
ファイルの拡張子はそのまま「.webp」となっています。JPGやPNGよりファイルが軽く表示速度の短縮が期待されている次世代画像フォーマットです。
2，WebPのメリット・デメリット
メリット
・JPGとPNGやGIFのメリットを併せ持つ画像フォーマット
WebPはJPGと同じ非可逆圧縮ですが、「アルファチャンネルが使える」という特徴があります。
非可逆圧縮とは「圧縮前の状態に戻せない圧縮方法」です。非可逆圧縮の画像フォーマットでは、画像に加工を加えて保存した場合、加工前の状態には戻せなくなりますが、その分圧縮率は高くなります。
WebPは非可逆圧縮の画像フォーマットですが、アルファチャンネルを扱えるため、可逆圧縮であるPNGやGIFと同じように背景を透過することができます。
可逆圧縮では圧縮率は低くなるというデメリットがありましたが、Webpは透過に対応しながらも圧縮率の高い非可逆圧縮という点がメリットです。
さらにアニメーションにも対応しており、JPGとPNGやGIFのメリットを併せ持っていると言えます。
・Webサイトの表示速度はSEOの評価にも影響する
ファイルサイズが軽量化できるということは、Webサイトの閲覧時に処理速度が早くなるということです。最近では、Googleはモバイルファーストを提言し、ページスピードも重要視されています。ページ表示速度が検索順位に繋がることがありますので、SEOの観点からも有効な施策になります。
・画像の最適化はユーザ体験の向上にもプラスになる
ユーザー体験（UX）を考慮すると、サイトには適宜画像を用いて、視覚的に分かりやすくする必要があります。
しかし、画像を多く用いることで表示速度が下がってしまうと、ユーザーの離脱率が高くなってしまいます。
Googleが公表したWebサイトのページ表示速度とユーザー直帰率の関係性によると、表示されるまでに3秒以上かかると53%のユーザーが離脱してしまうそうです。
WebPフォーマットで画像を軽量化すれば、画像を多用しても表示速度を遅くすることなく、
離脱率の増加や滞在時間の低下を防ぐことができます。
デメリット
・対応ブラウザだが、IE以外はほぼ対応されている。
これまでWebPのデメリットは、対応ブラウザが少ないという事でしたが、現在は主要ブラウザにはほぼ対応し、Internet Explorerのみ非対応となっています。しかし、他にもIEに未対応の技術は多く、IEユーザーは減ってきているため、大きなデメリットとは言えないかもしれません。
3，WebPとJPG、PNG、GIFとの違いを比較
主要フォーマットである「JPG」「PNG」「GIF」と、WebPとの違いを見ていきましょう。
Googleの公式ドキュメントによると、WebPはほぼ同等の画質であっても、PNGより26%、JPEGより25-34%ファイルサイズを圧縮することができます。
参考：Google公式「A new image format for the Web」
また、単に軽量化するだけでなく、前述のとおり画像の透過も可能です。
これまで、背景透過の必要に応じて、JPGとPNGを使い分けなければならなかったのですが、WebPを使うことで画像形式を統一することが可能になります。
アニメーションにも対応しており、JPG画像からそのままアニメーションを作成することができます。
これまでは、JPG画像を一度GIFに変換する必要がありましたが、WebPならその手間も省略できます。
4，対応ブラウザについて
次世代フォーマットとも言われるWebPですが、実は2010年に発表されています。
最近まで対応ブラウザが少なく、Firefox、Microsoft Edge、SafariなどPCの主要ブラウザでサポートされていなかったため、なかなか普及が進みませんでした。
しかし、2018年にFirefox、Microsoft Edge、2020年にAppleのiOS14、新しいmacOS Big Sur（Safari）も対応となり、WebPの普及は急速に進んでいくと考えられます。
5，WebPへ変換、生成する方法
.webpへの変換方法は複数ありますが、一般的な3つの方法をご紹介します。
1，Squooshで変換する
Googleが提供しているSquooshを利用するのが最も手軽な方法でしょう。
まずはsquooshのサイトにアクセスしてみましょう。
https://squoosh.app/
webpに変換したい画像データを画面上にドラッグ＆ドロップすると、画像の編集画面に切り替わります。
中央に線があり、左側がオリジナル、右側で変換後の画質を確認することができます。
webp以外にもJPEGやPNGなど9つのフォーマットを選ぶことができ、スライダーを動かして直感的に圧縮率の調整ができます。
調整が終わったら、右下の青いボタンをクリックするとダウンロードが始まります。
2，Photoshopプラグインを利用して書き出す
Photoshopデフォルトではwebp形式の画像を開くことも書き出すこともできません。
書き出すためには、Google公式のPhotoshop用プラグインである、“WebPShop”の利用が必要です。
導入するには、ソースコード管理サービスであるGitHubからWebPShopのプラグインをダウンロードします。
GitHub – fnordware/AdobeWebM: WebM plug-ins for Adobe programs
ダウンロードできたら「bin」フォルダを開き、Macを使用している人はMac、Windowsを使用している人はWindowsと書かれたフォルダを開きます。次に、windowsを使用している人は「bin」フォルダの中にある「WebPShop.8bi」と書かれている項目を、Macを使用している人は「WebPShop.plugin」とかかれている項目をPhotoshopの「Plug-ins」の中にコピーします。これでインストール完了です。
Photoshopを再起動してみると、ドラッグ&ドロップで“WebP”形式の画像ファイルを読み込んだり、Photoshopで作成した画像データを“WebP”として書き出すことが可能になります。
https://developers.google.com/speed/webp/docs/webpshop
3，コマンドツールで変換する
コマンドライン操作に慣れている方は、コマンドラインツールを使えば、複数ファイルを纏めて変換することができます。
Google公式のコマンドラインツール（cwebp）を使うのがおすすめです。
https://developers.google.com/speed/webp/download
ただし、コマンドライン操作に慣れていないと、難しい方法になります。
6，まとめ
画像品質をそのままに、大幅に圧縮することができる次世代フォーマットとして期待される“WebP（ウェッピー）”について詳しくご紹介しました。
画像の軽量化はwebサイトの表示速度アップにつながり、SEO的にもメリットが大きいと言えます。
また、これまでデメリットとされてきた対応ブラウザの少なさも、PCとスマホの主要ブラウザがWebPに対応したことで解消され、ほぼ気にしなくてよいレベルになっています。
Webサイトのパフォーマンスを向上させたい方は、WebPの導入を検討してみてはいかがでしょうか。
webp導入を迷われている方、自分たちで導入するにはハードルが高いと感じられている方は、
弊社でもwebpに対応した制作が可能ですので、ぜひ一度お問い合わせください。
この記事が気に入ったら
いいね！しよう
