WebP変換で画質が落ちる原因とノイズ・色くすみ防止の設定（Lossless vs Lossy）

画像圧縮 WebP フロントエンド 最適化 Webデザイン

PNG や JPEG を WebP フォーマットへ変換した際に「文字の輪郭がボヤける」「色味がくすむ」といった画質劣化トラブルの原因と防止設定です。

1. オンライン WebP 画質調整・圧縮ツール

品質スライダーとプレビューで、画質劣化と容量削減のバランスをリアルタイムで確認しながら変換できます。

🖼️ この場で画像をWebPに圧縮してみる

あわせて使いたい画像リサイズ画像を指定サイズにリサイズ。幅・高さ・縦横比維持。複数画像一括対応。使ってみる →

画像をドロップ or クリックで即時圧縮！

WebP変換・JPEG軽量化をブラウザ上で超高速実行

完全無料・無制限 会員登録不要 通信なし（安全）

Ctrl+V（スクショ貼り付け）やスマホ画像の選択にも対応

サーバーへのアップロードは一切行いません。あなたのPC/スマホ（ブラウザ内）だけで圧縮処理が完結するため、機密情報やプライベートな画像・写真データが絶対に外部へ漏れないセキュリティ設計です。Mac/Windows/iPhone/Androidすべてに対応。（JPEG / WebP / GIF 出力対応）

即ファイル縮小

PageSpeed対策に必須。画質を保ったままJpeg/Pngの容量を極限まで圧縮します。

最強のWebP変換

重い画像をGoogle推奨のWebPへ一括変換。データ量を大幅に削減可能です。

目標サイズ自動調整

「200KB以下」などの制限に一発対応。指定サイズ内の最高画質を自動で探します。

2. 画質低下・モスキートノイズが起きる2大原因

① 原因 1: 文字・図解に非可逆圧縮（Lossy）を適用している

WebP の非可逆圧縮（Lossy）は、写真データ用に空間周波数を間引くアルゴリズムを採用しています。そのため、文字、ロゴ、キャプチャ画像、単色ベタ塗りイラスト に非可逆圧縮を掛けると、輪郭に「モスキートノイズ（黒い靄）」が発生します。

② 原因 2: カラープロファイル（sRGB）の脱落による「色くすみ」

Photoshop や Canva から書き出した画像の ICC カラープロファイルが WebP 変換時に削除されると、色空間が不一致となり、赤や緑のグラデーションがくすんで見える現象が発生します。

3. 画像タイプ別の最適設定ルール

画像タイプ推奨圧縮方式品質パラメータ (Quality)特徴
写真・自然風景 (JPEG由来)非可逆 (Lossy)80 〜 8580%以下に落とすと暗部にブロックノイズが発生する
スクリーンショット・図解 (PNG由来)可逆 (Lossless)-100% 元画質を維持しつつ PNG より 20% 軽量化
透明背景のアイコン・ロゴ可逆 (Lossless)-エッジのアンチエイリアスを完全に保護

4. CLI ツール (cwebp) でのプロ指定コマンド

Google 公式の cwebp CLI ツールでの推奨変換コマンドです。

# ① 写真用の非可逆変換（sRGBプロファイルを保持して品質85）
cwebp -q 85 -metadata icc photo.jpg -o photo.webp

# ② イラスト・スクリーンショット用の完全可逆変換
cwebp -lossless diagram.png -o diagram.webp