WebP変換で画質が落ちる原因と最適な設定
画像圧縮 WebP フロントエンド 最適化
結論
写真は非可逆・品質80、イラストや文字画像は可逆（Lossless）。これだけで劣化は防げる。
なぜ画質が落ちるのか
WebPは大きく2つの圧縮方式がありますが、多くのツールはデフォルトで非可逆圧縮（品質75前後） を使います。
写真なら問題ありませんが、文字やベタ塗りのイラストに非可逆圧縮をかけると、輪郭にモスキートノイズ（もやもや）が出ます。
| 非可逆圧縮（Lossy） | 可逆圧縮（Lossless） |
|---|---|
| 目に見えにくい情報を切り捨てて圧縮 | 情報を一切捨てず、データの並びを工夫して圧縮 |
| 容量は劇的に減る。画質は劣化する | 画質は元と同じ。容量はそこまで減らない |
| 向き：写真（JPEG） | 向き：ロゴ、図解、スクショ（PNG） |
推奨設定
-
写真（JPEG由来） — 非可逆（Lossy） / 品質 80〜85
-
イラスト・文字・スクショ（PNG由来） — 可逆（Lossless）
色味が変わる場合
変換後に色がくすむことがあります。元画像のカラープロファイル（sRGBなど）が変換時に削除されたのが原因です。「メタ情報を保持する」設定を有効にしてください。
ツールで画質を見比べながら変換
品質スライダーを動かして、劣化具合をその場でプレビューできるツールなら、最適なバランスを目で見て確認できます。
🧪 画像圧縮・WebP変換ツール
ブラウザ内で完結。品質スライダーで劣化具合をプレビューできます
試す