画像をWebPに変換するには、Squooshなどの無料のWebツールに画像を読み込んで形式に「WebP」を選ぶか、Photoshopの保存形式でWebPを選ぶか、WordPressならアップロード時に自動で変換するプラグインを使います。WebPはGoogleが開発した画像形式で、JPEGやPNGより容量を小さくでき、ページの表示を軽くできます。この記事では、ツール別の手順と、ホームページに載せるときの画質・容量の目安、変換で失敗しないための注意点を説明します。
WebPとは
WebP（ウェッピー）は、写真もイラストも1つの形式で扱える、容量の小さい画像形式です。JPEGのような非可逆圧縮と、PNGのような可逆圧縮の両方に対応し、透過やアニメーションも使えます。
JPEG・PNGとの違い
Googleの公式ページでは、可逆圧縮のWebPはPNGより約26%小さく、非可逆圧縮のWebPは同じ程度の画質のJPEGより25〜34%小さいと紹介されています。実際にどれだけ小さくなるかは画像の内容によって変わりますが、写真の多いページほど効果が出やすくなります。
| 形式 | 得意な画像 | 透過 | アニメーション | 容量の傾向 |
|---|---|---|---|---|
| JPEG | 写真 | × | × | 中 |
| PNG | ロゴ・図・スクリーンショット | ○ | ×（APNGを除く） | 大きめ |
| GIF | 簡単なアニメーション | ○（半透明は不可） | ○ | 大きめ |
| WebP | 写真・図・アニメーションのすべて | ○ | ○ | 小さめ |
いまのブラウザ対応状況
Chrome・Edge・Firefox・Safariの現行版はいずれもWebPに対応しています。Safariは、macOS Big SurとiOS 14以降の組み合わせで対応しました。古いOSのまま更新していない端末では表示できないことがあるため、閲覧者の環境が特殊なサイトでは注意が必要です。WordPressはバージョン5.8からWebPのアップロードに対応しています。
WebPにすると何が変わるか
画像の容量が減ると、ページを開いてから画像が表示されるまでの時間が短くなります。Googleがページの体験を測る指標の一つ「LCP（最大のコンテンツが表示されるまでの時間）」は、大きなメイン画像に左右されやすく、画像の軽量化は改善の基本になります。指標の詳しい見方は「Core Web Vitalsとは｜LCP・INP・CLSの基準値とSEOへの影響を解説」で解説しています。
変換方法の選び方
変換の方法は、画像の枚数と作業する場所で選びます。数枚なら無料のWebツール、デザインを作りながらならPhotoshop、WordPressに大量の画像があるならプラグインが向いています。
| 方法 | 向いている場面 | 費用 | 注意点 |
|---|---|---|---|
| 無料のWebツール（Squooshなど） | 数枚を画質を見ながら変換 | 無料 | 1枚ずつの作業になる |
| Photoshopなどの画像編集ソフト | デザイン作成の流れで書き出す | ソフトの利用料 | バージョンで対応が違う |
| WordPressプラグイン | 既存の画像をまとめて変換 | 無料版あり | サーバーの対応と容量を確認 |
無料のWebツールで変換する手順（Squoosh）
Squoosh（スクワッシュ）は、Googleのチームが公開している無料の画像圧縮ツールです。ブラウザで開くだけで使え、変換前と変換後を左右に並べて画質を比べながら設定できます。
ステップ1｜Squooshを開いて画像を読み込む
ブラウザで squoosh.app を開き、画像をドラッグ＆ドロップするか、画面をクリックしてファイルを選びます。画面の左側が元の画像、右側が変換後の画像のプレビューです。
ステップ2｜形式で「WebP」を選ぶ
右下の設定欄の「Compress」で形式を「WebP」に切り替えます。左右の境目のバーを動かすと、元の画像と変換後の画像を同じ場所で見比べられます。
ステップ3｜画質（Quality）と大きさを調整する
「Quality」の数値を下げるほど容量は小さくなり、画質は落ちます。写真ならまず75前後から始め、文字や細い線がにじまない範囲で調整します。画像の横幅が大きすぎる場合は「Resize」をオンにして、載せる大きさに合わせて縮小しておきます。
ステップ4｜ダウンロードする
画面右下に変換後の容量と、元の画像から何％減ったかが表示されます。内容を確認したら、ダウンロードボタンで保存します。
Photoshopで書き出す手順
Photoshopはバージョン23.2（2022年2月公開）からWebPに標準で対応し、プラグインなしで開く・保存することができます。それより古いバージョンでは、別途プラグインが必要でした。
ステップ1｜「別名で保存」または「コピーを保存」を開く
画像を開いたら、「ファイル」メニューから「別名で保存」または「コピーを保存」を選びます。
ステップ2｜ファイル形式で「WebP」を選ぶ
保存画面のファイル形式の一覧から「WebP」を選んで保存します。続けて表示される設定画面で、圧縮の方法（非可逆・可逆）と画質を選べます。
Photoshop以外のソフトの場合
ほかの画像編集ソフトでも、書き出しの形式にWebPを選べるものが増えています。メニューの名前や選べる設定はソフトとバージョンによって違うため、使っているソフトの公式ヘルプで最新の手順をご確認ください。
WordPressでWebPに変換する方法
WordPressでは、WebPの画像をそのままメディアライブラリにアップロードできます。すでにJPEGやPNGで大量の画像を載せている場合は、変換用のプラグインを使うとまとめて変換できます。
プラグインでまとめて変換する
代表的なものに「Converter for Media」「EWWW Image Optimizer」などがあります。多くは、元のJPEGやPNGを残したままWebP版を作り、対応しているブラウザにだけWebPを表示する仕組みです。WordPressの開発チームが関わる「Modern Image Formats」のように、アップロード時にWebPなどの形式を自動で作るプラグインもあります。機能や無料の範囲はプラグインごとに違い、変わることもあるため、導入前に公式の説明をご確認ください。
導入前に確認しておくこと
- サーバーの画像処理機能（GDやImagickなど）がWebPに対応しているか
- WebP版を追加で保存する分、サーバーの容量に余裕があるか
- キャッシュ系のプラグインやCDNと組み合わせたときに正しく表示されるか
- 作業前にサイトのバックアップを取ったか
サイト制作の観点では、本番サイトでいきなり一括変換するより、まず数枚で表示と容量を確かめてから全体に広げるほうが安全です。
WebPで表示されているか確かめる
変換できたかどうかは、ブラウザで確かめられます。Chromeなら、ページ上の画像を右クリックして「新しいタブで画像を開く」を選び、URLの末尾や表示された画像の情報で形式を見ます。プラグインによっては、URLは「.jpg」のままでも中身はWebPで配信されていることがあります。その場合は、Chromeのデベロッパーツールの「ネットワーク」タブで画像を選び、「Content-Type」が「image/webp」になっているかを見ると確実です。あわせて、ページ全体の読み込み量が変換前より減っているかも確認しておくと、効果が数字で分かります。
ホームページに載せるときの画質と容量の目安
画像は「表示される大きさに合わせて縮小する」ことと「WebPで圧縮する」ことの両方をして、はじめて十分に軽くなります。形式だけ変えても、横幅4,000pxの写真をそのまま載せていては重いままです。
用途別の目安
| 用途 | 横幅の目安 | 画質の目安 | 容量の目安 |
|---|---|---|---|
| トップのメイン画像 | 1,920〜2,400px | 70〜80 | 200〜400KB |
| 記事の本文画像 | 1,200〜1,600px | 70〜80 | 100〜200KB |
| サムネイル・一覧画像 | 600〜800px | 70前後 | 30〜80KB |
| ロゴ・アイコン | 表示サイズの2倍 | 可逆またはSVG | 数KB〜数十KB |
数値は制作の現場でよく使う目安で、決まりではありません。高精細な画面で見られることを考え、表示サイズの1.5〜2倍の横幅で用意しておくと、きれいさと軽さのバランスが取りやすくなります。
文字が入った画像は画質を上げる
バナーや図解など、文字や細い線が入った画像は、画質を下げると文字の周りがにじみやすくなります。写真より画質の数値を高めにするか、可逆圧縮を選びます。ロゴのような単純な図形は、WebPよりSVGのほうが小さくきれいに表示できることもあります。
変換でよくある失敗と注意点
WebPへの変換で起こりやすいのは、画質の下げすぎ、透過の消失、取引先や印刷へのデータの使い回しです。変換前に元の画像を必ず残しておけば、どれも取り返せます。
画質を下げすぎてざらつく
容量を気にして画質の数値を下げすぎると、空や肌などのなめらかな部分にブロック状のノイズが出ます。スマートフォンで見て気にならなくても、パソコンの大きな画面では目立つことがあります。変換後は実際のページで、パソコンとスマートフォンの両方で確認しましょう。
透過していた背景が白や黒になる
PNGの透過画像を、透過を保たない設定で変換すると、背景が白や黒で塗りつぶされます。ロゴやアイコンを変換するときは、透過を保持する設定になっているか確かめます。
元のファイルを上書きしてしまう
WebPに変換したあとで元の画像を消すと、印刷物や別の媒体で使いたいときに困ります。WebPは、Officeソフトや一部の画像ビューアー、SNSの投稿などで扱えないことがあります。元の画像は別のフォルダに保管し、Web用に変換したものと分けて管理します。
表示されない・ダウンロードされる
サーバーの設定によっては、WebPのファイルが画像として扱われず、表示されなかったり開くとダウンロードが始まったりすることがあります。プラグインで変換した画像が出ないときは、プラグインの設定画面にある動作確認の項目や、サーバーのMIMEタイプの設定を確認します。
よくある質問
Q. WebPに変換するとSEOに効果がありますか？
A. 形式そのものが検索順位を上げるわけではありません。画像が軽くなることでページの表示が速くなり、使いやすさが上がる点で間接的に役立ちます。GoogleはWebPを画像検索でも扱える形式として案内しています。
Q. JPEGとWebPを両方用意する必要はありますか？
A. 現行のブラウザはWebPに対応しているため、通常はWebPだけで問題ありません。古い端末からの閲覧が多いサイトでは、プラグインや picture 要素で、WebPに対応していないブラウザにJPEGを出し分ける方法があります。
Q. AVIFとはどう違いますか？
A. AVIFもWebPと同じく容量の小さい新しい画像形式で、WebPよりさらに小さくなる場合があります。一方で変換に時間がかかる、対応していない編集ソフトがあるといった面もあります。扱いやすさを重視するならWebPが無難です。
Q. スマートフォンで撮った写真もWebPにできますか？
A. できます。iPhoneの写真はHEICという形式で保存されていることが多いので、Squooshなどで読み込めない場合は、一度JPEGで書き出してから変換します。
Q. 変換した画像の画質は元に戻せますか？
A. 非可逆圧縮で失われた情報は戻せません。画質を変えて作り直す場合は、元のJPEGやPNGからもう一度変換します。
THREE D PLUS は大阪の Web 制作会社です。ホームページ制作から公開後の運用・改善までまとめてご相談いただけます。お問い合わせはこちら。
