非可逆WebP vs 可逆WebP：どちらを選ぶべきか？
写真、グラフィック、透明画像に適したWebPモードと設定を選びましょう。
WebPに変換はじめに
2つのWebPファイルは同じように見えても、サイズが大きく異なることがあります。その違いは、非可逆圧縮か可逆圧縮かという1つの選択に起因することがよくあります。
WebPに変換する理由はファイルサイズを小さくするためですが、間違ったモードや設定を選ぶと、品質が低下したり、サイズが改善されなかったりします。WebPとは何かを理解することが最初のステップで、適切な圧縮モードを選ぶことが次のステップです。
このガイドでは、非可逆WebPと可逆WebPを実用的な用語で説明し、一般的な画像タイプに対する判断ルールを提供し、選択をテストするための簡単なワークフローを提示します。
非可逆 vs 可逆：わかりやすい定義
非可逆圧縮は、一部の画像データを破棄することでファイルサイズを削減します。エンコーダーが画像を分析し、人間の目に目立ちにくい情報を削除します。結果としてファイルは小さくなりますが、元のデータを復元することはできません。圧縮は一方向です。
可逆圧縮は、データを破棄することなくファイルサイズを削減します。エンコーダーが同じ情報をより効率的に表現する方法を見つけるため、出力のすべてのピクセルが元の画像と完全に一致します。ファイルは通常、非可逆圧縮よりも大きくなりますが、品質の損失はありません。
両方のモードが透明度（アルファチャンネル）をサポートしています。ただし、非可逆圧縮は、特に低品質設定では、透明なエッジの周りにアーティファクトを生じることがあります。可逆圧縮はエッジを完璧に保存します。
非可逆WebPを選ぶべき場合
非可逆WebPは、写真、複雑な画像、スムーズなグラデーションを含むものに最適です。これらの画像タイプは、色の値の小さな変化が見えにくいため、非常によく圧縮されます。
写真に非可逆圧縮が適している理由：
- 写真には連続したトーンと微妙な色の変化があります
- 人間の目は、複雑な領域の小さな変化に対して敏感ではありません
- 非可逆圧縮は、視覚的な差が最小限で、ファイルサイズを70～90%削減できます
品質スライダーのガイド：
| 用途 | 開始品質 | 備考 |
|---|---|---|
| ヒーロー画像、ポートフォリオ | 85-90 | 品質が重要な場所で詳細を保持 |
| 商品写真 | 80-85 | サイズと明瞭性の良いバランス |
| サムネイル、プレビュー | 70-75 | 表示サイズで小さいサイズが許容可能 |
注意点：非可逆圧縮は、特に写真に重ねられたテキストなど、鋭いエッジの周りに「リンギング」アーティファクトを引き起こす可能性があります。画像にテキストやUI要素が含まれている場合は、慎重にテストするか、可逆圧縮を検討してください。
ステップバイステップのガイドについては、JPGからWebPへのチュートリアルをご覧ください。
可逆WebPを選ぶべき場合
可逆WebPは、ロゴ、UI要素、スクリーンショット、鋭いエッジとフラットカラーのグラフィックに最適です。これらの画像タイプは、非可逆圧縮がぼかす傾向のある色間のハードな遷移があります。
グラフィックに可逆圧縮が適している理由：
- フラットカラーとハードエッジは、可逆アルゴリズムで効率的に圧縮されます
- テキストや細い線の周りにアーティファクトが発生するリスクがありません
- ピクセルパーフェクトな出力が元の画像と完全に一致します
可逆圧縮が役立たない場合：
- 複雑な画像（写真など）は可逆圧縮では効果的に圧縮されません。ファイルが元のPNGより大きくなる可能性があります
- 「グラフィック」が実際にはテキストを含む写真の場合、高品質の非可逆圧縮の方が良い場合があります
一般的なワークフロー：最初に可逆圧縮を試し、ファイルサイズを高品質非可逆エクスポートと比較し、品質要件を満たしながら小さい方を選びます。
透明度のある画像については、エッジ処理を詳しく説明するPNGからWebPへのチュートリアルをご覧ください。
判断表
この表を出発点として使用し、結果に基づいて調整してください：
| 画像タイプ | 推奨モード | 開始設定 | 確認すること |
|---|---|---|---|
| 写真 | 非可逆 | 品質80 | グラデーションのバンディング、肌の質感 |
| 商品写真 | 非可逆 | 品質85 | 生地/質感のディテール |
| ロゴ（フラットカラー） | 可逆 | — | PNGとのファイルサイズ |
| UIアイコン | 可逆 | — | エッジのシャープネス |
| テキスト付きスクリーンショット | 可逆 | — | テキストの読みやすさ |
| イラスト（グラデーション） | 両方試す | 非可逆85-90 | バンディング、エッジアーティファクト |
| 透明PNG | 可逆または高品質非可逆 | 非可逆の場合は品質90+ | 暗い/明るい背景でのエッジハロー |
クイックテストワークフロー
任意の画像に最適な設定を見つけるためのシンプルなワークフローは次のとおりです：
- ベースラインから開始：期待するモード（写真は非可逆、グラフィックは可逆）で画像をWebPに変換します。
- ファイルサイズを比較：WebPサイズと元のサイズを記録します。可逆圧縮が元のPNGより大きい場合は、高品質非可逆を試してください。
- 視覚的チェック：両方のファイルを100%ズームで開きます。透明画像の場合は、明るい背景と暗い背景に配置します。
- 調整して繰り返す：アーティファクトが見える場合は、品質を上げるかモードを切り替えます。ファイルが大きすぎる場合は、慎重に品質を下げます。
- 勝者を保存：サイズと品質の要件を満たすバージョンを保存します。
img2webp.comを使用すると、数秒で非可逆と可逆のエクスポートを試して直接比較できます。
よくある間違い
WebP設定を選ぶ際に、これらの落とし穴を避けてください：
- テキスト付きスクリーンショットに非可逆を使用：テキストのエッジが簡単にぼやけます。可逆または品質95+を使用してください。
- 小さなアイコンの過剰最適化：2KBのアイコンが1KBになっても、HTTPヘッダーが500バイト追加する場合は意味がありません。まず大きな画像に焦点を当ててください。
- WebPが常にPNG/JPGに勝つと仮定：特定の画像をテストしてください。一部の高度に最適化されたPNGは打ち負かすのが難しく、一部のJPGはすでに最適に近いです。
- 寸法を無視：品質80の4000px画像はまだ巨大です。最初に実際の使用寸法にリサイズしてください。
元の形式を保持する時期についての詳しいガイダンスについては、WebP vs PNG比較をご覧ください。
まとめ
適切なWebPモードは画像の内容によって異なります：
- 写真とグラデーション：非可逆圧縮を使用し、品質80前後から開始します。
- グラフィック、ロゴ、テキスト：可逆圧縮を使用するか、可逆が大きすぎる場合は90+の非可逆を使用します。
- 透明画像：エッジを慎重にテストしてください。可逆はハローを回避します。
最良のアプローチは、実際の画像で両方のモードをテストして比較することです。数分のテストで、後で何時間もの作業のやり直しを節約できます。