JPG圧縮で画質劣化を抑える方法｜品質設定の目安と再圧縮の注意点
JPG (JPEG) は写真用途で最も広く使われる画像形式ですが、非可逆圧縮 (lossy) のため設定を誤ると画質が目立って劣化します。本記事では 品質スライダーをどこまで下げてよいか、写真とスクショで判断軸が違う理由、再圧縮を避ける運用のコツを実用ベースで整理します。画像圧縮の科学 (Pillar) もあわせて参照してください。
1. JPG 圧縮で劣化が目立つ理由 (ブロックノイズ)
JPG は写真向きの非可逆圧縮アルゴリズムで、人間の視覚で気づきにくい変更を加えてデータ量を減らします。一般に、画像を 8×8 ピクセル程度のブロック単位で扱い、各ブロックの色味・輝度成分を変換・量子化して保存する仕組みが採られます。web.dev の JPEG 解説 も参考になります。
劣化の見え方 (主な 3 タイプ)
- ブロックノイズ: 8×8 ブロックの境目が四角く見える劣化。品質を大幅に下げたとき顕著
- モスキートノイズ: 文字や輪郭線の周辺に発生するぼやけ・ちらつき。スクショや図表で目立つ
- バンディング (banding) / 階調の段階化: 量子化による色階調の不連続化で、グラデーション部分が縞模様に見える現象。空・夕焼け・グラデーション背景で目立つ
これらは品質を下げるほど顕著になる一般的な傾向で、見え方は元画像のディテール量・解像度・表示サイズ・用途により大きく変動します。一律の閾値があるわけではないため、圧縮後に必ず目視確認するのが安全です。
2. 品質設定はどこまで下げてよいか
本サイトの 画像圧縮ツール では Canvas API の canvas.toBlob(callback, 'image/jpeg', quality) の quality 引数 (0.0-1.0) でこの値を制御します。以下の目安は実務上の経験則として広く参照されているもので、業界共通の単一標準ではありません。用途・元画像・配信先によって最適値は変動するため、実際の選定では目視確認をおすすめします。
| 用途 | 推奨品質 | 備考 |
|---|---|---|
| 印刷・高品質保存 | 95-100% | 容量は大きいが劣化最小 |
| 写真用途 (一般) | 75-85% | 視覚的にほぼ気づかれない |
| Web 表示用 | 60-75% | LCP 改善とのバランス |
| サムネイル・低解像度 | 50-60% | 細部は失われるが容量優先 |
| 50% 未満 | 用途を限定 | ブロックノイズや階調劣化が目立ち始める傾向 |
これらは実務経験ベースの目安で、絶対的な閾値ではありません。web.dev の画像圧縮ベストプラクティス でも「視覚品質と容量のトレードオフは画像ごとに目視確認すべき」と示されています。LCP 最適化 の観点では 60-75% で必要十分なケースが多いです。
3. 写真・スクショ・文字入り画像の違い
同じ品質設定でも、画像の中身によって劣化の見え方が大きく異なります。
写真 (風景・人物)
連続的なグラデーションが多く、JPG の非可逆圧縮と相性が良いタイプ。75-85% で視覚的にほぼ劣化が分からないレベル。圧縮率も高く、容量削減効果が大きいため、JPG が最も適した用途です。
スクリーンショット (UI・チャート・図表)
明瞭な文字や直線、ベタ塗りの背景が多く、JPG の苦手な領域です。文字周辺にモスキートノイズが出やすく、可読性が下がります。**PNG (可逆圧縮)** または **WebP の可逆モード** を推奨。どうしても JPG で配信したい場合は品質 90% 以上を目安にし、Web 表示の容量とトレードオフで判断してください。
文字入り画像 (チラシ・バナー・名刺画像)
写真と文字が混在する画像はもっとも難しいケース。文字部分の可読性を優先するなら PNG、写真部分の圧縮率を優先するなら JPG (品質 85% 以上)。代替案として、写真パート → 圧縮 JPG、文字パート → SVG オーバーレイ、と分離する設計もあります。
関連: AVIF と WebP はどちらが安全？ では次世代フォーマットの選び方を扱います。
4. 再圧縮を避ける運用
JPG の非可逆圧縮は不可逆 (元に戻せない) です。一度圧縮した画像をさらに編集・再圧縮すると、劣化が累積します。これを「世代喪失 (generation loss)」と呼びます。
世代喪失の典型例
- SNS にアップロード → SNS 側で自動再圧縮 → ダウンロード → さらに別 SNS に再アップロード → 再々圧縮 (画質がどんどん劣化)
- 編集アプリで JPG を開いて軽微なクロップ → 保存 → 再度開いて文字を追加 → 保存 (毎回再圧縮で劣化)
- 圧縮済み JPG を本サイトで再圧縮 (Canvas API は再エンコードのため、品質設定が同じでも理論的にはわずかに劣化)
回避策
- 原本を残す: 撮影直後のオリジナル JPG (またはカメラの RAW) を別フォルダで保管
- 編集中は可逆形式: 編集中は PSD / TIFF / PNG など可逆形式で作業し、配信前に JPG 変換
- 配信用に都度圧縮: クラウドストレージで原本を保管し、配信先 (Web / SNS / メール) に合わせて毎回原本から圧縮
- SNS 投稿は原寸: SNS の自動圧縮を避けるため、推奨サイズちょうどでアップロード (例: Instagram は 1080×1080)
5. 圧縮後の確認ポイント
圧縮版を配布・公開する前に、以下を確認してください。
必須チェック (3 項目)
- 100% 表示での目視: ブロックノイズ / モスキートノイズ / バンディング (階調段階化) が許容範囲内か
- 表示環境での確認: Web ならスマホ・PC 両方の実機ブラウザ、SNS なら投稿前のプレビュー、印刷なら試し刷り
- 用途特有チェック: 商品写真なら色再現性、ポートレートなら肌の質感、テキストなら可読性
追加チェック (推奨)
- EXIF メタデータの確認 (位置情報を意図せず保持していないか)。Canvas 再エンコード型ツールでは副次的に除去されます (プライバシー重視の画像圧縮ガイド で詳述)
- ファイルサイズの確認 (想定値の範囲内か、極端に大きい/小さい場合は再調整)
- SEO 観点では Google 画像 SEO ガイドライン も参照 (alt 属性・ファイル名・周辺テキスト)
品質スライダーで段階的に試して比較
→ 画像圧縮ツールで JPG を比較しながら最適化よくある質問
JPG 品質 80 は安全な目安ですか？
Web 表示用途では一般的に安全な目安とされ、業界の慣行として写真系では 75-85% が広く使われています。ただし「安全」の定義は用途や元画像のディテール量によって変わります。被写体に細かい模様や微妙なグラデーションが多い場合は 90% 以上、Web 用バナーや SNS 投稿用なら 70-80% が目安。圧縮前後を目視確認するのが最も確実です。
文字や図表が入った画像は JPG でよいですか？
原則 PNG または WebP を推奨します。JPG は非可逆圧縮で、文字や図形の輪郭付近にモスキートノイズ (ぼやけ) が出やすく、可読性が低下します。スクリーンショット・ドキュメント・図表は PNG が無難、ファイル容量を下げたい場合は WebP の可逆モードを検討してください。
圧縮前のオリジナル画像は残すべきですか？
はい、強く推奨します。JPG の非可逆圧縮は不可逆 (元に戻せない) で、一度圧縮した画像をさらに再圧縮すると劣化が累積します。元画像を別フォルダで保管し、配信用に都度圧縮する運用が安全。クラウドストレージで原本のみバックアップ、圧縮版は配信都度生成、という二段構えが堅実です。
ファイル容量だけ見て圧縮の良し悪しを判断してよいですか？
いいえ、容量だけでは不十分です。同じ容量でも視覚的な劣化具合は元画像によって大きく異なります。圧縮後は (1) 100% 表示での目視確認、(2) Web 用なら実機ブラウザでの表示確認、(3) 印刷用なら実印刷での確認、を行ってから配布してください。容量は副次指標として扱うのが安全です。
関連記事: 画像圧縮で個人情報は残る？安全対策 ・ AVIF と WebP はどちらが安全？
戻る: 画像・QRツール完全ガイド (圧縮の科学セクションへ)
一次情報源: web.dev: JPEG ・ web.dev: 画像圧縮ベストプラクティス ・ web.dev: LCP 最適化 ・ MDN: Canvas.toBlob() ・ Google: 画像 SEO ガイドライン ・ MDN: 画像形式ガイド ・ 品質設定の数値目安は業界一般則 (公式単一基準はなく、用途と元画像により変動)