ファイルの重さはほぼ画像が占めているのだとか。
その画像を、ユーザーの画面幅やデバイスの解像度に沿って最適になるよう設定しておくことで、できるだけ軽いwebサイトにすることができます！
この記事について
レスポンシブイメージでの、３つの方法をまとめます。
最初にhtmlのimageタグに書くレスポンシブイメージの説明をして、最後にbackgroundイメージのレスポンシブイメージ対応について記載します。
レスポンシブイメージの３つの方法
１、density switching （density...密度）
2、art direction
3、resolution switching （resolution...解像度）
1, density switching
一番シンプルな方法です。
低解像度ディスプレイか、高解像度ディスプレイ(retina displayなど）かによって画像を出し分けます。
下記のように記載すると自動的に低解像度か高解像度かを判断して出し分けてくれます。
<img srcset="img/logo-1x.png 1x, img/logo-2x.png 2x">
1xは低解像度、2xは高解像度で、1xの二倍サイズの画像を用意しておくと良いです。
2, art direction
全く異なる画像を出し分けたいときに使用します。
<picture class="footer__logo">
<source media="(max-width: 37.5em)" srcset="img/logo-small-1x.png 1x, img/logo-small-2x.png 2x">
<img srcset="img/logo-1x.png 1x, img/logo-2x.png 2x">
</picture>
pictureタグで、sourceタグとimgタグを囲います。
sourceタグのメディアクエリで、max-width: 37.5em以下(600px以下)なら、sourceタグのsrcsetが適用されます。
上記に当てはまらない場合(601px以上)はimgタグが適用されます。
3, resolution switching
そもそもブラウザが理解できる情報は、現在のビューポートとpixel density(1xか2xかなど)です。
その情報にプラスして、画像の横幅や何％を画像が占めるかを書いてあげると、ブラウザがその情報に従って画像を出し分けてくれます。
srcset...画像のパスと幅を記載します。下記の例では横幅300pxと1000pxの画像を用意しています
size...ビューポートが◯pxの時は、横幅100%に対して◯%を画像が占めているという意味のコードを書きます。大体の％でOKです
<img srcset="img/photo.jpg 300w, img/photo-large.jpg 1000w"
size="(max-width: 900px) 22vw, (max-width: 400px) 30vw"
src="img/photo-large.jpg">
TIPS
昔のブラウザーではsrcsetを読み込まなかったりするので、全てsrcも追加しておくと良いです。
<img srcset="img/logo-1x.png 1x, img/logo-2x.png 2x src="img/logo-2x.png">
backgroundイメージ
メディアクエリで書きます。
下記は、大きい画像(横幅2000px)と小さい画像(横幅1200px)の二つ用意したと想定して、
retinaディスプレイスクリーンかつ600px以上、または2000px以上の時に大きな画像が当たるように書いています。
メディアクエリでは、min-widthなどと同じようにresolution(解像度)も指定できます。
ただ、safariではmin/max-resolutionがサポートされていないので、(-webkit-min-device-pixel-ratio: 2)のようにプレフィックスを書きます。
（192dpiは、retinaディスプレイスクリーンという意味）
,で繋ぐとORと同じ意味になります。
@media (min-resolution: 192dpi) and (min-width: 600px),
(-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
(min-width: 2000px) {
background-image: url(../img/hero.jpg);
}