HTMLのタグのみで画像をメディアクエリーする
HTMLのタグのみで画像をメディアクエリーする
imgタグのみを使う場合
srcset属性とsizes属性を使う。width=”” height=””は書かない。
この方法ではsample.pngが一度読み込まれたらビューポートを変更しても他の画像は再読込みされない点に注意。
|
1 2 3 4 5 |
<img srcset="images/sample.png 616w" // ブラウザに画像のサイズを通知(単位表記はw = px) sizes="(max-width: 1000px) calc(100vw - 40px), 616px" // 画面表示サイズ。1000pxまでは画面横幅いっぱい(100vw = 100% calcはmargin分を引く計算の例)で。それを下回ったら616pxで描画。 // ※width="" height=""は書かない。 > |
picture sourceタグを使って。
ビューポート毎にsourceタグに対してmedia属性・srcset属性・sizes属性を、最後にimgタグは通常通り書く。
この方法ではビューポートを変更したら該当の画像が再読込みされる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="pic"> <picture> <source media="(max-width: 375px)" srcset="images/sample-185x36.png 185w" // 用意したサイズ違いの画像 sizes="calc(100vw - 40px)" > <source media="(max-width: 750px)" srcset="images/sample-308x60.png 308w" // 用意したサイズ違いの画像 sizes="calc(100vw - 40px)" > <source media="(min-width: 751px)" srcset="images/sample-616x120.png 616w" // 用意したサイズ違いの画像 sizes="calc(100vw - 40px)" > <img srcset="images/sample-616x120.png" width="616" // ※ height="120" // ※ > </picture> </div> |
※width=”” height=””指定はなくても意図した描画に切替わるが、Google PageSpeed Insightsでは怒られる。その対策としてwidth=”” height=””指定をするが、 それではsourceタグのsizesが効かずimgタグの指定に固定されてしまうので、別途CSSで補う。
補充用のCSSの例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.pic img { display: block; width: 100%; // 小さい画像を表示するものにはこちらを当てる height: auto; } @media only screen and (min-width: 751px) { .pic img { display: block; width: 616px; height: 120px; } } |
Retina対応は？
sourceタグのsrcset属性に実画像サイズ(640w)とRetina指定(2x)を両方記述することはできない。
画像サイズの変更は必要ない場合なら(Retina対応含む)、 srcsetに「,」区切りで倍率ごとに記述する。画像サイズを変えないのでsourceタグのmediaやsizesは不要。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<picture> <source srcset=" images/sample-320w.jpg, images/sample-480w@1.5.jpg 1.5x, images/sample-640w@2x.jpg 2x" > <img src="images/sample-640w.jpg" alt="サンプル" width="320" height="213" > <picture> |
Retina対応も画像サイズも欲張りたいなら、sourceタグを分けて記述する。 前述の理由でスタイルシートも併用するのがベター。1x, 2xは書かないが、srcsetに指定する画像をRetina用のものにすることで実質的にRetina問題も解決できる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<picture> <source media="(max-width: 640px)" srcset="images/sample-640w@2x.jpg 640w" // x2の指定はしないが画像はそれ用をあてて、 sizes="calc(100vw - 16px)" // ここで表示サイズを指定する > <source media="(min-width: 641px)" srcset="images/sample-320w.jpg 320w" sizes="320px" > <img src="images/sample-320w.jpg" alt="サンプル" width="320" height="212" > </picture> |
コメント
コメントはありません。