写真も変身！レスポンシブな画像

Webサイトのアイドル「画像」もレスポンシブに！

Webサイトに写真やイラストなどの「画像」は欠かせないよね！ だけど、ただ画像をポンと置いただけだと、画面の大きさが変わったときに困ったことが起きるんだ。

そう、画像だってレスポンシブデザインの仲間入りが必要なんだ！ このページでは、画像を画面サイズに合わせて賢く表示するためのテクニックを学んでいこう。

技その１：基本中の基本！CSSの「画像の暴走ストッパー」

まず紹介するのは、一番シンプルで、どんなWebサイトでもまずやっておくべき基本の技だよ。CSSたった2行で、画像が親要素からはみ出すのを防ぐことができるんだ。まるで「画像の暴走ストッパー」だね！ 

img {
  max-width: 100%;
  height: auto;
}

デモ：max-width: 100% の効果を見てみよう！

下のスライダーを動かして、ピンクの枠（コンテナ）の幅を変えてみて。中の画像が枠の幅に合わせて縮小されるけど、枠からはみ出さないのが分かるかな？画像は元のサイズより大きくはならないよ。

コンテナの幅: 80% (ウィンドウ幅の80%)

サンプル風景画像

この方法はとっても簡単で効果的なんだけど、一つだけ注意点があるんだ。それは、「常に一番大きな画像（例えばパソコン用の高解像度な画像）を読み込んでしまう」ということ。 スマホで見る人にとっては、そんなに大きな画像は必要ないのに、たくさんのデータを使ってしまうことになって、表示が遅くなる原因にもなっちゃうんだ。

この問題を解決してくれるのが、次からのテクニックだよ！

技その２：画質もデータ量も最適化！HTMLの「画像の変身クローゼット」 – <picture>要素

次に紹介するのは、HTMLの<picture> (ピクチャー) 要素！ これはまるで「画像の変身クローゼット」みたいに、見る人の画面サイズや条件に合わせて、クローゼットの中から一番ピッタリな服（画像）を選んで着せてくれるんだ。

<picture>要素を使うと、例えば「広い画面ではこの大きな画像を、中くらいの画面ではこの中くらいの画像を、狭い画面ではこの小さな画像を」というように、複数の画像候補を用意しておいて、ブラウザに最適なものを選ばせることができるんだ。 これなら、スマホユーザーに不要な大きな画像を送りつけなくて済むし、画面サイズによって全く違う構図の画像を見せる「アートディレクション」も可能になるよ！

<picture>要素の基本的な使い方

<picture>
  <!-- 画面幅が900px以上なら、この画像を使う -->
  <source media="(min-width: 900px)" srcset="image-large.jpg">

  <!-- 画面幅が600px以上 (で900px未満) なら、この画像を使う -->
  <source media="(min-width: 600px)" srcset="image-medium.jpg">

  <!-- 上のどの条件にも合わなかった場合や、古いブラウザ用の画像 -->
  <img src="image-small.jpg" alt="説明文はここに書くよ">
</picture>

デモ：<picture>要素で画像が切り替わる！

ウィンドウの幅を変えてみて！表示される画像（の色やテキスト）が変わるのが分かるかな？これはブラウザが最適な画像を選んでくれている証拠だよ。

画面幅に応じて切り替わるデモ画像

実際のWebサイトでは、ここに見た目が違う画像や、サイズが違う画像を指定するんだ。

技その３：解像度にも対応！「ブラウザにおまかせ！賢い画像セレクター」 – srcsetとsizes属性

<picture>要素は主に「アートディレクション（見た目が違う画像を見せる）」や「特定のブレークポイントで画像を切り替える」のに向いているんだけど、同じ画像でも画面の解像度（Retinaディスプレイみたいに高精細かどうか）や、その画像が実際に表示される大きさに合わせて、もっと賢く画像を選んでほしい！ってこともあるよね。

そんなときに使うのが、<img>タグ自身に付けることができるsrcset (ソースセット) 属性と sizes (サイズズ) 属性なんだ。これらは「ブラウザにおまかせ！賢い画像セレクター」みたいに機能するよ。

この２つの情報と、見ている人のデバイスの画面密度（Retinaかどうかなど）を総合的に判断して、ブラウザが「よし、この状況ならこの画像が一番ムダなくキレイに見えるな！」という一枚を選んで表示してくれるんだ。すごいよね！ 

<img
  srcset="image-480w.jpg 480w,
          image-800w.jpg 800w,
          image-1200w.jpg 1200w"
  sizes="(max-width: 500px) 100vw,
         (max-width: 900px) 70vw,
         calc(33vw - 100px)"
  src="fallback-image.jpg"
  alt="賢く選ばれる画像">

このテクニックは、ブラウザが裏で賢くやってくれるので、見た目のデモは難しいけど、開発者ツール（ブラウザの機能）で見ると、どの画像が選ばれたか確認できるよ。 <picture>要素が「この条件ならこの画像！」と明確に指示するのに対して、こちらはブラウザに判断材料を渡して「よしなに頼む！」という感じだね。

技その４：いつでもシャープ！「魔法のペンで描いた絵」 – SVG画像

最後に紹介するのは、ちょっと種類の違う画像形式「SVG (スケーラブル・ベクター・グラフィックス)」だよ。これは、写真みたいなピクセルの集まりじゃなくて、点や線、形といった情報を数値データで記録する「ベクター形式」の画像なんだ。まるで「魔法のペンで描いた絵」みたいだね！

SVGのすごいところは…

ロゴ、アイコン、簡単なイラストや図形なんかにはSVGがピッタリだよ。写真みたいな複雑な表現には向いていないけどね。 SVGファイルは、普通の画像みたいに<img>タグで読み込めるし、HTMLの中に直接SVGのコードを書き込むこともできるんだ。

デモ：SVG画像を見てみよう！

下の２つの図形はSVGだよ。左はimgタグで、右はHTMLに直接SVGコードを埋め込んでいる。ウィンドウサイズを変えても、くっきり表示されるはず！

スマイリーフェイスのSVGアイコン

SVGを使えば、ロゴやアイコンがどんな画面でもキレイに表示されるよ！

まとめ：画像も賢くレスポンシブ！

これで、画像もレスポンシブデザインの仲間入りさせるための色々な技を学んだね！

どのテクニックを使うかは、画像の役割やWebサイトの目的によって使い分けていこう。 これで、写真やイラストも、どんな画面で見ても美しく、そして効率的に表示できるようになったはずだ！

次は、Webサイトの読みやすさを左右する「文字（タイポグラフィ）」をレスポンシブに対応させる方法について学んでいくよ。文字だって、画面に合わせて読みやすく変身させよう！