WebPとは?変換方法やメリット・他の画像フォーマットとの違いを解説!

ここ最近、Webサイトの作成にWebPという画像のファイル形式が利用されるようになりました。Webpとはどのような特徴があり、JPGなどの従来の画像形式との違いとはどのようなものなのでしょうか。この記事では、WebPについて詳しく解説します。

WebPとは?変換方法やメリット・他の画像フォーマットとの違いを解説!のイメージ

目次

  1. 1拡張子「.webp」のWebPとは?
  2. Googleが開発した画像のファイル形式
  3. 2WebPのメリットとデメリットについて
  4. メリットとは?
  5. デメリットとは?
  6. 3WebPと他の画像形式との変換方法について
  7. Squooshを利用する方法
  8. WebPShopを利用する方法
  9. Chromeの拡張機能を使う方法
  10. 4今後はWebPの活用も検討しよう!

拡張子「.webp」のWebPとは?

Webサイトで利用される画像の形式といえば、今まではJPGやJPEG、PNGが主に使われていました。動画とまでは言えないような、短時間のアニメーションにはGIFが使われています。

しかし、ここ最近、JPGやPNG、GIFに変わる画像形式としてWebPという形式が頻繁に使われるようになっています。この記事では、WebPとはどのような特徴を持つ画像形式で、JPGなどからどのように変換すればいいのか詳しく解説します。

Googleが開発した画像のファイル形式

WebPはGoogleが開発した画像のファイル形式です。読み方に少し困ってしまいますが「ウェッピー」と呼ばれています。急速に普及し始めたのは、2020年を過ぎてからですが、Googleでは2010年に仕様を公開して、提供されるようになりました。

GoogleがWebPを開発した目的は、Webサイトの容量を減らしてトラフィックの量を軽減させて、Webページの表示を高速化することです。

今まで使われてきた画像のファイル形式の特徴をWebPに詰め込んだ上で、ファイルサイズの圧縮に成功しています

JPGやPNGで貼っていた画像や、GIFで貼っていたアニメーションをWebPに変えたところ、サイトの容量を減らすことに成功して、表示の高速化ができた、というサイト運営者もたくさん出現しています。

Thumb画像圧縮ツール「TinyPNG」はパンダが目印!使い方を解説!
画像を圧縮する悲痛ようがあるときにパンダ印の「TinyPNG」がとても便利だと話題になってい...

WebPのメリットとデメリットについて

他の画像形式と比較したときに、WebPにはメリットもあればデメリットもあります。WebPにはどのようなメリットとデメリットがあるのか詳しく解説します。

メリットとは?

WebPのメリットとは次の通りです。

ファイルサイズがJPGよりも小さくWebページの表示を高速化できる

WebPを使う最大のメリットは、画像のファイルサイズが小さい点です。Googleが公表している事例では、同じ画像を同じ画質で圧縮した場合、JPGと比較すると25%から34%、PNGと比較すると28%もファイル容量が小さくなりました

Webサイトやアプリの表示を高速化するためには、ページの容量を小さくすることが大切です。テキストの容量はほとんどないので、Webサイトの表示スピードを決めるのは画像の容量だと言ってもいいでしょう。

画像が小さければ小さいほど表示を高速化できます。サイトの高速化はSEO対策としても重要なので、今後のWebサイトにはWebPの導入が欠かせないと言ってもいいでしょう。

PNGのように背景透過が可能

WebPのメリットには、PNGと同じように背景透過が可能だという点もあります。WebPで背景透過をするためには、画像に情報を追加するアルファチャンネルを扱う必要があります。

アルファチャンネルを扱うことで、WebPのファイル容量は多少大きくなってしまいます。しかし、WebPで透過処理を行っても、PNGよりもファイル容量は小さくてすみます。

画像の背景透過を扱いたい場合に、ファイル容量の大きなPNGの扱いに苦しんできたWeb開発者は、WebPの導入を検討したほうがいいでしょう。

GIFのようにアニメーションにも対応している

数秒程度の簡単なアニメーション画像を作成するときにはGIFが利用されてきました。WebPではGIF画像のような、簡単なアニメーション画像も作成できます

GIFは容量が大きく、Webサイトの表示を遅くしてしまう原因にもなってきました。しかし、WebPにGIFアニメーションを置き換えることで、こちらもサイトの容量を削減できる可能性があります。

デメリットとは?

WebPには上記のようなメリットがありますが、デメリットも有ります。WebPが抱えるデメリットにはどのようなものがあるのかも見ておきましょう。

非可逆圧縮なので加工すると元の画像には戻せない

画像の形式には可逆圧縮と非可逆圧縮があります。可逆圧縮とは、いったん切り取りや圧縮して保存しても、元の画像と同じ状態に戻すことができる圧縮形式です。画像形式ではPNGが可逆圧縮に対応しています。GIFもPNGほどではありませんが、可逆圧縮が可能です。

非可逆圧縮とは、切り取ったり拡大や縮小をして保存してしまうと、元の画像に戻すことができない画像のファイル形式です。もともとJPGやJPEGは非可逆圧縮で、加工したあとで保存してしまうと元のファイル形式には戻せません。

WebPも非可逆圧縮なので、加工後に保存してしまうと、元の画像に戻すことはできません。WebPを加工するときにはその点に注意して慎重に加工と保存を行いましょう。

対応していないブラウザがある

JPGやPNG、GIFのいいとこ取りとも言えるWebPが2010年に提供開始されたのに、今まで普及してこなかった理由は、対応しているブラウザが少なかったためです

今まで対応してきたブラウザは、開発元であるGoogleのChrome、Microsoft Edge、Firefoxのみでした。Windows10やAndroid端末で利用されている主要なブラウザはカバーしていますが、Internet Exploreには対応していません。また、MacとiPhoneのデフォルトのブラウザであるSafariにも対応していませんでした。

しかし、IEが提供されていたWindowsではWindows10ではEdgeが標準ブラウザとなり、現在のIEユーザーは5%程度となっています。また、iOS14からはSafariでもWebPに対応しています。

今後は、WebPを使ったとしても、WebPを使ったサイトの閲覧ができないブラウザのユーザーが5%以下に減っていくので、WebPを導入するサイトが増えていくものと思われます。

Thumb「.tif」はTIFF形式の画像ファイルの拡張子!JPEGとの違いも解説!
拡張子「.tif」のファイルはTIFF形式の画像ファイルのファイル形式です。この記事では、拡...

WebPと他の画像形式との変換方法について

今後は、対応するブラウザが増えていくことによって、WebPが画像の形式として増えていくでしょう。しかし、まだまだ手元にある画像はJPGやPNGであるという方が多いでしょう。

また、Web開発をしている方が、手持ちの画像をWebPに変換するだけではありません。Webサイトのユーザーがサイトからダウンロードした画像を扱い慣れたJPGやPNGに変換したい場合もあります。

手元にあるJPGなどの画像をWebPに変換する、ダウンロードしたWebPをJPGなど変換するにはどうしたらいいか解説します。

Squooshを利用する方法

手元に持っている画像をWebPに変換する方法として、最もおすすめな方法はSquooshを利用する方法です。Squooshとは、Googleが開発した画像圧縮ツールで、ブラウザから利用できます。WebPへの変換だけではなく、WebPから他の画像形式への変換も可能です。

WebPとは?
Squoosh

上記のリンクからSquooshのページへアクセスして、「Drop OR Paste」にWebPに変換したい画像をドラッグ&ドロップして貼り付けます。

WebPとは?

画面の左側にオリジナル画像、右側に圧縮された画像が表示されています。ファイル形式でWebPを選択して、圧縮率を調整すれば、実際の画像の様子を確認しながら圧縮できます。圧縮しすぎる心配がないので安心です。

WebPShopを利用する方法

画像加工アプリのPhotoshopを利用しているのであれば、Photoshopに「WebPShop」のプラグインを入れることで、JPGなどの画像をWebPに変換できます。

Chromeの拡張機能を使う方法

特に、Webサイト上のWebP画像をJPGなどに変換したい場合には、Google Chromeの拡張機能を利用するといいでしょう。Webページに掲載されている画像を右クリックするだけで、画像をJPGやPNGに変換してダウンロードすることができます。

WebPとは?
Save image as Type

上記のリンクから拡張機能の追加ページへ入り「Chromeへ追加」をクリックします。するとGoogle Chromeに追加できます。ダウンロードしたい画像があったら、右クリックして「Save image as Type」へ進むと、画像の形式を選択してダウンロードできます。

ThumbGyazoの使い方!画像キャプチャ(スクリーンショット)を手軽に共有する方法を解説!
GyazoはPC上の画面のスクリーンショットを共有するのに便利なアプリですが使い方はどうした...

今後はWebPの活用も検討しよう!

この記事では、最近多く使われるようになってきた、WebPという画像形式について詳しく解説してきました。Googleはインターネット回線の容量を高速化するために、サイトの軽減を求めています。

特に画像を多く使っているサイトは、画像の軽量化が求められています。今後はWebPの活用がSEO対策にも重要です。ぜひWebPを活用して、サイトの軽減化を図ることを検討してみましょう。

関連するまとめ

Original
この記事のライター
K.C
皆様のお役に立てる情報をお届けするために日々精進していきます。どうぞよろしくお願いします。