ウィンドウサイズでの切り替えと
画面解像度での切り替えを組み合わせる
サンプルコード
<picture>
<source media="(min-width:768px)" srcset="/sumple-large.jpg 1x,/sumple-large@2x.jpg 2x">
<source media="(max-width:767px)" srcset="/sumple-small.png 1x,/sumple-small@2x.png 2x">
<img src="/sumple-small.jpg" class="sumple" alt="sumple">
</picture>
解説
1x、2x
Retinaディスプレイ対応、画面解像度で画像の切り替え
1x:1倍、2x:2倍
1.5、3、など必要に応じて指定すれば使える
media
メディアクエリ、画像を切り替える画面幅の指定
img
srcsetが使えない場合表示する画像を指定
※imgはsourceの後に記述しないと、sourceが読み込まれないため注意
・media=”(min-width:768px)” srcset=”/sumple-large.jpg 1x,/sumple-large@2x.jpg 2x”
ウィンドウサイズが768以上の画面解像度が違う場合の2枚を指定
・media=”(max-width:767px)” srcset=”/sumple-small.png 1x,/sumple-small@2x.png 2x”
ウィンドウサイズが767以下の画面解像度が違う場合の2枚を指定
alt
sourceで指定された画像に共通のaltを入れる
コメントを残す