読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【<img>タグのレスポンシブ&Retina】

f:id:wp-lesson:20170221111244p:plain

<img>タグを画面サイズに応じてレスポンシブに切り替え、
なおかつiPhoneのようなRetinaディスプレイの場合は高解像度版の
画像を選択的に読み込ませる方法です。

<picture>
<source media="(min-width: 768px)" srcset="images/main_visual_l.jpg">
<source media="(min-width: 320px)" srcset="images/main_visual_m.jpg 1x,images/main_visual_m@2x.jpg 2x">
<img src="images/main_visual_l.jpg" alt="" class="img-responsive retina">
</picture>

 

<解説>

768px以上(PCとタブレット
⇒main_visual_l.jpgを表示
 
320px~767px(スマホ
Retinaディスプレイならmain_visual_m@2x.jpgを表示
Retinaディスプレイならmain_visual_m.jpgを表示
 
<picture>タグ非対応のブラウザなら<img>タグを表示
 
IE11が<picture>タグ非対応なので<img>タグには
PC用の画像を割り当てておきます。

<この方法のメリット>

CSSJavascriptによって画面サイズごとに画像を切り替える方法では、
いったんサーバーからブラウザに各サイズの画像データを読み込むので、
PCはともかくスマホでは負荷がかかります。

この方法なら、最初から画面サイズや解像度に適した画像データだけを
ブラウザが選択的に読み込んでくれるので、無駄な通信負荷がありません。