webp（ウェッピー）って何？変換方法やJPG・PNGとの違いも徹底解説！

Webサイトで利用される画像の形式は、今まではJPGやJPEG、PNG、GIFが主流でした。

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

WebP(ウェッピー)とは、Googleが次世代画像フォーマットとして2010年に仕様を公開した画像形式です。画質をある程度保ったまま高圧縮でき、高速表示が可能な画像形式であることから、Webサイトを作成するときにはWebP形式の画像を利用することが推奨されています。

JPGはJPEGと全く同じ画像形式で拡張子が違うだけです。JPEGとは「Joint Photographic Experts Group」を略したことばです。JPG・JPEGは1,677万色のフルカラーで表現できるのにデータ量が比較的軽いために、写真を保存する時のファイル形式としてよく利用されています。

ただし、画像の一部の透過処理はできません。背景が白いJPG・JPEGの画像を他の画像の上に載せても、JPG・JPEG画像の白い部分に下の画像を映すことはできません。

また、WebPもフルカラーの表現が可能です。同程度の画質の画像でデータ量を比べると、WebPのほうがデータ量が小さく表示速度が高速化します。WebサイトにはJPG・JPEGよりもWebPを利用したほうがいいでしょう。

PNGとは「Portable Network Graphics」を略したことばです。JPG・JPEGとの違いは背景透過が可能な点です。PNG画像は白い部分が透過するので、下に重ねた別の画像を背景として映し出すことができます。また、圧縮しても元に戻す事ができるので、何度も保存しても画像が劣化しません。

WebPとの違いはPNGはデータ容量が大きい点にあります。同じ画質の画像なら、2割から3割程度、PNGよりもWebPのほうがデータ量が小さくなります。WebPは透過もできる上にデータ量が少ないので、Webサイトの作成にはPNGよりもWebPのほうがおすすめです。

GIFとは「Graphics Interchange Format」を略したことばです。GIFはアニメーションを作るのに適したファイル形式です。ただし、最大256色しか使えません。また、他の画像形式と比べると画像が荒くなる傾向にあります。

WebPもアニメーションに対応しているので、今後のアニメーション画像はGIFではなくWebPが主流になっていくでしょう。

WebPのメリットは画質を落とすことなくファイルサイズを軽量化できます。同程度の画質の画像で比較した場合、JPGやPNGよりも最低でも25%程度WebPの画像のほうがサイズが軽量化します。

現在、SEO対策のポイントの一つがサイトの表示速度です。Googleはユーザーがリンクをクリックしてからページを読み込むまでにかかった時間を計測していて、より高速で読み込めるページにユーザビリティの高いサイトとして高評価を与えています。

ページに貼った画像ファイルのサイズは小さければ小さいほど表示速度は高速化します。画像の質を落とさずにページの表示速度を高速化したい場合には、JPGやPNGを使うよりもファイルサイズの軽いWebPを使ったほうがいいでしょう。WebPの利用はSEO対策としてもメリットが大きいのです。

WebPは、従来の画像形式であるJPG・JPEG、PNG、GIFのそれぞれが持つメリットにも対応しているという特徴があります。

JPG・JPEGのフルカラー対応、PNGの背景透過、GIFのアニメーションもWebP一つですべて対応しています。

WebPで背景透過やアニメーションにすると、単なる画像だけのWebPよりもファイルサイズは大きくなってしまいます。しかし、PNGやGIFを扱っていたときと比較するとファイル容量は小さくてすみます。

ファイル容量の大きいPNGやGIFの扱いに四苦八苦してきたWeb開発者は、WebPを導入することでサイトの容量を削減できる可能性が高いでしょう。

WebPを使うメリットには、背景透過が可能であるという点もあります。PNGと同じように背景透過ができる上に、ファイルサイズはPNGと比較すると小さくできます。

WebPを背景透過にするときには、補助データであるアルファチャンネルを扱う必要があります。アルファチャンネルを追加することで、従来のWebP画像よりも透過画像のファイルサイズは大きくなってしまいます。しかし、それでも同じ画質のPNGよりもファイルサイズは軽くなります。

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

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

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

WebサイトにJavaScriptを使う場合には、WebPは使用しない法が良いでしょう。その理由は、JavaScriptではWebPの使用判定が出ないことがあるためです。

どうしてもJavaScriptを使ったWebサイトやWebアプリケーションにWebPの画像を使いたい場合には、imageタグにWebPを直接埋め込めば利用できます。しかし、imageタグを使う方法では工数がかかりすぎるので、JavaScriptを利用する場合にはWebPは使わないほうがいいでしょう。

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

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

しかし、IEが提供されていたWindowsではWindows10ではEdgeが標準ブラウザとなり、IEもサポートの終了によってユーザーは激減しています。また、iOS14からはSafariでもWebPに対応しています。

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

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

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

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

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

なお、2022年2月にリリースされたPhotoshop23.2以降はPhotoshopが完全にWebPをサポートしました。プラグインを使わなくてもPhotoshopだけでWebPを開いたりWebP形式で保存したり、編集したり出来ます。

Photoshop23.2以前のバージョンはWebPShopのプラグインが必要です。

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

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

WebサイトをWordPressで作成している場合には、WordPressのプラグインを使う方法もあります。WordPressのプラグインにはサイトに利用したい画像をWebPに変換できるものが複数あります。

その中でも特におすすめなプラグインは「WebP Converter for Media」です。

このプラグインは、Webサイトを閲覧しているユーザーが使っているブラウザを自動で判別して、WebP対応ブラウザであればWebPで表示、WebPに対応していないブラウザであれば表示できる形式で画像を表示してくれます。

すでにWordPressで使っている画像も一括で変換してくれます。WebPに変換した画像は、元の画像とは別のディレクトリに保存されるので、すでにアップした画像はそのまま残ります。WordPressの画像の変換に困っているようであれば、WebP Converter for Mediaをすぐにインストールしましょう。

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

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