srcsetはあくまで同じ見た目の画像に使う
srcsetは画像を○倍にという用途にしか適さない
<img src="img320.jpg" srcset="img640.jpg 640w, img320.jpg 320w" sizes="(max-width:640px) 100vw, 640px"
alt="">
srcsetの中で画像パス、画像ファイルの横幅を記述。
単位はpxでなくwを用います。
320w=1x、640w=2xみたいな書き方もできる。
sizes属性で画像をウェブページ上で表示する際の横幅を指定
※「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無いことに注意してください。
※srcsetはページを読み込んだ段階で画像を選定
ウィンドウ幅を縮小したときに切り替えたいなら
pictureを使う。
各ブラウザのsrcset仕様
- Chrome : 大きなサイズの画像ファイルをキャッシュした場合、画面幅を狭めても小さい画像は読み込まれない
- Firefox : 画面幅を変える度に、画面幅に適したサイズの画像を読み込む
- Safari : 最初に開いた画面幅に応じた画像ファイルがキャッシュされ、画面幅を変えても画像は再読み込みされない
※追記
Firefox、Safariでは動作が不安定
pictureは違う画像にも対応
pictureはsrcsetとは違いsp時のみ見た目が違う画像にできたりする。
ただしie11を考慮するとポリフィルを導入しなくてはいけない
<picture>
<source srcset="img640.jpg" media="(max-width:640px)">
<img src="img320.jpg" alt="">
</picture>
メディアクエリを指定できるのでサイズの大きい順に記述し、最後にimg要素を記述します。
まとめ
srcsetは色々不安定なので
picture使うがいいかも
pictureを使う際はポリフィルを忘れずに！
めんどくさかったらclassで画像を出し分けてください