src attribute ／ src属性

imgタグのsrc属性

srcsetに対応していないブラウザへのフォールバック
・未対応ブラウザはここで指定された画像を読込

フォールバックとは？
・ある機能を提供する際に不具合が生じた場合、自動的に代替手段に切り替え、質を落としても機能提供を継続する仕組みのこと

具体例1
・Retinaディスプレイでは test@2x.png を使用、非Retinaディスプレイでは test.png を使用

<img src="test.png" srcset="test.png, test@2x.png 2x">

<img src="test.png" srcset="test.png 1x, test@2x.png 2x">

具体例2
・Retinaディスプレイでは 360-480.jpg を使用、非Retinaディスプレイでは 180-240.jpg  を使用

<img srcset="./images/180-240.jpg, ./images/360-480.jpg 2x" alt="CSSデモ">

<img srcset="./images/180-240.jpg 1x, ./images/360-480.jpg 2x" alt="CSSデモ">

---

Retinaディスプレイ

AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称
・「Retina」とは英語で「網膜」を意味
※Retina相当の解像度を持っているAndroidモデルも存在している

特徴
・画面解像度が高い

---

Retina対応

＝「高解像度ディスプレイ」対応

未対応だと何がマズいの？
・Retinaディスプレイで見た場合、画像がぼやけたように「荒く」見えてしまう

対応
・解像度2倍(サイズが2倍)の画像を用意
・元画像サイズを指定して表示
・例えば300pxで表示する場合、600pxの画像を用意して、HTML上で300pxにサイズを指定して表示すると綺麗な状態で表示される

---

CSS4 image-set

CSS4のimage-setを使用してRetinaディスプレイに対応する方法
・ベンダプレフィックスが必要なプロパティなので注意が必要