2022年 WebPとは?対応ブラウザや変換フリーソフトを解説

画像:WebPとは?pngやjpgからの変換方法や対応ブラウザまで解説

WebP(読み方はウェッピー)とは、Googleが開発した次世代画像フォーマット。Web上で使われるPNGやJPEG、GIFなどを更に軽量化し、表示速度の高速化を実現しています。

これまで使える環境が限られていたWebP(ウェッピー)ですが、2022年現在では対応ブラウザの問題もありません。変換ツールも沢山あります。

更にPhotoshopもネイティブサポートされ、WebP画像を使う場面は増えていくと考えられます。実際に「webp jpg」「webp png」などで検索される事も増えています。

そこで今回はWebPのメリットやPNG、JPEGからWebPへ一括変換出来るフリーソフト/オンラインツールなどを紹介します。

WebPとは?

WebP(ウェッピー)とは
WebP(読み方はウェッピー)とは、Googleが開発した次世代画像フォーマット。ファイルの拡張子は「webp」。Web上でよく使われるPNGやJPG、GIFなどを更に軽量化し、見た目の美しさを損なう事なく表示速度の高速化を実現しています。

実はWebPとは特に新しい技術という訳では無く、2010年からすでにGoogleによって提供されていました。ウェブサイトのトラフィック量軽減と表示速度の高速化を目的としています。

つまりGoogle側だけでなく、SEO効果を期待するウェブサイトやブログ運営者にもメリットのある画像ファイル形式です。

「Squoosh」という変換ツールも提供されています。「色がおかしい」「色が変わる」といったネガティブな意見もありますが、この変換ツールで表示確認しながら適切に圧縮変換すれば大丈夫です。

WebPの特長 – 圧縮と軽量化

WebPは、アニメーションを含む非可逆および可逆画像圧縮の両方をサポートしています。

WebPの可逆画像はPNGと比較してサイズが26%小さく、WebPの非可逆画像はJPG画像よりも25〜34%小さくなります。

つまり、WebP画像「.webp」はPNGやJPGの良いとこ取り。

WebPは通常、画質を損なうことなく圧縮出来るだけでなく、透過画像(アルファチャンネル)にも対応しています。

画像形式 WebP JPEG PNG GIF
拡張子 .webp .jpg .png .gif
圧縮方法 非可逆圧縮/可逆圧縮 非可逆圧縮 可逆圧縮 可逆圧縮
透過 × ×
アニメーション × ×

可逆圧縮とは

圧縮前のデータと、圧縮・展開後のデータが完全に等しい情報量を保ったままになるデータ圧縮方法のこと。ロスレス圧縮とも。

画像形式:PNG、GIFなど。

非可逆圧縮とは

人の感覚では分からない程度に情報を減らし圧縮する事で劣化を目立たなくする方法。圧縮の際に一部のデータが欠落する為、圧縮率が高いと劣化も大きい。

画像形式:JPGなど。

WebP形式のメリット2つ

WebP画像形式「.webp」で統一出来る

WebPは、JPEG・PNG・GIFの特性を併せ持っています。ファイルの拡張子を「.webp」で揃えておけば、Webサイトで読み込ませる画像ファイルの記述や管理が楽になります。

画像ファイルのデータ容量を軽量化

Webで使用される他の画像形式に対する主な利点は、ファイルサイズがはるかに小さい事。

ファイルサイズを軽量化してウェブサイトの表示速度を改善する事は、SEO対策としてメリットがあるのはご存じだと思います。

実際にPageSpeed Insightsでは「画像を効率的にエンコードする」事が推奨事項であり、その為に次世代フォーマットのWebP形式での画像提供を推奨しています。

Core Web Vitals(コア ウェブ バイタル)も検索ランキング要因になりました。画像は、コアウェブバイタルの最大の影響要因の1つです。重要度が高いと言えますね。

PageSpeed Insights

画像を効率的にエンコードするとは?

画像を効率的にエンコードするということは、画像を最適化して、品質に大きな影響を与えることなくファイルサイズを縮小することを意味します。 

JPG画像とWebP画像の比較

JPGとWebPを同じ圧縮率で書き出しました。WebPはJPGから変換したものです。

圧縮結果は画像によって多少は異なるかも知れませんが、圧縮率100でさえこれだけ軽量になりました。

見た目も遜色ないですよね?

ただし、この様に結果が良くても使える環境が無ければ意味がありませんよね。そこで現在の対応ブラウザやWebP画像の作成方法を解説していきます。

2022年 WebPの対応ブラウザ

画像:Can I USEのWebPフォーマットで各ブラウザ対応状況
CAN I USE WebPフォーマットのブラウザ対応状況

主要なブラウザではすでに実装されており、MACのSafariもmacOS 11 Big Sur以降であればWebPに対応しています。

IEもブラウザのサポート自体が終了していますので問題ありません。

全体ではおよそ93%がWebPをサポートするブラウザを使用しています。非対応ブラウザに対しては、HTML側でJPGやPNGを出し分けすれば大丈夫です。

HTML5での書き方

WebP画像はJPGやPNGと同じようにコーディングでもimgタグで読み込ませる事が出来ます。

もし対応ブラウザに不安があるなら、以下の様にpictureタグ内でsourceタグとimgタグを組み合わせた画像の出し分けをすれば大丈夫。この記述はレスポンシブ画像でもお馴染みだと思います。

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Site Logo">
</picture>

PhotoshopでWebP画像が使える!

Photoshop23.2に伴い、PhotoshopでWebPファイル形式が完全にサポートされました。これでWebP画像の編集も保存も行えます。

以前はプラグインが必要で、保存はおろか開く事も出来ませんでした。最新のPhotoshopではプラグイン不要でWebP画像を扱えます。

この様な背景もあり、今後さらにWebP形式を使う場面が増えていくと予想されます。

PhotoshopでWebPの保存方法

画像:ファイルの種類でWebPを選択する。

手順としては、まずJPGやPNGファイルを開き、メニューから【ファイル】→【コピーを保存】をします。

※【別名で保存】ではなく【コピーを保存】をしておけば元画像がそのまま残るので、やり直しも簡単です。

次に【ファイルの種類】のプルダウンから【WebP】を選択し保存します。

※ポップアップ画面下のカラー:ICCプロファイルが不要ならチェックを外す事で更に軽量化出来ます。

画像:Webp形式で保存するタイミングでオプションが選べる。

WebPオプションのポップアップが出ますので、お好みの書き出しをしてください。この辺の設定はJPG(劣化)やPNG(劣化なし)と同じですね。

書き出し前に、どれくらい軽量化されるのか確認出来ないのは不便かもしれません。

WebP画像に変換できるフリーソフト/オンラインツール

Photoshopだけでなく、WordPressではプラグインを使う事で簡単にWebP形式へ変換出来ますが、現在ではフリーソフトやオンラインツールも沢山あります。

個人的にはGoogleが提供する「Squoosh」がおすすめです。

Squoosh

画像:Googleが提供する画像圧縮アプリ。リサイズなど詳細設定も可能。
Googleが提供する変換・圧縮ツール「Squoosh」

「Squoosh」はGoogleが提供するフリーソフトとオンラインツールです。

ブラウザ上で利用する事も出来ますし、右上の【インストール】ボタンを押すと、デスクトップにショートカットが作られます。

デスクトップ、ブラウザ共に、画像の変換だけでなく圧縮やリサイズなども出来てしまいます。

画像:Googleが提供するsquooshの詳細画面。
Googleが提供するSquooshの詳細画面

変換前の画像とWebP形式へ変換後を比較しながら設定し、それぞれの圧縮データ容量を確認して画像を保存する事も出来ます。

リサイズや圧縮率以外の設定も可能で高機能過ぎますね。

他にも、便利なオンラインツールが沢山ありますので、別記事にて改めて紹介いたしますね。

Googleが提供する変換・圧縮ツール:Squoosh

CDKM

画像:WebPからJPGやPNGに変換できるオンラインツール。CDKM。
CDKM:WebPからJPGやPNGに変換できるオンラインツール

こちらはインストール不要のオンラインサービスです。とても高機能で、WebP画像ファイルからJPGやPNG、GIFに変換する事も出来ます。PNGであれば透過も維持されています。

PNGと書いてますが、勿論それ以外のファイル形式も対応しています。

【ファイルを選択】から元画像(JPGやPNG、GIFなど)を選び、【目標】からWebPを選択。オプションで画質や画像サイズも入力出来ます。

【変換開始】を押せば、画面下に出力ファイルとして、変換後のファイルサイズとダウンロードボタンが表示されます。

無料でWEBPをJPGやPNGに変換:CDKM

Convertio

画像:WebPからPNGに変換できるオンラインツール。Convertio。
Convertio:WebPからPNGに変換できるオンラインツール

WebPからPNGへと書いてありますが、逆にからWebPへ変換も出来ますし、他のフォーマットにも対応しています。

プルダウンした中から対応フォーマットを選べますが、数が多いのでプルダウン内から検索した方が早いです。

アップした画像データも24時間保存されますので、気になる方は注意です。

無料でWEBPをPNGに変換:Convertio

ワードプレスでWebP形式へ変換出来るプラグイン

ワードプレスですでに使用しているJPGやPNG、GIFなども一括変換するならプラグインが便利です。

無料版でもWebPに変換できるものだけ紹介します。一定の制限はあるものの、計画的に利用するなら問題なく使えると思います。

基本的に元画像は残るので、元に戻したい時も安心です。

Imagify – Optimize Images & Convert WebP

画像のサイズ変更と圧縮が出来る画像最適化プラグイン。一括最適化オプションがあるので画像を一度に最適化できます。

画像のWebPバージョンを作成する」オプションが有効になっている場合、最適化された画像のWebPバージョンが自動的に作成されます。

毎月20MBの画像(約200枚)を無料で最適化できます。

ShortPixel Image Optimizer

JPG、PNG、GIFおよびPDFドキュメントを圧縮します。

もちろんJPEG、PNG、またはGIF(アニメーション化されたものも含む)をWebPAVIFに変換出来ます。

このプラグインも、一括またはひとつずつ変換する事が出来ます。

毎月100枚まで無料で最適化できます。

WebP Converter for Media – Convert WebP and AVIF & Optimize Images

JPEG、PNG、およびGIF形式のファイルをWebPまでなら無料版で対応しています。(AVIFはPro版が必要)

ブラウザが画像を読み込むと、プラグインはWebP形式に対応しているかを確認します。対応していればWebP形式の画像が読み込まれる仕組みです。

まとめ

ウェブサイトにおけるデータ容量の大部分を占めるのは画像ですし、Googleはトラフィックの軽減を推奨しています。

もちろん、SEO対策だけでなくユーザーにとっても利便性があります。

対応ブラウザにも問題はありませんし、そろそろWebP画像を積極的に使って見てはどうでしょうか?

この記事が参考になれば嬉しいです。

画像:ウェブで使う画像ファイル形式はどれがいい?特徴と使い分け方

ウェブで使う画像ファイル形式の種類と使い分けを解説