Retinaディスプレイ対応

Retinaディスプレイとは

人間の目ではドットを確認することができないレベルという意味で、Retina（網膜）ディスプレイと名付けられた

解説にでてくる用語について

CSSピクセル

HTML・CSS等で指定するピクセル数

デバイスピクセル

描画に使用する実際のピクセル数

デバイスピクセル比

Retinaディスプレイで画像がぼやける理由

Retinaディスプレイ対応

2倍サイズの画像を1/2に縮小して対応する。

ただし、そのままだと通常ディスプレイでも2倍サイズの画像が使われてしまい効率が悪い。

srcset属性

HTML5.1から追加された属性

img要素、picture要素、source要素に使用可能

条件によってサイズ違いの画像を切り替える機能です。

srcset属性を指定することで閲覧環境に応じた画像を自動で読み込むことができます。

IEが未対応のため、src属性を併用します。

記述例

src属性

IE用画像を指定　例）image.jpg

srcset属性

カンマ区切りで複数画像を指定

デバイスピクセル比１（PC用）画像　例）image.jpg 1x
※「1x： デバイスピクセル比１」を意味する

デバイスピクセル比２（Retina用）画像　例）image@2x.jpg 2x
※「2x： デバイスピクセル比２」を意味する
※PhotoshopやXDで書き出す場合、画像名の最後に「@2x」が付与される

<img src="image.jpg" srcset="image.jpg 1x,　image@2x.jpg 2x" alt="画像名">

「1x」は省略することができるので、以下のように記述するケースが多い

<img src="image.jpg" srcset="image.jpg,　image@2x.jpg 2x" alt="画像名">

src属性のテスト

テスト用HTML： https://jobtech.jp/data/srcset.html

PC：Chrome表示（Retinaではないモニタ）

上記「４」でデバイスピクセル比１の「100×100.png」が表示されていないのは、「２」で「200×200.png 」を読み込んでいるため。高解像度用画像（今回はデバイスピクセル比２用の画像）が既に読み込まれていたり、キャッシュされている場合はそちらを優先する。

「５」はキャッシュの影響を受けていないため、デバイスピクセル比１の「100×100.png」を表示。

PC：Chrome表示（Retinaモニタ）

「５」がRetina用画像に切り替わっている。

PC：IE表示

IEはsrcset属性を認識しないため、「４」「５」の表示でsrc属性を使用している。

スマホ：iPhone6（Retinaモニタ）

「５」がRetina用画像に切り替わっている。

他に「picture要素」と「source要素」を使った対応方法もある。