WebPとは?拡張子や変換方法・使うメリットを解説!

画像の拡張子の種類は様々ありますが、その中にWebPというものがあります。WebPとは何かしらない人もいるでしょうし、JPGなどに変換したい人もいるでしょう。そんな方向けに、WebPとはなにかJPGやPNGへ、または逆に変換する方法とは何かなどを解説します。

WebPとは?拡張子や変換方法・使うメリットを解説!のイメージ

目次

  1. 1WebPとは
  2. 画像フォーマットの一種
  3. WebPのメリット/デメリット
  4. JPGやPNGとの違い
  5. 変換方法や保存方法
  6. 最後に

WebPとは

画像ファイルの拡張子というと、皆さんは何を思い浮かべますか? JPG/JPEGやPNG、GIFなどが思い浮かぶ人が多いのではないかと思います。

そんなふうに皆さんが思い浮かぶほど主流だった画像ファイル形式のJPGやPNGですが、それよりさらに便利に使えるファイル拡張子にWebP(.webp)というものがあります。

画像フォーマットの一種

WebPとは2010年に発表されたGoogle発の拡張子で、非可逆圧縮圧縮の画像ファイル形式です。Web上で表示する画像としてWebPは利用しやすいファイル形式ですが、知らない人も少なくないのではないでしょうか。

2010年に発表されたにもかかわらずWebPが浸透していないのは、これまで主要なブラウザが対応していない画像形式だったことが大きいです。それについては後述します。

拡張子は?

ではWebPの拡張子とはどういうものなのかですが、これは「.webp」です。WebPという名前の通りの拡張子ですので非常に分かりやすいものになっています。

WebPのメリット/デメリット

では、WebP(.webp)のメリットやデメリットはどのような部分にあるのか、それによってJPGやPNGなどに変えてWebP(.webp)を利用しようか考えるという人もいるかと思いますので、それぞれ確認していきましょう。

WebPのメリット

WebP(.webp)のメリットとはなにかから確認しましょう。WebPのメリットは、非可逆圧縮の画像ファイル形式であるにも関わらずアルファチャンネルを扱うことができるという部分にあります。

非可逆圧縮とはなにか、という部分で悩む人もいるかと思いますが、画像を圧縮(軽量化)した場合、元の状態には戻せないファイル形式を示します。その上、画像の編集や上書き保存のたびに画質が劣化していきます。

代表的な非可逆圧縮のファイル形式にはJPG/JPEGがありますが、WebPもこのJPGと同じ非可逆圧縮のファイル形式です。

では、アルファチャンネルとはなにかですが、アルファチャンネルを扱うことができると画像の透過などをおこなうことができるようになります。透過ができるファイル形式としてはPNGやGIFがありますが、WebPはそれも可能となっているのです。

つまるところ、WebPはJPGとPNGやGIFのメリットを併せ持ったファイル形式なのです。GoogleによればPNGと比較して26%、JPGより25~34%軽くなっているとされます。

軽量化もされているため、WebP画像をWebページで利用すればページを開く速度を上げることができるのです。

WebPのデメリット

そんな便利なWebP(.webp)ですが、デメリットが存在していました。それがWebPに対応しているブラウザの少なさです。しかしこのデメリット、2021年4月現在はさほどなくなってきています。

WebPを利用できるブラウザ

Can I Useという、各種ブラウザがタグや画像などに対応しているかどうか確認できるサイトで確認したところ、2021年4月現在は主要ブラウザのほとんどがWebP(.webp)に対応していることが分かります(緑色が対応しているバージョンです)

SafariもmacOS 11 BigSur以降であればWebPに対応しているため、大きく問題はないでしょう。

WebP(.webp)にはその他の大きなデメリットは無いと言ってもいいようなものなので、JPGやPNGなどの代わりにWebPを使うことができる点は嬉しい部分かと思います。

JPGやPNGとの違い

ここまで文章で説明してきた為分かりづらいかと思いますので、WebPとJPG、PNG、GIFそれぞれの違いとはなにかを表でまとめました。

画像のファイル形式 圧縮方法 拡張子 できること
透過 アニメーション
Webp 非可逆圧縮 .webp
JPG/JPEG 非可逆圧縮 .jpeg
.jpg
.jpe
PNG 可逆圧縮 .png
GIF 可逆圧縮 .gif △※
※GIFは指定した一色のみの透過が可能

これまで、Webで表示したい画像を透過しようとした場合、PNG画像を利用する必要がありました。サイズが小さく主流のJPGでは透過画像を利用できないためです。

そのため、表示する画像をJPGとPNGで使い分けが必要となり、ファイル管理も少々大変な部分があったのですが、WebPであればそれ1つで賄うことができます。WebPはPNGよりも軽量化されているため、Webページの表示を妨げる確率も減ります。

また、アニメーションを付けた画像を表示しさせたい場合も、JPG画像などだとアニメーションに対応しているGIFへ変換する必要がありましたが、WebPはその必要がなく、アニメーションが必要なものもファイル形式を統一して管理ができます。

変換方法や保存方法

JPGからWebPへ変換/保存、PNGからWebPへ変換/保存などをしたい場合、変換ツールを利用する必要があります。変換ツールには色々ありますが、ここでは2つ紹介します。

透過させたい部分を削除するなどして保存する

なお、WebPへ変換した画像の透過をしたい場合は、WebP画像を画像編集ソフトで透過したい部分を消去するなどしてそのまま保存してみましょう。透過画像として保存することができます。

WEBP変換ツール

SyncerのWEBP変換ツールとは、特に難しい作業なくWebPへ変換したい場合に利用をおすすめする初心者向けのWebツールです。JPGやPNGからWebPに変換できる他、WebPからPNGへの変換をすることもできます。

画像ファイルをアップロード

変換したい画像を「変換前の画像」と表示されている「ファイルを選択」部分をクリック、もしくはここへドラッグアンドドロップで変換したい画像をアップロードします。

変換後の画像が表示される

変換後の画像が表示されます。変換前の画像にJPGもしくはPNGをアップロードした場合は、変換後の画像はWebPになります。また、WebPの画像を変換前の画像としてアップロードした場合、変換後の画像はPNGファイルです。

変換後の画像をクリックしてダウンロード

変換後のWebP画像などは、変換後の画像をクリックすることで保存できます。

拡張子を確認、任意の名前にして保存する

保存する画面が表示されます。ファイル形式がWebPなどに変更されているかどうか確認して、ファイル名を任意のものにして保存すれば完了です。

Squoosh

SquooshとはGoogleが開発した画像の変換/保存ができるWebツールです。前述したWEBP変換ツールより詳細に変換する画像の編集ができます。こちらもWebPから、もしくはWebPへの変換ができます。

Squoosh
変換したい画像をドラッグアンドドロップ

WebPに変換/保存したい画像をSquooshへドラッグアンドドロップでアップロードします。

変換後のサイズと圧縮率

Resize(画像のサイズの変換)ができますし、画像の圧縮後のに保存した場合の圧縮率なども表示されます。

変換前/変換後の画質

真ん中の線では元の画像の画質とWebPなどへの変換後の画質とを比較することができます。線を動かせば比較できますが、ひどく劣化するというようなことはないためそのままWebPなどに変換すれば問題ないでしょう。

変換後の拡張子を選択

なお、変換ツールであるSquooshでは、WebPの他にJPGやPNGなどの変換形式も存在しています。WebP以外の拡張子に変換したい場合にも利用できます。

画像のダウンロードボタン

WebPを保存形式に変換したら、右下に表示されているダウンロードボタンからWebPに変換した画像のダウンロードができます。

拡張子を確認、任意の名前にして保存

ファイル形式がWebPなどに変更されているかどうか確認して、ファイル名を任意のものにして保存すれば完了です。

最後に

WebPとは、JPGとPNG、GIFをあわせた画像形式で、Web上で画像を管理するには利用しやすいファイル形式です。

現状主要ブラウザでも利用できるため、Webサイトで利用する分には支障はありません。とはいえまだJPGなどより浸透してきていない分、アプリケーションなどでは対応していないものもあります(Windows10のフォトビューワもその一例)。

今後主流になってくるかもしれない画像形式ですので、WebPという画像形式があり、その特性も含めて覚えておくと良いでしょう。

Thumb拡張子「heic」の画像をPCで見る方法!jpegへの変換方法も解説!
皆さんは普段iPhoneなどで撮影した写真をパソコンに転送したときに拡張子などを気にしたこと...
ThumbBMPをJPGに変換する方法!フリーソフトやオンラインツールを紹介!
画像の拡張子であるBMP(ビットマップ)ファイルを、JPGに変換したいと考えたことがある人も...
Thumb拡張子「tif/tiff」とは?ファイルを開く方法や変換方法を解説!
画像の拡張子に「tif/tiff」があります。この「tif/tiff」とはどんな拡張子なのか...

関連するまとめ

Original
この記事のライター
八千草 蛍
分かりやすく気軽に読める記事を書いてまいりたいと思います。よろしくお願いいたします。
インステ