レスポンシブイメージ

レスポンシブイメージ

  • 複数の画像ソースを用意して、デバイスに合わせて最適な画像をソースが読み込まれるようにします
srcset属性とsizes属性
  • srcset属性は、ブラウザが選択する画像の候補を列挙するためのものです
  • その際、画像ファイルとともに、選択の基準となる情報を付加します
  • 付加できる情報は2種類です

画像の利用に適したdensity
f:id:web-0220:20180708211419p:plain

  • src属性では下位互換用の画像を指定しています

画像の横幅
f:id:web-0220:20180708211541p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>srcsetの設定</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="logo">
<h1>
<img srcset="img/logo-1x.png 1x, img/logo-2x.png 2x, img/logo-3x.png 3x, img/logo-4x.png 4x"
     src="img/logo-1x.jpg" alt="@logo">
</h1>
</div>
</body>
</html>

f:id:web-0220:20180709003952p:plain(100 x 43ピクセル
f:id:web-0220:20180709004007p:plain(200 x 86ピクセル
f:id:web-0220:20180709004017p:plain(300 x 129ピクセル
f:id:web-0220:20180709004027p:plain(400 x 172ピクセル

image-set()
  • image-set()は、ブラウザが選択する背景画像の候補を列挙するためのものです
  • img要素の secset属性と同じように、画像ファイルとともに、選択の基準となる情報を付加します
  • 付加できる情報は1種類です

画像の利用に適したdensity
f:id:web-0220:20180708212313p:plain

<div class="logo">
<h1><span>@logo</span></h1>
</div>
.logo span {
  width: 100px;
  height: 43px;
  background-image: url(img/logo-1x.png);
  background-image: -webkit-image-set( 
    url(img/logo-1x.png) 1x, 
    url(img/logo-2x.png) 2x, 
    url(img/logo-3x.png) 3x, 
    url(img/logo-4x.png) 4x  );
  background-size: 100% 100%;
  background-position: 0% 0%;
  display: inline-block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

例外処理

  • srcset属性や image-set() による指定では、最適な画像を選択する処理をすべてブラウザに委ねることになります
  • 特定のデバイスの時だけ別の画像を選択するといった処理を指定することはできません
  • 例外処理を組み込みたい場合は、picture 要素を使ったレスポンシブイメージの処理を用意する必要があります
picture
  • picture 要素は、画像の候補を列挙するためのものです
  • source要素の srcset属性で画像の候補を指定し、media属性でメディアクエリを利用して選択の条件を指定します

f:id:web-0220:20180708224902p:plain

developer.mozilla.org

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>


ポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える

cdnjs.com

  • Picturefill.jsはフォールバックが必要になることもあり、完璧にレスポンシブイメージを再現してくるわけではありません

課題

広告を非表示にする

求職者支援訓練 フェリカテクニカルアカデミー