北上研究所

2025年06月16日　<picture>タグの検証

Kitakami Yuma Project.のyumaです。
今回は少し実験を行いたいと思います。

実験なんてまるで『研究所』みたいですね。
あ、ここは『北上研究所』でしたね。

今回は<picture>タグの動作検証を行いたいと思います。
検証を始める前に軽く<picture>タグについて解説します。

<picture>タグとはHTMLで使われるタグで、端末に適した画像を選んで表示します。
適切なサイズや形式の画像を表示することで、サイトの表示速度を上げてくれます。

そもそもタグとはなんぞやって人はHTMLの勉強をしてから来てください。
HTMLを知らない人がここまでたどり着けるとは思えませんが。

まあ文字で説明されてもわかりにくいですよね。
では実際に使ってみましょう。

<picture>
  <source srcset="../images/DSCF3877.avif" type="image/avif">
  <img src="../images/DSCF3877.webp" alt="パソコン">
</picture>

試しにトップページの画像を持ってきました。
画像の下にあるのはそのソースコードです。

これはブラウザがAVIFに対応していたらAVIFを、そうでなければWebPを表示します。
ちなみに形式の特徴については過去の日記で紹介しています。

これと同じ要領で、表示されるサイズによって画像を変更することが可能です。
小さく表示するのにクソデカい画像を読み込むのは無駄ですからね。

またviewportという2つや3つのピクセルを疑似的に1ピクセルとして扱い、文字が小さすぎないようにする機能があります。
例えば実際には4Kのモニターを搭載しているスマホが、内部でFullHDとして扱うことで文字を大きく表示するって感じです。

とはいえviewportでFullHDといってもFullHDの画像を表示しては画像が荒くなりますよね？
そこで<picture>タグでちゃんと4Kを表示させるようにすることが可能です。

ちなみに今の説明はかなり適当です。
まあviewportは難しいから仕方ないよね。

ちゃんとした説明はMDN Web Docsとかにあるので知りたい方はそちらをご覧ください。
こんな裏サイトに情報の正確性を求めるなっつーの。

なおこの2つの仕組みの実演は流用できそうな画像がなかったので行いません。
基本横幅600pxで固定ですし画面サイズは物理的なピクセル数ですからね。

そんな便利な<picture>タグですが、疑問に思った事はありませんか？

横幅が350pxと400pxの2枚の画像を切り替えられるように設定した場合、viewportが390x844のスマホを使用した時は果たしてどちらの画像が表示されるのか。
もしviewportより小さな画像が表示されるのだとしたら、viewportが399x896のスマホでも350pxの画像が表示されるのか。
2.5ドットを1ドットとして扱うスマホがあった場合、2倍と3倍のどちらの画像を使用するのか。

僕はこれが気になりました。

というわけで検証を行っていきます。
ですが残念ながら、このページでは左のメニューが邪魔で画像を全画面にできません。

なので検証を行うために専用のページを作りました。
下の「表示する」をクリックすると検証ページに飛べます。

ちなみに画像の命名規則がここまで大量にやる前提ではないので結構無理やりだったり。
あと<source>タグに違う画像を入れることは良くないみたいですが、今回は実験なのでね。