なぜ高解像度ディスプレイで画像がぼやけるのか
高解像度ディスプレイは、CSS上の1ピクセル（CSSピクセル）を2倍や3倍の物理ピクセルで描画します。この比率をデバイスピクセル比（DPR）と呼び、一般的なスマートフォンやノートPCではDPRが2や3になります。
DPRが2の画面に幅400pxで表示する画像なら、実際には800px相当の解像度が必要です。元画像が400pxしかないと、足りない分を引き伸ばすため、輪郭が甘くなりぼやけて見えます。これが高解像度ディスプレイ特有の画像劣化の主な原因です。
逆に、低解像度の画面で見ているときは問題なく見えるのに、新しいデバイスで確認すると粗く見える、というすれ違いも起きます。確認環境のDPRを意識することが切り分けの第一歩になります。
等倍画像とsrcsetの使い分け
対処の基本は、表示サイズより大きい解像度の画像を用意することです。たとえば表示幅400pxの画像なら、800pxや1200pxの素材を書き出しておき、ブラウザにどれを使うか選ばせます。
imgタグのsrcset属性に複数の解像度を並べ、sizes属性で表示幅の目安を伝えると、ブラウザがDPRと表示幅に応じて最適な1枚を選びます。これにより、高DPR端末では高解像度版を、低DPR端末では軽い画像を読み込めて、画質と転送量を両立できます。
ロゴやアイコンなど線が主体の素材は、ラスター画像ではなくSVGにするのも有効です。SVGは解像度に依存せず、どんなDPRでも鮮明に表示できます。
症状別チェック表
画像がぼやける・粗く見えるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
object-fitで縦横比のつぶれを防ぐ
ぼやけと似て非なる問題に、画像が引き伸ばされて縦横比が崩れる現象があります。コンテナのサイズに合わせて画像を表示する際、縦横比を無視して引き伸ばすと、人物や文字が間延びして見えます。
この場合はobject-fitプロパティが役立ちます。coverは縦横比を保ったまま領域いっぱいに表示して余りを切り取り、containは縦横比を保ったまま全体が収まるように縮小します。用途に応じて選び分けてください。
ぼやけを確認・修正する手順
実際の対処は次の順序で進めると切り分けやすくなります。
- 対象画像のCSS上の表示幅と、元画像の実ピクセル幅を比べる
- 確認に使う端末やブラウザのDPRを把握する（DPR2なら表示幅の2倍が必要）
- 不足していれば2倍・3倍解像度の画像を書き出し、srcsetとsizesに登録する
- 線主体の素材はSVG化を検討する
- コンテナに合わせる場合はwidth/heightとobject-fitで縦横比を固定する
- 高DPR端末の実機、または開発者ツールのデバイスエミュレーションで再確認する
実機・複数環境での確認を共有でラクにする
画像のぼやけはDPRに依存するため、自分の作業画面だけで判断すると見落とします。Retina搭載機、外部モニタ、スマートフォンなど複数の実機で見比べることが大切です。
修正版のHTMLをチームやクライアントに見てもらいたいとき、ギガサイト便を使うとHTMLやZIPをドロップするだけで共有URLが発行され、各自が手元の端末で実際の表示を確認できます。同じURLのままファイルを差し替えられるので、画質を調整するたびにリンクを送り直す必要がありません。公開ページにはnoindexが付くため検索結果に出ず、関係者以外に見せたくない場合はパスワードやメール認証を併用できます。
よくある質問
DPRはどうやって確認できますか。
ブラウザの開発者ツールのコンソールでwindow.devicePixelRatioを評価すると数値が表示されます。多くのスマートフォンやRetina搭載PCでは2や3になります。この値の分だけ表示幅より大きい解像度の画像が必要だと考えてください。
とにかく大きい画像を1枚用意すれば解決しますか。
画質だけなら解決しますが、低DPRの端末や通信環境では無駄に重い画像を読み込むことになります。srcsetとsizesで複数の解像度を用意し、端末に応じて選ばせるほうが、画質と表示速度を両立できます。
写真ではなくアイコンがぼやけます。どうすればよいですか。
アイコンやロゴなど線が主体の素材はSVGに変換するのがおすすめです。SVGはベクター形式で解像度に依存しないため、どんなDPRの画面でも鮮明に表示でき、ファイルサイズも小さく済むことが多いです。
object-fitを指定しても画像がにじみます。
object-fitは縦横比とトリミングを制御するもので、元画像の解像度不足によるにじみは解決しません。にじみが残る場合は、表示サイズとDPRに見合った高解像度の元画像を用意したうえで、object-fitで配置を整えてください。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。