WebP変換で画質が落ちる原因と最適な設定

画像圧縮 WebP フロントエンド 最適化
結論

写真は非可逆・品質80、イラストや文字画像は可逆（Lossless）。これだけで劣化は防げる。

なぜ画質が落ちるのか

WebPは大きく2つの圧縮方式がありますが、多くのツールはデフォルトで非可逆圧縮（品質75前後） を使います。

写真なら問題ありませんが、文字やベタ塗りのイラストに非可逆圧縮をかけると、輪郭にモスキートノイズ（もやもや）が出ます。

非可逆圧縮（Lossy） 可逆圧縮（Lossless）
目に見えにくい情報を切り捨てて圧縮 情報を一切捨てず、データの並びを工夫して圧縮
容量は劇的に減る。画質は劣化する 画質は元と同じ。容量はそこまで減らない
向き：写真（JPEG） 向き：ロゴ、図解、スクショ（PNG）

推奨設定

  1. 写真（JPEG由来） — 非可逆（Lossy） / 品質 80〜85

  2. イラスト・文字・スクショ（PNG由来） — 可逆（Lossless）

色味が変わる場合

変換後に色がくすむことがあります。元画像のカラープロファイル（sRGBなど）が変換時に削除されたのが原因です。「メタ情報を保持する」設定を有効にしてください。

ツールで画質を見比べながら変換

品質スライダーを動かして、劣化具合をその場でプレビューできるツールなら、最適なバランスを目で見て確認できます。

🧪 画像圧縮・WebP変換ツール

ブラウザ内で完結。品質スライダーで劣化具合をプレビューできます

試す

関連記事

この記事は Webパフォーマンス テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
クリティカルレンダリングパス最適化クリティカルレンダリングパス最適化｜FCP・LCPを改善する実践ガイド
HTTP/2とHTTP/3の違いHTTP/2とHTTP/3の違い｜QUICがWeb表示速度を変える理由
Speculation Rules API 完全ガイドSpeculation Rules API 完全ガイド｜prefetch・prerender・Chrome 144 prerender_until_script
fetchpriority属性でLCP画像を最適化するfetchpriority属性でLCP画像を最適化する｜2026年実践ガイド
Web Vitals INP改善ガイドWeb Vitals INP改善ガイド｜scheduler.yield・Long Task・Input Delay対策（2026）
content-visibility: auto 完全ガイドcontent-visibility: auto 完全ガイド｜遅延レンダリングと長尺ページ最適化 2026
Server-Timing API 完全ガイドServer-Timing API 完全ガイド｜Express ミドルウェアと Chrome DevTools 連携
Brotli vs Gzip 圧縮比較Brotli vs Gzip 圧縮比較｜nginx静的・動的設定とCDN実践ガイド
CSS/JSを圧縮（Minify）するメリットCSS/JSを圧縮（Minify）するメリット｜サイト高速化の基本
Service Worker キャッシュ戦略ガイドService Worker キャッシュ戦略ガイド｜PWA の cache-first・network-first・SWR・Workbox 設計
View Transitions API 完全ガイドView Transitions API 完全ガイド｜SPA・MPA ページ遷移と Astro/React 統合
画像圧縮とWebP変換画像圧縮とWebP変換｜PageSpeed改善の基本