source要素のmedia属性について

HTML

source要素のmediaについて

ウェッブサイトを制作する上で、スマホ用とPC用で画像を切り替えたいみたいなことってかなりあると思う。画像はなんやかんやとファイルサイズ食うものでもあるし、PCの方ではガツンとでかいやつ使いたいけど、それさすがにスマホで読ませるのキツイよねって言う時とか、単純にそれぞれで最適化した画像を見せたいみたいなことはざらにある。

そういう時は僕は<picture>タグを使うことにしている。

それぞれの画像に対してmediaQueryで切り分けてdisplay: noneをかけるみたいなことでも実現できるけど、その場合、display: noneになってる画像のリソースも読みに行ってしまう。表示させないのに読み込ませるのはどうなの？みたいな気持ちがあるが、<picture>タグはその心配がないし、それであれば使わない理由もない。

ちなみに背景画像をmediaQueryで切り分けて読み込ませた場合は、読んでない方は読み込まれない。<picture>もコレと一緒。そういうわけでサンプルも用意してみた。開発者ツールのNetwork > imgで読んでるリソースの確認ができる。

See the Pen mediaQuery test by bom_phage (@bom_phage) on CodePen.

display: noneのものも読み込まれてるのがわかると思う。

本題​

ところで、このsourceタグのmedia要素だけど、書き方としてはCSSと一緒。僕はCSSのメディアクエリに関してはemで記述することにしていて、ほんならこの属性値もemでいったろかいって思ったけど、それがなかなかうまくいかなかった👶🏻
ちなみにメディアクエリをemで指定することに関しては下記の記事を読んで、そうかと思ったからだ 。
[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要

とりあえずemで指定するとこんな感じ。768px未満でスマホ、以上でPCのイメージ。

<picture>
  <source media="(max-width:47.9375em)" srcset="img-sp.jpg">
  <source media="(min-width:48em)" srcset="img-pc.jpg">
  <img src="img-pc.jpg" alt=""><!-- IE用 -->
</picture>

全くダメというわけではない。なんなら普通にいけてるやんと思ってて気づかなかった。

ランドスケープの時に崩れるやんけ🧠🧠🧠

ランドスケープ(横向き)にした時、横幅は768未満のはずなのに、なぜか以上で読み込んで欲しい画像が読み込まれとる👴🏻
Safariだけでない、Chromeも、、、
この件について、明確な原因はわかってないし、調べ方がわかんなかった。エミュレータならいけるっぽい。
ランドスケープ時にはルートのフォントサイズが変わるってことなんだろうな、とか思ってた。だけど実はremは問題なく動く。これは一体、、、
まぁそういうわけで、とりあえずpxを使っとこうぜという話でした。

<picture>
  <source media="(max-width:767px)" srcset="img-sp.jpg">
  <source media="(min-width:768px)" srcset="img-pc.jpg">
  <img src="img-pc.jpg" alt=""><!-- IE用 -->
</picture>

はい。