WebP（読み方はウェッピー）とは、Googleが開発した次世代画像フォーマット。Web上で使われるPNGやJPEG、GIFなどを更に軽量化し、表示速度の高速化を実現しています。
これまで使える環境が限られていたWebP（ウェッピー）ですが、2023年現在では対応ブラウザの問題もありません。WebPへの変換ツールも沢山あります。
すでにPhotoshopでもネイティブサポートされており、実際にWebP画像を使うサイトは増えています。
そこで今回はWebPのメリットや、PNG・JPEGからWebPへ変換出来るフリーソフト/オンラインツールなどを紹介します。
この記事の目次
WebPとは？
- WebP（ウェッピー）とは
- WebP（読み方はウェッピー）とは、Googleが開発した次世代画像フォーマット。ファイルの拡張子は「webp」。Web上でよく使われるPNGやJPG、GIFなどを更に軽量化し、見た目の美しさを損なう事なく表示速度の高速化を実現しています。
実はWebPとは特に新しい技術という訳では無く、2010年からすでにGoogleによって提供されていました。ウェブサイトのトラフィック量軽減と表示速度の高速化を目的としています。
つまりGoogle側だけでなく、SEO効果を期待するウェブサイトやブログ運営者にもメリットのある画像ファイル形式です。
「Squoosh」という変換ツールも提供されています。昔は一部のブラウザで「色がおかしい」「色が変わる」といったネガティブな意見もありましたが、この変換ツールで表示確認しながら適切に圧縮変換すれば大丈夫です。
2023年 WebPの対応ブラウザ
気になるWebPの対応ブラウザですが、主要ブラウザではすでに実装されています。使えなければ意味ないですからね。
MACのSafariもmacOS 11 Big Sur以降であればWebPに対応しています。IEもブラウザのサポート自体が終了していますので問題ありません。
つまり、非対応ブラウザの方が圧倒的に少数派。全体ではおよそ93％がWebPをサポートするブラウザを使用しています。
非対応ブラウザに対しては、HTML側でJPGやPNGを出し分けすれば大丈夫です。
WebPの特長 – 圧縮と軽量化
WebPは、アニメーションを含む非可逆および可逆画像圧縮の両方をサポートしています。
WebPの可逆画像はPNGと比較してサイズが26％小さく、WebPの非可逆画像はJPG画像よりも25〜34％小さくなります。
また、通常、画質を劣化させずにJPEGとJPEG 2,000より30%高い圧縮率を達成しています。
つまり、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つです。重要度が高いと言えますね。
画像を効率的にエンコードするとは？
画像を効率的にエンコードするということは、画像を最適化して、品質に大きな影響を与えることなくファイルサイズを縮小することを意味します。
JPG画像とWebP画像の比較
Googleが提供しているオンラインツールのSquooshでJPGとWebPを同じ圧縮率で書き出しました。WebPは元のJPGから変換したものです。
圧縮結果は画像によって多少は異なるかも知れませんが、圧縮率100でこれだけ軽量になりました。
見た目も遜色ないですよね？
先にお伝えした様に主要なブラウザは対応済ですが、参考までにWebP画像のHTMLファイルでの読み込ませ方も紹介します。
HTML5での書き方
WebP画像はJPGやPNGと同じようにコーディングでもimgタグで読み込ませる事が出来ます。
もし対応ブラウザに不安があるなら、以下の様にpictureタグ内でsourceタグとimgタグを組み合わせた画像の出し分けをすれば大丈夫。この記述はレスポンシブ画像でもお馴染みだと思います。
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="Site Logo">
</picture>WebP形式の画像ファイルを書き出すにはPhotoshopを使えば済みますが、アプリを持っていなくても、既存のjpegやpngファイルをWebP形式へ変換出来るウェブサービスがあるので紹介します。
WebPに変換できるフリーソフトやオンラインツール
Photoshopだけでなく、WordPressではプラグインを使う事で簡単にWebP形式へ変換出来ます。
ですが現在ではフリーソフトやオンラインツールも沢山あり便利です。
個人的には本家Googleが提供する「Squoosh」がダントツに高機能でおすすめ。様々なファイルフォーマットにも対応しています。
もちろん、WebPからjpegやpngに変換する事も可能です。
Squoosh
「Squoosh」はGoogleが提供するフリーソフトとオンラインツールです。
ブラウザ上で利用する事も出来ますし、右上の【インストール】ボタンを押すと、デスクトップにショートカットが作られます。
デスクトップ、ブラウザ共に、画像の変換だけでなく圧縮やリサイズなども出来てしまいます。
変換前の画像とWebP形式へ変換後を比較しながら設定し、それぞれの圧縮データ容量を確認して画像を保存する事も出来ます。
リサイズや圧縮率以外の設定も可能で高機能過ぎますね。
他にも、便利なオンラインツールが沢山ありますので、別記事にて改めて紹介いたしますね。
Googleが提供する変換・圧縮ツール：Squoosh
CDKM
こちらはインストール不要のオンラインサービスです。とても高機能で、WebP画像ファイルからJPGやPNG、GIFに変換する事も出来ます。PNGであれば透過も維持されています。
PNGと書いてますが、勿論それ以外のファイル形式も対応しています。
【ファイルを選択】から元画像（JPGやPNG、GIFなど）を選び、【目標】からWebPを選択。オプションで画質や画像サイズも入力出来ます。
【変換開始】を押せば、画面下に出力ファイルとして、変換後のファイルサイズとダウンロードボタンが表示されます。
無料でWEBPをJPGやPNGに変換：CDKM
Convertio
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（アニメーション化されたものも含む）をWebPやAVIFに変換出来ます。
このプラグインも、一括またはひとつずつ変換する事が出来ます。
毎月100枚まで無料で最適化できます。
WebP Converter for Media – Convert WebP and AVIF & Optimize Images
JPEG、PNG、およびGIF形式のファイルをWebPまでなら無料版で対応しています。（AVIFはPro版が必要）
ブラウザが画像を読み込むと、プラグインはWebP形式に対応しているかを確認します。対応していればWebP形式の画像が読み込まれる仕組みです。
PhotoshopでWebP画像が使える！
Photoshop23.2に伴い、PhotoshopでWebPファイル形式が完全にサポートされました。これでWebP画像の編集も保存も行えます。
以前はプラグインが必要で、保存はおろか開く事も出来ませんでした。最新のPhotoshopではプラグイン不要でWebP画像を扱えます。
この様な背景もあり、今後さらにWebP形式を使う場面が増えていくと予想されます。
PhotoshopでWebPの保存方法
手順としては、まずJPGやPNGファイルを開き、メニューから【ファイル】→【コピーを保存】をします。
※【別名で保存】ではなく【コピーを保存】をしておけば元画像がそのまま残るので、やり直しも簡単です。
次に【ファイルの種類】のプルダウンから【WebP】を選択し保存します。
※ポップアップ画面下のカラー：ICCプロファイルが不要ならチェックを外す事で更に軽量化出来ます。
WebPオプションのポップアップが出ますので、お好みの書き出しをしてください。この辺の設定はJPG（劣化）やPNG（劣化なし）と同じです。
書き出し前に、どれくらい軽量化されるのか確認出来ないのは不便ですよね。
まとめ
ウェブサイトにおけるデータ容量の大部分を占めるのは画像ですし、Googleはトラフィックの軽減を推奨しています。
もちろん、SEO対策だけでなくユーザーにとっても利便性があります。
対応ブラウザにも問題はありませんし、そろそろWebP画像を積極的に使って見てはどうでしょうか？
この記事が参考になれば嬉しいです。
note
