画面幅に合わせて画像素材を切り替える：pictureで構図を選ぶ

建物の全景をスマートフォン幅へ縮めると、案内したい入口が小さくなってしまう。画面幅に合わせて画像素材を切り替える方法なら、広い画面では周囲との位置関係を、狭い画面では入口そのものを見せられます。

HTMLの画像とCSSの幅指定を少し書ける人向けに、架空の展示室の案内を作ります。ここで使う図は練習用に描いたもので、実在する建物の道案内ではありません。エディターとブラウザーを用意し、二枚のSVGと一枚のHTMLを同じフォルダへ保存します。

縮めるだけでは伝わらない情報を決める

今回伝えるのは「建物の右側にあるオレンジ色の入口」です。全景図は建物全体の中での位置が分かる構図、拡大図は入口とその周囲だけを描いた構図です。どちらにも入口が残り、同じ内容を説明できることを採用条件にします。

同じ写真を切り抜く位置の調整で十分なら、object-fitと切り抜き位置の記事の方法が候補です。今回は枠内の配置を動かすのではなく、別々に用意したファイルを選びます。画像の圧縮率を調整する課題とも異なります。

下の二枚を同じ幅で比べてください。全景には窓が三つあり、拡大図には入口の周囲だけが残っています。狭い幅で必要なのが建物全体の形なら、拡大図に替える案は採用できません。構図を切り替える前に、各素材で失われる情報も書き出します。

全景のSVGをwide.svg、拡大したSVGをdetail.svgという名前で保存します。どちらも1200×600の図です。この例は構図の選択だけを比べるため、二枚の縦横比をそろえています。

幅の条件と、画像の表示サイズを別々に書く

pictureは、画像の候補をimgへ渡すための要素です。sourceに選択条件と候補のURLを書き、最後にimgを置きます。MDNのpictureの説明にある構図の切り替えが、今回の用途に当たります。

次をentrance.htmlとして二枚のSVGと同じフォルダに保存します。画面幅が640px以上なら全景、それ以外なら拡大図です。640という境界は練習用に決めた値で、端末の種類を判定する値ではありません。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>展示室の入口｜練習</title>
<style>
body { margin: 1rem; color: #222; font-family: sans-serif; line-height: 1.8; }
main { max-width: 50rem; margin-inline: auto; }
figure { margin: 0; }
img { display: block; width: 100%; height: auto; }
a:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
</style>
</head>
<body>
<main>
<h1>展示室の入口（架空の練習）</h1>
<figure>
  <picture>
    <source media="(min-width: 640px)" srcset="wide.svg">
    <img src="detail.svg" width="1200" height="600"
         alt="建物の右側にあるオレンジ色の入口">
  </picture>
  <figcaption>右側の入口から入ります。図は説明用です。</figcaption>
</figure>
<p><a href="wide.svg">建物全体の図を見る</a></p>
</main>
</body>
</html>

mediaは候補の選択条件、CSSのwidthは選んだ画像を表示する幅です。sourceの条件を満たしても、画像を640px幅で表示するという意味にはなりません。選択に使う画面幅と、余白を引いた画像の幅を混同しないようにします。

imgのsrcには狭い幅用の図を置いています。該当するsourceがない場合にも一枚を表示でき、altもimgに一つ書きます。全景を見るリンクは、狭い画面でも周囲の配置を調べたい人が自分で開ける入口です。

候補が切り替わらないときは、sourceを調べる

一つ目の失敗は、sourceへsrc="wide.svg"と書くことです。imgと似ているため取り違えやすいのですが、picture内のsourceではsrcsetに候補を書きます。HTML仕様のpictureの項目でも、この用途のsrcには意味がないとされています。

修正後は、広い幅で再読み込みし、窓が三つある全景になるかを確認します。画像の幅が広がっただけでは合格ではありません。図の中身で、別のファイルが選ばれたかを見分けます。開発者ツールが使えるなら、imgのcurrentSrcでも選択されたURLを確認できます。

二つ目の失敗は、CSSの画像幅だけを狭くして「拡大図へ変わらない」と判断することです。このmediaは画像の箱の幅ではなく、ビューポート、つまりページを表示する領域の幅を条件にしています。修正するのは検証条件です。ブラウザーの表示領域を639pxにしてから再確認します。

実際には狭いカードが広いページ内に置かれることもあります。そのカード幅だけを見て構図を選びたいなら、この例の画面幅条件をそのまま採用できません。どこに画像を置くかを先に決め、今回の一列の案内と条件が同じか確かめてください。

二枚で意味が変わるなら、代替文も見直す

全景だけに会場名、拡大図だけに開館時間を焼き込むと、一つのaltでは両方の情報を表しにくくなります。この課題では両方とも同じ入口を説明し、日時などの案内はHTMLの本文へ置く方針です。切り替えは情報の隠し分けではありません。

同じ構図で解像度だけを変えたい場合は、imgのsrcsetなど別の候補指定を検討します。pictureを足すこと自体を画像最適化の完成条件にはしません。また、異なる縦横比の素材へ変えるなら、読み込み前の領域確保も再検討が必要です。基礎は画像の寸法指定で確認できます。

境界の前後で、ファイルと説明を照合する

15分程度を目安に、保存したページで次の確認を行います。端末名ではなく表示領域の幅を書き、読み込みが完了してから判定してください。

最後に二枚とも入口の位置がaltと矛盾しないか照合します。ファイル名が正しくても内容が逆なら修正が必要です。レスポンシブCSSの無料レッスンで画像を追加するときも、「幅が合う」と「必要な構図が選ばれる」を別々の確認欄にしてください。