前回、pictureタグを使って画像を切り替える「PCとスマホの画像切り替えがpictureタグで幸せになれる」という記事を書きましたが、また今度は別の記事です。使うのはsrcset属性でpictureタグでも使用しましたが、今回はちょっと簡易的な？書き方でimgタグに直接srcset属性を書くことで切り替えようってことです。
Codepenだと再現がしにくいので、実際に下記のデモでPCやスマホなどで確認すると画像が切り替わってるのが分かるかと思います。
目次
srcset属性とは？
srcset属性は、HTML5.1から追加された属性で、サイズが違う画像を条件で切り替えることができ、尚且つ閲覧している環境に適した画像のみを読みこんでくれるので、以前のようにPCとスマホの画像を設置してスマホ用はCSSで非表示にしておき、、、といった余計な作業をしなくて済みますし、画像を読み込まないので読み込みスピードにも配慮できます。
このsrcset属性は、imgタグやpictureタグ内のsourceタグ で使えます。
srcset属性の書き方
まずはsrc属性の書き方ですが、以前にも説明していますが今回はimg属性に対してsrcset属性を書いていきます。
srcset属性による画像の切り替える方法
それでは、いくつか画像を切り替える方法を記載していきます。
上記のようにimgタグの中にsrcset属性とどの画像にも対応しなかった場合のでデフォルトの画像をsrcタグに指定します。
ビューポートの幅ごとに画像を切り替える
ではビューポートの幅ごとに切り替えていきます。
ビューポートとは viewportというHTMLファイルのheadタグ内に記述するmeta要素のname属性値です。表示領域のことでありブラウザにおけるカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。詳しくはネットで調べてください。
ビューポートの幅ごとに切り替える場合は記述子の部分を「w」の単位で指定します。 ビューポート幅 が1440pxの場合は「1440w」といった感じです。
ただし、あくまでデバイスピクセル比が 「1」 であった場合になります。
仮にデバイスピクセル比が「2」だった場合は、ビューポートの幅が360の時には、2倍の「720」の画像が表示されます。
iphone7だと375pxの幅ですが、デバイスピクセル比は2倍なので、750pxとなり720px以上となるので「1440」の画像が表示されます。
デバイスピクセル比ごとに画像を切り替える
今度は、デバイスピクセル比ですが、記述子は「x」の単位となりデバイスピクセル比が2の場合は「2x」です。
今度はデバイスピクセル比が「２」の時は「img_devicepixel_2.jpg」の画像が表示されます。 今回は画像サイズを以下のようにしています。
- デバイスピクセル比が「1」の時は 360pxの画像サイズ
- デバイスピクセル比が「1.5」の時は 540pxの画像サイズ
- デバイスピクセル比が「2」の時は720pxの画像サイズ
iphone7はデバイスピクセル比が「2」なので720pxの画像サイズが表示されています。
先ほどは、ビューポートの場合は1440pxの画像サイズが表示されていました。これは「ビューポートを基準にしているか」「デバイスピクセル比」を基準にするかで画像サイズの選択が変わってますね。
まとめ
以上、簡単にsrcset属性による画像の切り替えを説明しました。
ただ他にもsizes属性tというsrcset属性とセットで使う事によりメディアクエリーなど条件によって切り替え指定できる方法もありますがそれはまた別の日に。
