WebP(ウェッピー)とは|JPEG・PNGとの違い・変換方法も

サイト制作

WebP(ウェッピー)とは|JPEG・PNGとの違い・変換方法も

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

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

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

1.WebPとは?

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

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

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

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

1-1.WebPとJPEG・PNG・GIFとの違い

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

画像形式 圧縮方法 アルファチャンネル アニメーション
WebP 非可逆圧縮
可逆圧縮
JPEG 非可逆圧縮 × ×
PNG 可逆圧縮 ×
GIF 可逆圧縮

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

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

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

1-2.WebPの対応Webブラウザ

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

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

■WebP対応ブラウザ(2020年末時点)
  • Chrome
  • Firefox
  • Edge
  • Safari

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

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

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

2.WebPのメリット・デメリット

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

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

■WebPのメリット
  • 画像軽量化により表示速度が向上する
  • 多彩な表現が可能となる
  • 汎用性が高くあらゆる画像に適用できる

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

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

■WebPのデメリット
  • 画像処理ソフトや画像素材サイトの対応が追い付いていない
  • 対応していないブラウザがある

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

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

3.WebPを生成・変換する方法

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

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

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

3-1.Webサイト上のツールを使用する

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

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

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

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

Squoosh Googleの開発チームがリリースした変換ツールです。ドラッグ&ドロップで簡単に画像ファイルをWebPへと変換できます。
SyncerWEBP変換ツール シンプルでわかりやすい、「JPEG」「PNG」をWebPへと変換できるツールです。WebPをPNGへ変換することもできます。
ACONVER.COM 幅広いフォーマットに対応した変換ツールです。画像サイズの指定にも対応しているため非常に便利です。

3-2.Photoshopで書き出す

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

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

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

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

3-3.コマンドを使用する

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

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

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

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

まとめ

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

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

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

中小企業の採用成功モデル!2024年に中小企業がすべき「採用」と「定着」の人事戦略 初心者でも使いこなせるSEO一元管理ツールCANALY

RANKING

TOTAL
WEEKLY
中小企業の採用成功モデル!2024年に中小企業がすべき「採用」と「定着」の人事戦略
上部へ戻る
CANALY

300分かかる競合分析が1分で可能に無料で分析してみる

  • 分かりやすい操作で簡単に分析
  • SEOに必要な機能がAll in One
  • ずっと無料で使い続けられる
CANALYを無料で試す
CANALY