画像形式は、最新のものや容量が一番小さいものを選べばよいわけではありません。背景の透過が必要か、写真か色面の多いイラストや図版か、再編集するか、どこへ公開するかを先に考えます。
同じ画像をPNG、JPEG、WebPで保存すると、ピクセルデータの圧縮・保存方法や、失われる情報の範囲が変わります。拡張子の名前を変えるだけではなく再エンコードする処理なので、出力結果を目で確認する必要があります。
三つの形式の違いを整理する
PNGは可逆圧縮と背景の透過に対応し、ロゴ、アイコン、UIのキャプチャ、細い文字に向いています。JPEGは透過に対応しませんが、色の変化が多い写真を実用的な容量にしやすい形式です。WebPは非可逆・可逆の両方と透過に対応し、Web向けに幅広く使えます。このツールにはWebPの非可逆・可逆を個別に選ぶ項目はなく、実際のエンコード方式はブラウザが決定します。
現在のPolishTools画像リサイズ・切り抜きツールは、GIFとアニメーションPNG・WebPに対応していません。
| 形式 | 透過 | 主な用途 | 注意点 |
|---|---|---|---|
| PNG | 対応 | ロゴ、アイコン、細い文字、UIキャプチャ | 写真では容量が大きくなりやすい |
| JPEG | 非対応 | 色や質感が複雑な写真 | 低品質ではブロックやにじみが出る |
| WebP | 対応 | Web用写真、透過画像 | 後工程で使うソフトとの互換性を確認する |
写真ではJPEGとWebPを比べる
写真をPNGにすると非可逆圧縮による劣化は避けられますが、Web用途には大きすぎるファイルになりがちです。公開用の写真では、近い画質のJPEGとWebPを書き出し、細部と容量を比較します。
空の滑らかなグラデーション、髪の毛、木の葉、小さな文字の周囲は圧縮による乱れが見つかりやすい部分です。容量の数字だけでなく、実際の表示サイズと100%表示の両方で確認してください。
透過とくっきりした輪郭にはPNGが向いている
背景が透明なロゴや、境界がはっきりしたスクリーンショットはPNGが扱いやすい画像です。JPEGにすると透過を保持できず、小さな文字や単色の境界ににじみが出る場合があります。
WebPも透過に対応し、容量を減らせることがあります。ただし、非可逆圧縮したファイルを繰り返し変換せず、保存用のPNGやベクター原稿から最終WebPを作る方が、劣化を抑えやすくなります。
品質の数字は形式やブラウザをまたいで比較できない
JPEGの品質80とWebPの品質80は、同じ画質を意味しません。品質値は各エンコーダーへ渡す相対的な調整値であり、適切な値も画像ごとに異なります。
ブラウザごとのエンコーダー実装により、同じファイルと設定でも容量や細部に差が出る場合があります。「200KB以下」のような厳しい条件があるなら、実際に使うブラウザで書き出し、最終ファイルを確認してください。
- 元画像を目的のピクセルサイズへ先に縮小する
- JPEGとWebPを一つずつ書き出す
- 実際の表示サイズと100%表示で比較する
- 見て分かる劣化がない範囲で小さい方を使う
再エンコードとメタデータ削除を考慮する
ツールからの書き出しは新しいファイルの生成です。JPEGを再びJPEGで保存しても単純なコピーではなく、非可逆圧縮の劣化が重なる場合があります。別サイズが必要になったら、圧縮済みの出力ではなく、できるだけ品質の高い元画像から作り直します。
キャンバスを使った書き出しでは、EXIFの撮影情報、位置情報、向き、一部のカラープロファイルなどが削除される場合があります。公開用には都合がよい一方、撮影記録、保存品質、印刷用の色管理が必要なら元ファイルを残してください。
例:ブログのカバー写真の形式を選ぶ
2400×1600のJPEG写真を1200×800へ縮小し、容量と写真の細部を比べてカバー画像を作ります。
手順
- PolishToolsの画像リサイズ・切り抜きツールで写真を開き、比率を固定して1200×800に設定します。
- JPEGで一度書き出し、ファイル容量と木の葉や髪の毛の境界を確認します。
- 同じサイズをWebPでも書き出し、同じ部分を確認します。
- 記事カードで使う表示サイズと100%表示で二つを比べます。
- 投稿システムが対応する形式のうち、目立つ劣化がなく容量の小さい結果を選びます。
結果
品質値の数字ではなく、実際の出力を見て形式を選べます。書き出しでは撮影メタデータが削除される場合があるため、元ファイルは残してください。
よくある質問
WebPは必ずJPEGより小さくなりますか?
必ずではありません。画像の内容、サイズ、品質設定、ブラウザのエンコーダーで結果が変わります。差が重要なら同じ大きさで両方を書き出して比較してください。
ロゴをJPEGで保存してもよいですか?
透過が不要で、わずかなにじみが問題にならなければ使えますが、通常はPNGやSVGが適しています。特に小さな文字と単色の境界ではJPEGの劣化が目立ちます。
拡張子を.pngから.webpへ変えれば変換できますか?
できません。ファイル名だけが変わり、内部の形式はそのままです。画像をデコードしてWebPとして再エンコードする必要があります。