画像のレスポンシブ対応

更新


ひと昔前まで、ウェブに画像を表示するにはこの一行で十分でした。

<img src="image.jpg" alt="画像の説明が入ります">

それが、レスポンシブデザインや高解像度ディスプレイの普及に伴って、今やここまで複雑なことになっているようです。

ここまで凝らなくても現実的には、パソコン版とスマホ版で画像を分けたり、Retinaなどの2倍の解像度ディスプレイ用の画像を用意するくらいで十分なことが多いのではないでしょうか。

現実的なマークアップ

私がよく使うのは、この書き方です。

<picture>
  <source srcset="sp-image.jpg, sp-image@2x.jpg 2x" media="(max-width: 767px)">
  <img src="pc-image.jpg" srcset="pc-image@2x.jpg 2x" alt="画像の説明が入ります" class="image" />
</picture>

指定している画像はそれぞれ、

の役割になっており、この記述で次のことが達成できます。

classalt などの属性は、 <img> タグの方に付けます。画像にリンクを張りたい場合は、 <picture> 要素全体を <a> タグで囲みます。

解像度対応を省略する場合

ぼやけてもそれほど気にならない画像など、解像度対応をしない場合は次のように書きます。

<picture>
  <source srcset="sp-image.jpg" media="(max-width: 767px)">
  <img src="pc-image.jpg" alt="画像の説明が入ります" class="image" />
</picture>

スマホとパソコンで同じ画像を使う場合

スマホとパソコンで画像を分ける必要がなければ、 <img> のみを使います。

<img src="image.jpg" srcset="image@2x.jpg 2x" alt="画像の説明が入ります" class="image" />

参考リンク


コメント