なぜ圧縮後に画像がぼやけて見えるのか

画像を圧縮すると何が変わるか

JPGおよびWebPの損失圧縮は、可視情報の一部を破棄することでファイルサイズを減らします。中程度のレベルでは、多くの変化は気づかれません。品質が低すぎる場合、エッジのぼやけ、テキスト周りの斑点、グラデーションのブロック化、髪や葉、布のテクスチャの喪失が発生します。

圧縮が常に唯一の原因とは限りません。横幅600ピクセルの写真は、高品質で保存されていても、ページがそれを1200ピクセルに拡大するとぼやけて見えます。したがって、二つの質問を分けるのが賢明です：ファイルはエンコード時にディテールを失ったのか、それとも単に表示サイズに対してピクセル数が不足しているのか？

原因を特定する方法

1. 元ファイルと圧縮ファイルを同じズームレベルで開きます。
2. テキスト、斜めの枠線、柔らかな影、細かいディテールでエリアを比較しましょう。
3. 両方のファイルのピクセル寸法を確認してください。
4. サムネイルだけでなく、最終サイズで結果を表示します。
5. 元の画像もぼやけている場合、圧縮では存在しなかった詳細を回復することはできません。

圧迫が強すぎる兆候

• 正方形ブロック: は空や壁、勾配でよく目立ちます。
• ハローズ: 文字、暗いオブジェクト、コントラストの強い線の周りに表示されます。
• 厚塗りテクスチャ： 髪、芝生、および布地は分離が失われます。
• バンドカラー: 柔らかなグラデーションが目立つストライプになります。

これらの欠陥を見つけたら、元のファイルを再度開いてください。 画像圧縮アプリ そして品質を徐々に上げてください。前回の結果を再圧縮しないようにしてください。損失のある新しいエクスポートごとにダメージが蓄積する可能性があります。

コンテンツに応じた推奨品質

普遍的な割合は存在しません。自然な写真は小さな文字のあるスクリーンショットよりも多くの圧縮に耐えます。出発点として、写真には中高品質、インターフェース、図解、またはテキストを含む画像には高品質を使用してください。その後、プレビューでサイズと見た目を比較します。

もしショットが鋭いエッジを保つ必要がある場合は、PNGを試してみてください。写真の場合は、JPGまたはWebPの方が比較的合理的なバランスを提供します。ガイド JPG、PNG、およびWebP は、各フォーマットが適切なタイミングを説明します。

解像度も問題の原因となることがあります

次元を縮小するとピクセルが永久に消える。これは元の画像が表示されるスペースよりはるかに大きい場合に有用ですが、結果が必要なサイズ未満になるとぼやけが生じることがあります。幅が800ピクセルになる画像は、少なくともその幅を保持すべきです。高密度スクリーンでは、より大きなバージョンを準備することが有用かもしれません。

小さな画像をCSS、プレゼンテーション、またはエディタで拡大することは避けてください。ブラウザはピクセルを補間してスペースを埋めますが、失われた詳細を再現することはできません。

ぼやけた画像の修正方法

1. 元のバージョンまたはより高解像度のコピーを復元します。
2. 内容に応じてフォーマットを選択してください:写真はJPGまたは[[L4P06];PNGは透明性、細かいテキスト、またはシンプルなグラフィックス用です。
3. より優しく圧縮し、すでに十分な寸法であればそのままにしてください。
4. 100％で結果を確認し、最終デザインでもチェックしてください。
5. 軽量化が見た目の違いに見合う場合にのみ降ろしてください。

よくある質問

すでに圧縮された画像をシャープにできますか?

フィルターは輪郭のコントラストを上げることができますが、破棄された情報を回復することはできません。最も信頼できる解決策は元のファイルに戻り、より良い設定で再度エクスポートすることです。

なぜサムネイルは見栄えが良くて、大きな画像はそうではないのでしょうか?

これを減らすことで、欠陥が占有するスペースが減り、識別が難しくなります。重要な詳細をZoomで閲覧し、実際の出版物サイズを確認してください。

ファイルが小さい方がいつもいい?

いいえ。目的は、目に見える欠陥を導入せずに最終用途に適した重量を達成することです。数キロバイトを節約しても、可読性の低下を補うことはできません。