Retinaディスプレイで画像が荒く見えるときの対処法【CSS / HTML】

こんにちは！コーダーのゆうしです。

MacやiPhoneなどのRetinaディスプレイで自分のサイトを確認したとき「なんか画像がぼやけて見える」と感じたことはありませんか？これはRetinaディスプレイの仕組みによるもので、適切な対応をしておかないとせっかくのデザインが台無しになってしまいます。この記事では原因と具体的な対処法をまとめて解説します。

なぜRetinaディスプレイで画像が荒く見えるのか？

Retinaディスプレイは通常のディスプレイと比べて画素密度が2倍以上あります。例えばCSSで width: 200px と指定した画像は、Retinaディスプレイでは実際に200×200の物理ピクセルではなく400×400の物理ピクセルで表示されます。

このとき元画像が200×200pxしかない場合、400×400pxのエリアに200×200pxの画像を引き伸ばして表示するため、ぼやけて見えてしまいます。

対処法① 2倍サイズの画像を用意する

一番シンプルな対処法です。表示サイズの2倍の解像度の画像を用意して、CSSでサイズを指定します。

<img src="image@2x.png" width="200" height="200" alt="">

img {
  width: 200px;
  height: 200px;
}

200×200pxで表示したい場合は400×400pxの画像を用意して、CSSで半分のサイズに指定します。Retinaディスプレイでは400×400pxの画像を200×200pxのエリアに表示するので、鮮明に見えます。

デメリット： 通常のディスプレイでも2倍サイズの画像を読み込むため、ページの読み込みが重くなります。

対処法② srcsetで解像度に応じて画像を切り替える

srcset 属性を使うと、ディスプレイの解像度に応じて自動で最適な画像を読み込んでくれます。通常ディスプレイには1倍サイズ・Retinaディスプレイには2倍サイズの画像を使い分けできるので、不要なデータ転送を防げます。

<img
  src="image.png"
  srcset="image.png 1x, image@2x.png 2x"
  width="200"
  height="200"
  alt=""
>

1x が通常ディスプレイ向け、2x がRetinaディスプレイ向けです。ブラウザが自動でどちらを読み込むか判断してくれます。

ウィンドウ幅に応じて画像を切り替える場合

srcset と sizes を組み合わせることで、ウィンドウ幅と解像度の両方に応じて最適な画像を読み込めます。

<img
  src="image-small.png"
  srcset="
    image-small.png 400w,
    image-medium.png 800w,
    image-large.png 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt=""
>

w はピクセル幅を表し、sizes でどのサイズの画像を使うかの条件を指定します。

対処法③ SVGを使う

ロゴやアイコンなどのベクター素材はSVGで書き出すことで、どんな解像度でも鮮明に表示できます。SVGはベクターデータなので、どんなサイズに拡大しても荒くなりません。

<!-- imgタグで読み込む -->
<img src="logo.svg" width="200" height="60" alt="ロゴ">

<!-- インラインSVGとして埋め込む -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60" viewBox="0 0 200 60">
  <!-- SVGの中身 -->
</svg>

ロゴ・アイコン・イラストなどはできる限りSVGで用意しておくのがおすすめです。

対処法④ CSSのbackground-imageに使う場合

背景画像にもRetina対応が必要です。image-set() を使うと srcset と同様にCSSの背景画像を解像度に応じて切り替えられます。

.hero {
  background-image: image-set(
    url("hero.jpg") 1x,
    url("hero@2x.jpg") 2x
  );
  background-size: cover;
}

または @media でデバイスピクセル比を条件にして切り替える方法もあります。

.hero {
  background-image: url("hero.jpg");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero {
    background-image: url("hero@2x.jpg");
  }
}

-webkit-min-device-pixel-ratio: 2 はSafari向け、min-resolution: 192dpi はその他のブラウザ向けの記述です。両方書いておくことでクロスブラウザ対応できます。

対処法⑤ pictureタグを使う

picture タグを使うとより細かい条件で画像を切り替えられます。フォーマットの切り替えと解像度の切り替えを組み合わせることも可能です。

<picture>
  <!-- WebP対応ブラウザ向け（Retina） -->
  <source
    type="image/webp"
    srcset="image.webp 1x, image@2x.webp 2x"
  >
  <!-- WebP非対応ブラウザ向け（PNG） -->
  <source
    type="image/png"
    srcset="image.png 1x, image@2x.png 2x"
  >
  <img src="image.png" width="200" height="200" alt="">
</picture>

WebPはJPGやPNGより高圧縮で画質が良いフォーマットです。picture タグを使うことでWebP対応ブラウザにはWebPを、非対応ブラウザにはPNGをそれぞれRetina対応で配信できます。

用途別おすすめの対処法まとめ

躓きやすいポイント

2倍サイズ画像を用意したのにぼやける

CSSで width と height を指定し忘れている可能性があります。2倍サイズの画像をそのままのサイズで表示してしまうと、表示が大きくなるだけでRetina対応になりません。必ず表示したいサイズをCSSで指定してください。

srcsetが効いているか確認したい

Chromeの開発者ツールの「ネットワーク」タブで、実際にどの画像が読み込まれているかを確認できます。デバイスピクセル比を変えて確認したい場合は開発者ツールのデバイスエミュレーターを使うと便利です。

SVGがぼやけて見える

SVGをインラインで埋め込んでいる場合に viewBox の指定が間違っていると崩れて見えることがあります。また width と height 属性がないとブラウザによって表示サイズが変わることがあるので必ず指定してください。

まとめ

Retinaディスプレイで画像が荒く見える原因は、表示サイズに対して画像の解像度が足りないためです。ロゴやアイコンはSVG・写真やバナーはsrcsetで2倍サイズを指定するのが実務ではベストプラクティスです。background-imageにはimage-set()を使うとCSSだけで対応できます。サイト公開前にRetinaディスプレイでの確認を習慣にしておくとクオリティが上がります。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。