WebPとは？使用するメリットから変換方法まで詳しくご紹介
静止画像のファイル形式というと「JPG」「PNG」「GIF」などを思い浮かべる人が多いですが、画像の共有や保存をさらにしやすくするために開発されたのがWebPというファイル形式です。
この記事ではWebPからの変換方法や使用するメリットまで詳しく解説します。
■ WebPとは？
WebPはGoogleが2010年9月に仕様を公表した画像のファイル形式で、拡張子は「.webp」です。
GoogleではWebPを使用するとPNGと比較して26％、JPEGと比較して約25％～34％ほど画像容量を圧縮できると発表しているのです。
今まで使用されてきた「JPG」「PNG」「GIF」とWebPの違いを表にまとめてみました。
| 画像形式 | WebP | JPG | PNG | GIF |
| 圧縮方法 | 可逆圧縮 非可逆圧縮 | 非可逆圧縮 | 可逆圧縮 | 可逆圧縮 |
| 透過 | 〇 | × | 〇 | △ |
| アニメーション | 〇 | × | × | 〇 |
| 対応ブラウザ | GoogleChrome、Firefox、MicrosoftEdge、Safari（Ver14～） | GoogleChrome、Firefox、MicrosoftEdge、Safari（Ver14～） | GoogleChrome、Firefox、MicrosoftEdge、Safari（Ver14～） | GoogleChrome、Firefox、MicrosoftEdge、Safari（Ver14～） |
可逆圧縮とは圧縮したデータを元に戻す時に、完全に元に戻す事ができる圧縮方法を指し、非可逆圧縮とはデータを小さくすることを重視するため圧縮したデータを戻すと劣化する圧縮方法を指します。
WebPは可逆圧縮、非可逆圧縮、透過画像やアニメーションで対応可能なので、JPG、PNG、GIFをカバーする次世代フォーマットと言われているのです。
参考：WebPのしくみ「Web用の新しいイメージ形式」
■WebPを使用するメリット
WebPを使用するメリットを3つご紹介します。
①Webサイトの表示速度を改善できる
WebPではPNGより26％、JPEGより約25％～34％ほど画像容量を圧縮できるため、画像が軽くなりWebサイトの表示速度を改善することができます。
表示速度が改善されればユーザーにとってサイトが重いなどのストレスが軽減されて使い勝手が良くなるのはもちろんですが、Core Web VitalsというGoogle検索アルゴリズムの指標でWebサイトのページ読み込み速度が評価されるため、SEO対策の1つともなります。
②非可逆圧縮でもアルファチャンネルを扱える
WebPにおいては非可逆圧縮でもアルファチャンネルを扱うことができます。
アルファチャンネルとは画像処理において不透明度を表現するため、透過した画像も扱うことができるようになるということです。
■WebPを使用するデメリット
WebPを使用するデメリットも2つご紹介します。
①非対応のブラウザがある
WebPはInternet Explorer、Safari（Ver 13まで）には対応していません。
②変換に手間がかかる
Webデザインで多く用いられるPhotoshopやAdobe XDといったソフトではWebP形式での書き出しをすることができません。
そのためWebP変換用のアプリケーションを使用するか、コマンドで変換する必要があり他の画像形式と比較すると手間がかかると言えるでしょう。
■画像をWebPへ変換する方法
手持ちの画像をWebPへと変換する方法を4つご紹介します。
①WebPへの変換ツールを使用する
「WebP 変換」などで検索するとWebPへの変換ツールがたくさん出てくるため、このようなサービスを利用して変換するのも良いでしょう。
おすすめのツールを3つご紹介します。
・Squoosh（スクワッシュ）
Googleが提供するツールで、画面中央に変換したい画像をドラッグ＆ドロップすると編集開始することができます。変換できるファイル形式はWebP以外にもJPGやPNGなど9種類から選ぶことができるのも便利です。
参考：Squooshホームページ
・Syncer
WebPからPNGへの変換、JPG、PNGからWebPへの変換ができるツールです。Googlechrome以外のWebブラウザには対応していないことに注意しましょう。
参考：Syncerホームページ
・ACONVER.COM
WebP以外にもさまざまなファイル形式への変換ができる汎用性の高いツールです。
参考：ACONVER.COMホームページ
②Photoshop用のプラグイン「WebPshop」で書き出す
Photoshopを使用して画像を作成している場合、そのままではWebP形式で書き出すことはできないため、ソースコード管理サービスのGitHubから、WebPShopというWebPへの書き出しが行えるようになるプラグインをダウンロード・インストールしましょう。
Photoshopを再起動するとドラッグ&ドロップでWebPの画像ファイルを読み込んだり、Photoshopで作成した画像データをWebP形式で書き出したりすることができるようになります。
参考：GitHub「WebPShop」
③コマンドラインツールで変換する
コマンドラインの操作に慣れている人はGoogle公式のcwebpというコマンドラインツールの使用がおすすめです。
参考：Google「cwebp」
④ソフトを使って変換する
WebP形式のファイルに変換できるソフトを利用して変換するのも良いでしょう。例えば、XnConvertというソフトではWebP形式に変換できるだけではなくトリミングや色の補正などの編集作業も行うことができます。
参考：XnConvertホームページ
■WebPの導入ができない場合の対処法
WebPの導入ができない場合は既存画像の軽量化を図るのが望ましいでしょう。
例えばPNGファイルはJPGより使用する色数が多いため重くなりますが、色数を制限したPNG8に切り替えたり、軽量化ツールなどを用いて圧縮したりするとWebサイトの表示速度が改善されるでしょう。
軽量化ツールではドラッグ＆ドロップで手軽に圧縮開始できるTinyPNGがおすすめです。
参考：TinyPNGホームページ
■まとめ
WebPは画像のファイル形式の1つですが、使用すると画像容量を大幅に圧縮でき、透過画像やアニメーションでも画質を犠牲にすれば圧縮可能なので、JPG、PNG、GIFをカバーする次世代フォーマットと言われていることがわかりました。
ユーザーにとって使い勝手の良いWebサイトを作るため、ぜひWebPを活用してみてください。
