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

コメントを残す

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

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。