srcsetを使ってimg要素の画像を切り替える

■srcsetとは

srcsetはHTML5で策定された新属性
この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる

■img要素の表示方法は3通り

１つ目：「max-width:100%」を使ったフルードイメージ
設定は一番簡単、幅と同じ比率で高さも低くなる。

２つ目：「object-fit」

幅も高さも自由に指定、img要素の親要素に表示させたい幅と高さを指定、img要素には「object-fit:cover」と幅と高さの指定が必須、object-positonを使う事で画像の表示位置を変更可。

「aspect-ratio」と合わせて使う事で利便性が向上。

３つ目：「srcset」

画面幅によって表示させるimg要素を切り替える事が出来る。

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。

picture要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
picture要素は複数のsource要素と一つのimg要素で構成されます。source要素には3つの属性が指定可能です。
※必ずimg要素が必要です

source要素

<picture>
　<!–641px以上の時に表示したい画像の指定–>
　<source media=”(min-width:641px)” srcset=”img/pc.jpg 960w” sizes=”100vw”>

　<!–640px以下の時に表示したい画像の指定–>
　<img media=”(max-width:640px)” srcset=”img/sp.jpg 640w” sizes=”100vw” alt=””>
</picture>

★media属性

mediaにはCSSと同じようにmax-widthやmin-widthを指定します。

例えば768pxまでPC用画像を表示したかったら以下のように指定します。

media=”(min-width:760px)”

★srcset属性

srcsetには画像ファイルのパスと画像ファイルの横幅を指定します。

「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。横幅の単位はpxでなくw（幅記述子）を用います。

srcset=”img/main1.jpg 960w“

★sizes属性

表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅が指定可能です。
例：ディスプレイ幅が960px以上の時は画像幅は960px、それ以下ではディスプレイ幅と同じ画像幅で表示したい場合は次のように記述します。

sizes=”(max-width:960px) 100vw, 960px”

※CSSでフルードイメージや%指定がされている場合は以下のように簡易的な物でも表示出来ます。

sizes=”100vw”

size属性を省略した場合

bodyが1200px以上の時は1200px幅のpc用画像を画面中央に表示
bodyが1200px~768pxの時はpc用画像をフルードで表示
bodyが767px以下の時はsp用画像をフルードで表示

<picture>
　<!–768px以上の時に表示したい画像の指定–>
　<source media=”(min-width:768px)” srcset=”pc.jpg 1200w”>

　<!–767px以下の時に表示したい画像の指定–>
　<img srcset=”sp.jpg 767w” alt=””>
</picture>

size属性を指定した場合

bodyが1200px以上の時は1200px幅のpc用画像を画面中央に表示
bodyが1200px~960pxの時はpc用画像をフルードで表示
bodyが959px~768pxの時はタブレット用画像をフルードで表示
bodyが767px以下の時はsp用画像をフルードで表示

※imgにフルードイメージの設定を必ず指定