picture source レスポンシブイメージコピペで使えるHTML+CSS

picture source要素の概要
属性
1. source要素の属性
CSSデザイン @media

picture source要素の概要

レスポンシブイメージHTML5.1
<picture> <source>
目的	複数の画像を解像度や画面幅、ピクセル密度に応じて切り替える
関連	<img>

<picture> <source srcset="cat.jpg" media="(min-width: 800px)" /> <source srcset="penguin.png" media="(min-width: 400px)" /> <img src="sakura.png" /> </picture> 閲覧環境に応じて幅が800px以上では猫が表示され、400px以上ではペンギンが表示されます。そして400px未満の場合では桜の写真が表示されます。パソコンであればウィンドウの幅を広げたり狭めたりしてみて下さい。また、スマートフォンであれば縦横を切り替えて確認してみてください。<picture>と<source>を用いればHTMLのみで表示を切り替えることができます。<img>は<picture>内の<source>の後、最後に書くこと。

属性

picture要素はグローバル属性のみ

source要素の属性

※<source> を1つにして、内部でコンマ区切りをして切り替えを行う方法もありますが、可読性向上のため、複数の<source>を用いて切り替える以下のの記述方法を推奨します。カンマ区切りはピクセル密度切り替えに限定します。

media属性ごとに<source>を用意し、ピクセル密度についてその内部で切り替えます。

src

画像のURLを指定する

srcset

切り替え用の画像urlを指定する。ピクセル密度によって切り替える場合は以下のようにカンマを使って表示する。media値でまず切り替え、1.5倍、2倍のピクセル密度について切り替える。

<picture>
  <source media="(min-width: 800px)" srcset="cat.jpg,cat_1.5.jpg 1.5x,cat_2.jpg 2x"/>
  <source media="(min-width: 400px)" srcset="penguin.png,penguin_1.5.png 1.5x,penguin_2.png 2x"/>
  <img srcset="sakura.png, sakura_1.5.png 1.5x, sakura_2.png 2x" />
</picture>

if文(JAVA)によるイメージ

if(width>=800){
  if(ピクセル密度 >=2倍)  src="cat_2.jpg";
  else if(ピクセル密度 >=1.5倍) src="cat_1.5.jpg";
  else                    src="cat.jpg";
}
else if(width>=800){
  if(ピクセル密度 >=2倍)  src="penguin_2.png";
  else if(ピクセル密度 >=1.5倍) src="penguin_1.5.png";
  else src="penguin.png";
}
else{
  if(ピクセル密度 >=2倍) src="sakura_2.png";
  else (ピクセル密度 >=1.5倍) src="sakura_1.5.png";
  else src="sakura.png";
}

media

解像度（ウィンドウの幅や高さ）に応じて切り替える際に用いる。srcsetとしているが1枚の画像でも構わない。

<picture>
    <source media="(min-width: 800px)" srcset="cat.jpg" />
    <source media="(min-width: 400px)" srcset="penguin.png" />
    <img src="sakura.png" />
</picture>

if文(JAVA)によるイメージ

if(width>=800)      src="cat.jpg";
else if(width>=400) src="penguin.png";
else                src="sakura.png"

sizes

表示する割合を指定できる。100vwによってウィンドウ幅100％となる。60vwなら60％。当ページ、上の画像と幅を比較して確認してください。

<picture>
  <source media="(min-width: 800px)"
          srcset="cat.jpg 800w"
          sizes="100vw" /> 
  <source media="(min-width: 400px)"
          srcset="penguin.png 400w"
          sizes="100vw" />
  <img src="sakura.png" />
</picture>