今回はレスポンシブ画像の表示方法についてです。
HTML5からimgタグで複数の画像を選択できる2つの新しい属性ができました。
それは「srcset」 と 「sizes」属性です。
具体的なコード
<img srcset="img/train1_small.jpg 300w,img/train1.jpg 1000w" sizes="(max-width:56.25em) 20vw,(max-width:37.5em) 30vw,300px" alt="train" class="photo" src="img/train1.jpg">
srcset属性の使い方
srcset属性を使うと複数の画像を指定することができます。
けれども、srcset属性で指定できるのは複数の画像を指定するだけで、どのような場合にどの画像を表示するかを決めるものではありません。そこを勘違いしなければ理解しやすいと思います。
簡単に言うと表示に必要な画像ファイルを複数仕込んだということです。
＊ただし、デバイスピクセル比を指定した場合は閲覧するデバイスのデバイスピクセル比に応じた画像が表示されます。（詳細は後述）
srcset=”1枚目の画像ファイル名 画像のサイズ（w）,2枚目の画像ファイル名 画像のサイズ（w）”
幅のピクセル数の単位は w です。
画像の指定はカンマ区切りを増やすと複数の画像設定ができます。
けれども、このままではどの画像をどのような時に表示すべきかわかりません。
そこで「sizes属性」の記述が必要になります。
デバイスピクセル比で画像を切り替える方法
デバイスピクセル比で画像を切り分ける場合は、srcset属性だけで切り分けできます。
デバイスピクセル比で切り分ける場合は画像サイズの代わりにデバイスピクセルの倍数を1xや2xのように記述します。
srcset=”1枚目の画像ファイル名 1x,2枚目の画像ファイル名 2x”
sizes属性の使い方
sizes属性は画面の幅サイズなどで決まる条件を決めるものです。条件が成立したときに、どの寸法の画像を表示するか決めるものです。この条件を決める方法としてメディアクエリを用います。
sizes=”(max-width:指定サイズ) メディア条件が成立したときに埋めるスロットの幅,(min-width:指定サイズ) メディア条件が成立したときに埋めるスロットの幅”
max-width,min-widthは条件次第で変わります。
スロットの幅の指定がポイントになります。
選択したスロットサイズに最も近い 「srcset属性」で記述した画像を読み込むことになります。
ブラウザーは最初に一致した条件の後はすべて無視しますので、メディア条件の順序に注意する必要があります。
スロットサイズに最も近い というアバウトな指定がなんとも微妙でこの仕組みを分かりにくくしているようです。けれどもそれがまた便利なところでもあります。
アートディレクション
レスポンシブ画像におけるアートディレクションとは、画面サイズに応じて画像の表示内容を変更することです。
例えばPC用の広い画面ではモデルが背景と調和した内容だとしましょう。けれどもスマホの狭い画面では、モデルのアップ写真が表示されてモデルが強調されるような図柄に変更される。そんな使い方をする方法のことです。
アートディレクションを行うには、picture要素を使用します。
例えば次のような事例を考えて見ます。
要件
1、デバイスピクセル比が1でなおかつ、600px未満の場合はdog01.pngを表示
2、デバイスピクセル比が1でなおかつ、600px以上になるとdog02.pngを表示
3、デバイスピクセル比が2でなおかつ、600px未満の場合dog01_big.pngを表示
4、デバイスピクセル比が2でなおかつ、600px以上の場合dog02_big.pngを表示
サンプルページ
HTMLコード
<picture><source media="(min-width:600px)" srcset="img/dog02.png 1x,img/dog02_big.png 2x"><img srcset="img/dog01.png 1x,img/dog01_big.png 2x" alt="" src="img/dog_01.png"> </picture>
sourceタグにはmedia属性を入れることができます。したがって600px以上の条件のブレイクポイントを入れます。「media=”(min-width:600px)”」
これでこのsourceタグの内容は「600px以上」の条件をつけることができました。
次にsrcset属性で表示する画像の候補を指定します。
「600px以上」の条件では、デバイスピクセル比が1の場合にdog02.pngを表示し、
デバイスピクセル比が2の場合にdog02_big.pngを表示したいので「srcset=”img/dog02.png 1x,img/dog02_big.png 2x”」と記述します。
これはsrcsetで指定した画像に対してデバイスピクセル比を1xや2xの形式で指定した場合、表示する画像の候補を指定しただけではなく、デバイスにあったデバイスピクセル比に指定した画像が表示される仕組みになっています。
今回のサンプルでは、デバイスピクセル比が1でなおかつ、600px以上になるとdog02.pngを表示され、デバイスピクセル比が2でなおかつ、600px以上の場合dog02_big.pngを表示されます。
「600px未満」の条件では明示的に指定は書いていませんが、imgタグの srcset属性で次のように指定することでうまくいきます。
「srcset=”img/dog01.png 1x,img/dog01_big.png 2x”」
600px以上の条件にはsourceタグの記述に従って処理されます。
600px未満だとsourceタグの記述ではどうして良いかわからないので今度はimgタグの記述を確認します。
imgタグにはsizes属性がありませんので、ブラウザはimgsetの指定に従って表示をしようとします。
「srcset=”img/dog01.png 1x,img/dog01_big.png 2x”」と記述していますので、デバイスピクセル比が1のデバイスでは、「dog01.png」が表示され、
デバイスピクセル比が2のデバイスでは、「dog01_big.png」が表示されます。
尚、imgタグ内の「src=”img/dog_01.png”」の記述はsourceタグの設定やsrcset属性を認識できないブラウザ用のものです。
CSSのメディアクエリだけでは画像ファイル自体を変更することができませんが、pictureタグを使ったレスポンシブ画像は画像のファイル自体を変更することができてデバイスごとに表示する画像の内容を変えることができるのです。
このことからこの方法をアートディレクションと呼ぶようになったものです。
コメントを投稿するにはログインしてください。