カテゴリー:
画像
閲覧数:800 配信日:2015-08-17 18:23
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ディスプレイに対応する方法
・ベンダプレフィックスが必要なプロパティなので注意が必要