きまぐれ引きこもりんご80%

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

web制作

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

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

例)画像は2倍サイズの横400px ✕ 縦200pxを用意して下記htmlコードで対応

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

これでもいいのですが、3倍、4倍には対応していませんし、CSSメディアクエリを使って振り分けるのも手間です。(←そんなに手間でもない)

HTML5.1のimgタグ「srcset」属性を使ってみる

HTML5.1からimgタグに「srcset」属性なるものが追加されたので試してみました。

まず、それぞれの画像を、原寸のサイズlogo.png、2倍サイズlogo_2x.png、3倍サイズlogo_3x.pngと書き出します。(ファイル名は任意)
そしてimgタグの「srcset」属性に、ピクセル比が等倍なら1x、2倍なら2x、という風にファイル名の後に半角開けて指定します。
(他にも数値で指定でき、480pxの時は480wという具合に指定できるようです。)

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

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

「sizes」属性

「sizes」属性値でメディアクエリを使わずとも画像表示サイズの分岐が可能です。
(「srcset」属性はあくまでもデバイスサイズにおける読み込み画像サイズの条件分岐で、実際に表示させる大きさは「sizes」属性で指定します。(※sizeではありません。))

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

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

HTML5.1はその他にもpictureタグ、sourceタグを用いることにより、htmlだけで異なる画像ファイルを分岐させることも可能になっています。詳しくは下記参考ページをご覧ください。pictureタグ、sourceタグの使用方法など分かりやすく説明されています。

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

https://ics.media/entry/13324

ちなみに、同サイトで初めて知ったのですが、iOS 10からuser-scale=noが使えなくなっていました。
要するにピンチアウトの制限ができないということです。しかも記述するとW3Cでバリデーションエラーが出てしまします・・・。

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

せっかくピンチアウト制限でレイアウトが崩れないようになっていたのになんとも迷惑な話もとい、ユーザー思いな仕様ですね(笑)