WebPへの変換は、無料のWebツールで数十秒で終わります。インストールも登録も要りません。使い分けはこの表のとおりです。
| やりたいこと | 使うもの |
|---|---|
| 1〜数枚をていねいに仕上げる | Squoosh——画質を見比べながら決められる |
| 何十枚もまとめて変換する | Bulk Resize Photos——日本語UIで枚数制限なし |
| Windowsで手早く1枚だけ | ペイント——標準アプリのまま保存できる |
| WordPressに載せる画像 | プラグイン——アップロードするだけで自動変換 |
Squoosh——1枚をていねいに変換する
Googleが公開している画像変換ツールです。元画像と変換後を左右に並べて見比べられるのが最大の特長で、「どこまで画質を落としても平気か」を目で確かめながらWebPにできます。画像はパソコンの中だけで処理され、どこにもアップロードされません。
手順は4つです。
- 画像をページにドラッグ＆ドロップする
- 右側のCompressのメニューでWebPを選ぶ
- Quality（画質）を動かし、左右を見比べて決める（75前後が目安）
- 右下の青いダウンロードボタンで保存する
Bulk Resize Photos——何十枚でもまとめて変換する
まとめて変換したいときは断然こちらです。日本語のUIで枚数の制限がなく、変換もパソコンの中で完結します（アップロードしないぶん速い）。登録も不要です。
- 「画像を選択します」で、変換したい画像をまとめて選ぶ
- 「画像フォーマット」でWEBPを選ぶ
- 大きさを変えないなら「パーセンテージ」を100にする（縮小もしたいならここで％を下げる）
- 「画質」は75前後のまま「開始」を押す——ZIPがダウンロードされる
名前は「リサイズ」ツールですが、縮小と形式変換を一度に済ませられるのがこのツールの強みです。ファイル名は元のまま拡張子だけが.webpに変わるので、あとの書き換えも迷いません。
標準アプリでも変換できる？（Windows・Mac）
パソコンにもとから入っているソフトで済むなら、それがいちばん手軽です。対応はこう分かれます。
| ソフト | WebPで保存 |
|---|---|
| Windows 11のペイント | できる——「名前を付けて保存」でファイルの種類にWebPを選ぶ |
| Macのプレビュー | できない——WebPは開けるが、WebPとして書き出せない |
| Photoshop | できる——2022年以降のバージョンで標準対応 |
| GIMP（無料ソフト） | できる——「名前を付けてエクスポート」で.webpを指定 |
Macだけ標準アプリで変換できないので、上で紹介したWebツールを使うのが手っとり早いです。
変換したあとに忘れずやること
HTMLのsrcを書き換える
拡張子が変わるので、読みこんでいる側も直します。ここを忘れると画像が表示されなくなります。
<img src="images/photo.jpg" alt="しまちゃんの写真"> <!-- 変換前 -->
<img src="images/photo.webp" alt="しまちゃんの写真"> <!-- 変換後はこう -->CSSでbackground-imageに指定している画像も同じです。変換したファイル名を検索して、まとめて置きかえるのが確実です。
元の画像は残しておく
WebPの標準設定は情報を間引く非可逆圧縮なので、変換をくり返すたびに画質が落ちます。元のJPG・PNGは別フォルダに残し、公開用のコピーだけをWebPにする流れにしておくと安心です。
代替画像（フォールバック）はもう不要
「WebPに対応していないブラウザ用にJPGも用意する」という解説を見かけますが、いまは主要ブラウザがすべてWebPに対応しています。picture要素で2枚用意する手間は、個人サイトならかけなくて大丈夫です。
WordPressなら自動化できる
WordPressには、アップロードした画像を自動でWebPに変換してくれるプラグインがあります（EWWW Image Optimizerなどが定番）。すでにメディアライブラリにある画像もまとめて変換できるので、記事数が多いサイトほど効果が大きく出ます。
べんりワザWordPressの表示を速くする（効果が大きい順）WordPressが重いときに効く対策を、効果の大きい順に並べました変換だけで満足しない——縮小もセットで
WebPにしても、幅4000pxのスマホ写真はやはり重いままです。表示する幅の2倍くらいまで縮めてから変換すると、ファイルサイズは一気に落ちます。
べんりワザ画像を軽くしてページを速くする縮小と圧縮のやり方、目指すファイルサイズの目安はこちらまとめ
- 1枚ならSquoosh、まとめてならBulk Resize Photos——どちらも無料・登録なし・アップロードなし
- 画質は75前後から。透過イラストはLossless（可逆）も試して軽いほうを選ぶ
- 変換したらsrcの書き換えと元画像の保管をセットで