さっそくHTML 5.1 「srcset」属性を使ってみた

今までモバイルサイトを制作する時、
Retina対応するために
画像を2倍のサイズに書き出して、
imgタグのwidth属性とheight属性で原寸の指定をしていました。

例)

<img src="logo.png"
width="200" height="100"
alt="logo">

画像は2倍の横400px ✕ 縦200pxで書き出す。

モバイルサイトのみの場合はこれでいいのですが、
それ以外はCSSでメディアクエリを使って
振り分ける必要がありました。

「srcset」属性

ところが先日、HTML5.1がリリースされ
imgタグに「srcset」属性なるものが追加されたので
早速試してみました。

それぞれの画像を、原寸のサイズ「logo.png」、
2倍サイズ「logo_2x.png」、3倍サイズ「logo_3x.png」と書き出し

htmlで

<img src="logo.png"
srcset="logo.png 1x,
logo_2x.png 2x,
logo_3x.png 3x">

これだけです。
CSSを使用しなくても
各々のデバイスピクセル比に振り分けることができて、
すごく便利です。

この「srcset」属性、
ピクセル比が等倍なら1x、2倍なら2x、という風に
ファイル名の後に半角開けて指定するだけ。
他にも数値で指定でき、480pxの時は480wという具合に指定できるようです。

「sizes」属性

注意点は
「srcset」属性はあくまでも
デバイスサイズにおける条件分岐で、
実際に表示させる大きさは
「sizes」属性で指定します。
(※sizeではありません。)

「sizes」属性値画像表示サイズの分岐も可能です。

例えば、480px以下のデバイスは画像を幅100%表示にして、
それ以外のデバイスは画像の幅を480pxにする場合は以下のとおりです

sizes="(max-width: 480px) 100vw, 480px"

以上を踏まえて、
さっそくトップページに適用してみました。
http://goodsan.jp

HTML5.1はその他にも
pictureタグ、sourceタグを用いることにより、
htmlだけで画像ファイル自体を分岐させることも可能になっています。

今回、参考にさせて頂いたページ

https://ics.media/entry/13324
pictureタグ、sourceタグの使用方法など
分かりやすく説明されています。

ちなみに、それと併せて同サイト
初めて知ったのですが、
iOS 10からuser-scale=noが使えなくなっていました。
要するにピンチアウトの制限ができないということです。

<meta name="viewport"
content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">

ピンチアウトされてレイアウトが崩れないように
毎回デフォルトで用いていた私にとっては
なんとも迷惑な話
もとい、ユーザー思いな仕様ですね(笑)

SNSでもご購読できます。