こんにちは、阿久梨絵です！
Web制作をしていると、最近よく出てくるのが 「レスポンシブ画像」 という考え方。
その中心にあるのが srcset （ソースセット） という仕組みです。
でも、初めて触れると
「なんだか難しそう…」
「結局どう使えばいいの？」
と感じる方も多いはず。
この記事では、専門用語をできるだけ避けながら、
レスポンシブ画像の考え方と srcset の仕組みをやさしく紹介します。
そもそも“レスポンシブ画像”って何？
スマホ・タブレット・PC…
いまは画面サイズも解像度もバラバラです。
そのため、
「どんな画面でも最適なサイズの画像を表示する」
という考え方が必要になりました。
これが レスポンシブ画像 です。
なぜ必要なの？
理由はとてもシンプル。
・スマホに大きすぎる画像を送ると 重い
・PCに小さすぎる画像を送ると ぼやける
・高解像度ディスプレイ（Retinaなど）では より大きい画像が必要
つまり、
“1枚の画像で全デバイスに対応するのは無理がある”
ということです。
そこで登場するのが srcset
srcset は、
「この画像には、サイズ違いのバリエーションがあるよ」
とブラウザに伝えるための仕組みです。
ブラウザはユーザーの環境を見て、
最適な画像を自動で選んでくれます。
具体例で見ると一気に分かる
例：3サイズの画像を用意した場合
以下表記上 半角<は、全角＜を使用しています。
＜img
src=”image-800.jpg”
srcset=”
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
“
sizes=”(max-width: 600px) 400px, 800px”
alt=”サンプル画像”>
これが意味すること
・400px 幅の画像
・800px 幅の画像
・1200px 幅の画像
の3種類があるよ、とブラウザに伝えています。
そして sizes で
「画面幅が600px以下なら 400px の画像を使ってね」
と条件を指定しています。
ブラウザはこれを読み取り、
ユーザーの画面に最適な画像を自動で選びます。
ポイント①：ブラウザが“勝手に”最適化してくれる
レスポンシブ画像のすごいところは、
開発者が「どのデバイスにはどの画像」と決めなくていい
という点です。
ブラウザが…
・画面サイズ
・解像度
・ネットワーク状況
などを見て、
最適な画像を自動で選択 します。
ポイント②：高解像度ディスプレイにも対応できる
最近のスマホは 2倍・3倍の解像度 を持っています。
そのため、
「見た目は400pxでも、実際には800pxの画像が必要」
というケースがよくあります。
srcset はこの問題も解決できます。
解像度別に画像を用意する例
以下表記上 半角<は、全角＜を使用しています。
＜img
src=”image.jpg”
srcset=”
image.jpg 1x,
image@2x.jpg 2x,
image@3x.jpg 3x
“
alt=”サンプル画像”>
これで Retina でもくっきり表示できます。
ポイント③：ページが軽くなる
スマホに1200pxの画像を送る必要はありません。
srcset を使うことで
必要なサイズだけを配信できるため、ページが軽くなります。
・表示速度が上がる
・データ通信量が減る
・SEOにも良い影響
メリットだらけです。
どう使い分ければいいの？
幅に応じて画像を変えたい
→ w（幅）指定の srcset + sizes
解像度に応じて画像を変えたい
→ x（倍率）指定の srcset
どちらも必要
→ 両方組み合わせる
まとめ
レスポンシブ画像の考え方は、
「ユーザーの環境に合わせて、最適な画像を届ける」
という、とてもシンプルなものです。
・スマホには軽い画像
・PCには大きくてきれいな画像
・高解像度には専用画像
・すべてブラウザが自動で選択
srcset はそのための仕組みです。
画像最適化は、
ユーザー体験にもSEOにも大きく影響する大切なポイント。
少しずつ取り入れていくと、サイトがぐっと快適になります。
阿久梨絵でした！
