5 つの原因を一目で
鮮明な写真がアップロード後にぼやけて見えるのは、たいてい 5 つの理由のいずれかです。あなたの症状を見つけ、下の対応するセクションを読んでください。
| 原因 | 見分け方 | 直し方 |
|---|---|---|
| プラットフォームの再圧縮 | アップロード後にぼやけ、前は鮮明 | 品質 85 以上でアップロード |
| 表示枠より小さい画像 | ぼやけるかブロック状；ブラウザが拡大した | 少なくとも表示サイズのソースを使う |
| Retina の不一致 | デスクトップで鮮明、スマホでぼやけ | CSS 表示幅の 2 倍を提供 |
| JPEG アーティファクト | エッジやグラデーション周りの色ノイズ | 品質を上げるか WebP に切り替え |
| DPI の混乱 | DPI を変えても何も良くならない | DPI は無視；ピクセル寸法だけが重要 |
原因 1：プラットフォームの再圧縮
ほとんどのウェブプラットフォーム——SNS、サイトビルダー、CMS、e コマースプラットフォーム——は、ストレージコストを下げ、ページ読み込みを改善するために、アップロード後に画像を圧縮します。適用される圧縮はしばしば積極的で、あなたの特定の画像ではなく平均的なファイルサイズ削減に最適化されています。
結果は、2 回の圧縮を経たあなたの写真の版です：1 回はカメラやエディターから書き出したとき、もう 1 回はプラットフォームが再圧縮したとき。各非可逆の圧縮は、既存の上に新しいアーティファクトを加えます。なめらかなグラデーションにバンディングが生じます。鋭いエッジが柔らかくなります。細部が消えます。緩和策：
- 必要と思うより高い品質でアップロードします。再圧縮するプラットフォームはあなたのアップロード版で作業します。JPEG 品質 95 でアップロードすれば、プラットフォームの再圧縮は品質 70 でアップロードするよりきれいなベースラインから始まります。
- 表示寸法を知っているなら、その正確な寸法でアップロードします。すでに目標サイズの画像を受け取るプラットフォームは、サイズ変更を省略または減らすかもしれず、劣化ステップの 1 つを避けます。
- 推奨アップロード仕様について、プラットフォームのドキュメントを確認します。多くのプラットフォームは、最良の品質のために推奨する寸法と形式を公開しています。
原因 2：表示サイズより小さい画像をアップロードする
600 ピクセル幅の画像をアップロードして 1200 ピクセル幅で表示されると、ブラウザはコンテナに収めるためにそれを拡大しなければなりません。画像を元の寸法を超えて拡大すること——アップスケーリング——は、根底のピクセルグリッドを露出させます。画像はスケーリングアルゴリズムに応じて柔らかく、ぼやけ、またはブロック状に見えます。解決は、少なくとも表示サイズと同じ大きさ、できれば高密度（Retina ）画面のために 2 倍の大きさのソース画像を使うことです。Retina 画面の 800 CSS ピクセルの表示幅は、鮮明に見えるには 1600 ピクセルの画像が必要です。これは次のときに起こります：
- アップロード前に写真を過度に縮小し、表示サイズより小さくする
- 低解像度カメラの古いデバイスで撮った写真を使う
- 非 Retina ディスプレイでスクリーンショットを撮り、Retina の文脈で表示する
- 画像のサムネイルサイズ版を、それを大きく見せる枠にアップロードする
原因 3：Retina／高密度ディスプレイの不一致
Retina と高密度ディスプレイ（HiDPI や 2× ディスプレイとも呼ばれる）は、各 CSS ピクセルを表示するのに 2 つの物理ピクセルを使います。標準の 100×100 CSS ピクセルの領域は、これらの画面で 200×200 の物理ピクセルグリッドを使います。200×200 を必要とする枠に 100×100 ピクセルだけの画像を提供すると、標準ディスプレイでは問題なく見える一方、Retina デバイスではぼやけて見えます。
ほとんどの現代のラップトップ、iPhone、iPad、ハイエンドの Android スマホ、多くのデスクトップモニターは高密度ディスプレイです。視聴者が現代のデバイスを使い、あなたの画像が自分のモニターでは鮮明でも他の人が見るとぼやけるなら、Retina の不一致が有力な原因です。
解決：CSS 表示寸法の 2 倍で画像を提供します。400 ピクセル幅の CSS 枠には、800 ピクセル幅の画像をアップロードします。
原因 4：間違った形式がぼやけに見える視覚アーティファクトを引き起こす
強い JPEG 圧縮は、ブロック状というよりぼやけとして現れるアーティファクトを生むことがあります——特に空、肌、ピントの外れた背景のようななめらかなグラデーション領域で。ぼやけた画像に見えるものが、実は細部が量子化で取り除かれた、強く圧縮された JPEG であることがあります。
テスト：画像の鋭いエッジ（文字、高コントラストの輪郭）にズームインします。エッジが柔らかく見え、色ノイズに囲まれているなら、問題は JPEG 圧縮アーティファクトです。エッジは鋭いのに全体の画像に細部が欠けているなら、問題は解像度の不足です。
JPEG アーティファクトは、より高い品質設定でアップロードするか、同等のファイルサイズでグラデーションをよりきれいに扱う WebP に変換して直します。
原因 5：DPI の混乱
画像エディターはファイル設定にしばしば「DPI」や「PPI」の値を表示します。これを下げればファイルサイズが減るか、画面での見え方が変わると思って下げる人がいます。どちらもしません。DPI（ドット・パー・インチ）は印刷にだけ意味があります——プリンターにどれだけ密にインクを置くかを伝えます。画面はドット・パー・インチではなくピクセルを使い、JPEG や PNG の DPI 値はすべてのブラウザに無視されます。
画像エディターで画像を 300 DPI から 72 DPI に下げても、画面で小さくもぼやけもしません——エディターが同時にピクセル寸法を再サンプリング（サイズ変更）した場合を除いて。ピクセル寸法が変わったか確認してください。変わっていなければ、DPI の変更はウェブ版に効果がありませんでした。
予防チェックリスト
- Retina の鮮明さのため、CSS 表示幅の 2 倍で画像をアップロードする
- プラットフォームの再圧縮の前に、JPEG 品質 85+ か WebP 品質 82+ でアップロードする
- アップロード前に、プラットフォームの推奨画像寸法を確認する
- 小さい画像を大きな枠を埋めるために拡大しない——高解像度のソースから始める
- プラットフォームが許す場所では JPEG ではなく WebP か AVIF を使う——品質圧縮をより優雅に扱う