WebP（ウェッピー）とは｜JPEG・PNGとの違い・変換方法も

Webサイトに使用される画像には、写真やイラストなど画像の種類によって、「JPEG」「GIF」などの適切な保存形式（フォーマット）が存在します。

そして、従来使用されていた画像フォーマットに加え、軽量で汎用性が高いことから近年注目を集めている次世代フォーマットが「WebP（ウェッピー）」です。WebPは普及が進んでおり、今後画像フォーマットのスタンダードとなる可能性が高いとされています。

今回は、WebPの概要や他の画像フォーマットとの違いから、WebPのメリット・デメリット、WebPの生成・変換方法までを解説します。

WebPとは、Googleにより開発された新しい静止画像フォーマットのことです。ファイルの拡張子は「.webp」となります。Webページ読み込み時の通信量を削減して、より早く画像が表示されることを目的として開発されました。

そのため、現行で使用されている「JPEG」や「PNG」よりも、ファイルサイズを大幅に軽量化できることが最大の特徴です。

また、WebPは背景透過やアニメーションといった、他の画像フォーマットの長所を併せ持っている汎用性の高い画像フォーマットとしても注目されています。

現在は画像の種類によってさまざまな画像フォーマットが使い分けられていますが、WebPが普及すれば、画像フォーマットはWebP一択となることも十分に考えられるでしょう。

画像フォーマットには複数の種類があるため、WebPとその他の画像フォーマットの違いがわからない方も多くいるはずです。ここでは、WebPとJPEG・PNG・GIFといった代表的な画像フォーマットの違いを、比較表を用いてわかりやすく解説します。

WebPは上記の表のとおり、主要な画像フォーマットの長所をすべて併せ持っていることが特徴です。

圧縮方法の「非可逆圧縮」とは、画像圧縮時にデータが欠落することから、画像に変更を加えると元に戻せない圧縮方法のことです。例えばJPEGの画像フォーマットでは、画像を切り取ったりサイズ変更を行ったりして保存すると、元に戻すことはできません。一方で、PNGやGIFは可逆圧縮であるため、伸張を行っても元に戻すことができます。

また2011年には、WebPに「可逆圧縮」と透過度の設定が可能な「アルファチャンネル」も追加されました。色情報にアルファチャンネルを組み合わせると、透明・半透明などを含んだ多くの色を扱えるため、画像に使用できる色の表現の幅が広がります。GIFでのみ使用可能であったアニメーションを行うことも可能です。

WebPはすべてのブラウザに対応しているわけではなく、非対応ブラウザでは表示できないため、代替画像を用意する必要がある点に注意が必要です。

現在のWebP対応ブラウザは下記のとおりです。

対応ブラウザが少なかったことがWebPの普及が遅れた主な原因ですが、2020年末時点での対応状況は、IE以外のほぼすべての主要ブラウザをカバーしています。

AppleのiOSとMacはWebP対応が遅れていましたが、2020年秋にリリースされたiOS14とmacの新OSであるBigSurから、WebP対応となりました。

Appleの対応により、PC・スマホ両方のすべての主要ブラウザがWebP対応となったため、今後はWebPの利用率や普及率もさらに高まっていくでしょう。

メリットが多く、次世代画像フォーマットとして注目されているWebPですが、若干のデメリットも存在します。WebPを最大限使いこなすためには、メリット・デメリット両方を知っておくことが重要と言えるでしょう。

ここでは、WebPのメリット・デメリットについてそれぞれ解説します。

WebPの最大のメリットは、画像の軽量化による表示速度の高速化にあります。Webサイトを閲覧するユーザーのユーザビリティ向上はもちろん、表示速度は検索エンジンからの評価にも影響するため、SEO効果も期待できます。

また、あらゆる画像フォーマットの長所を併せ持ち汎用性が高いことも大きなメリットです。画像の種類でフォーマットを使い分ける必要がないため、画像の取り扱いもシンプルとなります。

FCPの改善方法3選＆表示速度の測定方法・おすすめツールを紹介！

当記事では、FCPを改善しWebサイトの表示速度を上げたい方に向けて、FCPのチェックツールや測定方法を、改善方法を詳細に解説します。運営しているWebサイトの表示速度や直帰率に悩んでいる方は、ぜひ参考にして下さい。

Test My Siteとは｜使い方や表示速度の改善策も紹介

#post_excerpt

WebPのデメリットは、新しい技術であるがゆえに対応していないブラウザがあることや、画像処理ソフトや画像素材サイトの対応が追い付いていないことです。

現在はまだファイル変換などの手間が必要ですが、今後はWebPのスタンダード化によって徐々に解決されるでしょう。

WebPは多くのメリットがありますが、まだ新しい画像フォーマットであるため、画像作成ソフトウエアや画像素材サイトの対応が追い付いていません。

そのため、WebPを利用したい場合は、「JPEG」「PNG」といった他の画像フォーマットから変換を行う必要があります。

ここでは、WebPを生成・変換する方法について解説します。

最も手軽に画像をWebPに変換する方法は、ブラウザ上で画像変換が可能なWebサイト（Webサービス）を利用する方法です。

ブラウザ上に変換したいファイルをアップロードしてボタンを押すだけで、他の画像フォーマットをWebPへと変換できるため、非常に簡単で便利です。

WebPの効果性や有用性を試してみたい方や、変換したい画像の枚数が少ない場合には特におすすめと言えるでしょう。

下記は、画像をWebPへ変換できる代表的なWebサイトです。ぜひ、試してみてください。

代表的な画像処理ソフト「Photoshop」を用いることで、他の画像フォーマットをWebPへと変換したり、同ソフトで作成した画像をWebPで書き出したりすることができます。

ただし、デフォルトのままではWebPに対応していないため、Google公式のプラグイン「Web Shop」をインストールする必要があります。

プラグインを有効化することで、PhotoShopでもWebP画像を取り扱ったり、WebPフォーマットで保存したりといった操作が可能となります。

「Web Shop」は、下記URLからダウンロードすることが可能です。

コマンドラインを使用することでも、画像をWebPへと変換することができます。

専門的知識が必要となりますが、複数の画像をまとめて変換できるといったメリットがあるため、効率性を重視する方にはおすすめです。

Google公式のコマンドラインツール「cwebp」では、コマンドラインの入力などの解説情報がわかりやすく記載されているため、一度チェックしておきましょう。

「cwebp」は、下記URLからダウンロードすることができます。

WebPは多くのメリットを有する次世代の画像フォーマットとして、広く普及してきています。主要ブラウザの対応もほぼ完了したことから、今後は急速にニーズが伸びる可能性もあるでしょう。

インターネット技術は日々急速に進歩しており、サービスの提供者側も利用者側も、新しい技術動向にいち早く対応することで、得られる恩恵も大きくなります。

WebPに興味・関心がある方やWebPを使いこなしたい方は、今回の情報も参考に、ぜひ知識・理解を深めて仕事や私生活に役立ててください。

次世代フォーマットの画像とは？主な3つの種類と表示速度の改善方法

当記事では、Google PageSpeed Insightsで提示される改善項目「次世代フォーマットでの画像の配信」について、各フォーマットの特徴や対応ブラウザのほか、次世代フォーマットが利用できない場合の代替策について解説します。