継続は力なり＃４８

条件に合致したときに使う画像について詳細に指定する方法

sizes属性を使うと、メディアクエリーの条件に合致したときの表示幅が指定できる
しかし条件に合致したときに使用する画像ファイルまでは指定できない。
例として、スマートフォン用とパソコン用では異なる画像（例えばトリミングの仕方を変えた画像など）を表示させたいような場合には、それでは困ってしまうことになる
メディアクエリーの条件ごとに使用する画像やそれがどのピクセル密度向けか、といった情報を細かく指定したい場合には、次のように picture要素 の中に source要素 と ing要素 を入れて使用する

例

HTML

<picture>
   <source media="(min-width: 1200px)" srcset="pic1200.jpg, pic2400.jpg
2x">
   <source media="(min-width: 800px)" srcset="pic800.jpg, pic1600.jpg
2x">
 <img src="pic500.jpg" srcset="pic1000.jpg 2x" alt="写真：ホタルブクロ">
</picture>

CSS

body {
   margin: 0;
}
img {
   display: block;
   margin: 0 auto;
}
 
@media screen and (min-width: 1200px) {
   img { width:1200px; }
}
 
@media screen and (min-width: 800px) and (max-width: 1199px) {
   img { width: 800px; }
}
 
@media screen and (max-width: 799px) {
   img { width: 100vw; }

source要素は、picture要素内にいくつでも配置でき、media属性で条件が指定できる
それらの条件のうち、最初に合致したsource要素だけが有効になる仕組みになっている
source要素内には、img要素と同様にsrcset属性とが指定できる（※１）
srcset属性の値のうち、「○x」も「○○○w」も付けられてない画像ファイルは、「１x」として処理される
picture要素内の最後には、必ずimg要素を１つだけ配置する決まりになっている
そうすることで、どの条件にも合致しなかったときに表示させる画像として機能させられるだけでなく、picture要素とsource要素に未対応の環境でも画像が表示されるようになる

前のページにサンプルをブラウザで表示させ、表示領域の幅を変更すると、表示される画像も以下の画像のように変化する
（画像が切り替わったことがわかるように、各画像には縦横のピクセル数を記入してある）
これらのスクリーンショット画像はピクセル密度が2倍のパソコン画面で撮ったものなので、どれも「２x」で指定した方の画像（※２）が表示されている



（※１）
picture要素内に配置されたsource要素には、src属性は指定できない点に注意
同じsource要素でも、video要素またはaudio要素に配置されたsource要素には、src属性が指定できる仕様になっている

（※２）
画像ファイルの名前の「pic」の後の数字は、画像の横幅のピクセル数を表している