【Retina対応】画像をレスポンシブに切り替える方法【picture srcset】

ウィンドウサイズでの切り替えと
画面解像度での切り替えを組み合わせる

サンプルコード

<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を入れる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です