Picture 要素のテスト

実験1: media属性を使った場合分け

HTMLソース

<picture>
  <source srcset="c-100.png" media="(max-width: 700px)">
  <source srcset="c-200.png" media="(max-width: 800px)">
  <source srcset="c-300.png" media="(max-width: 900px)">
  <source srcset="c-400.png" media="(min-width: 900px)">
  <img src="c-100.png" alt="" />
</picture>

画像を表示する

結果・分かったこと

• ビューポート幅によって、利用する画像を切り替えることができた。
• srcset属性ではなく、src属性で画像ファイルを指定すると切り替えはできない。
  • media属性で条件を指定する場合は、src属性ではなく srcset属性で画像を指定しなければいけない。

実験2: 幅記述子を使う

HTMLソース

<picture>
  <source srcset="c-100.png 100w" sizes="110px" media="(max-width: 700px)">
  <source srcset="c-200.png 200w" sizes="210px" media="(max-width: 800px)">
  <source srcset="c-300.png 300w" sizes="310px" media="(max-width: 900px)">
  <source srcset="c-400.png 400w" sizes="410px" media="(min-width: 900px)">
  <img src="c-100.png" alt="" />
</picture>

画像を表示する

結果・分かったこと

• srcset属性は、media属性や type属性がないと使用されない。
• sizes属性は、元の画像サイズとは無関係に自由にサイズを指定できる。

実験3: ピクセル密度記述子を使う

HTMLソース

<picture>
  <source srcset="c-100.png 0.5x" type="image/png">
  <source srcset="c-200.png 1x"   type="image/png">
  <source srcset="c-300.png 1.5x" type="image/png">
  <source srcset="c-400.png 2x"   type="image/png">
  <img src="c-200.png" alt="" />
</picture>

画像を表示する

結果・分かったこと

• 意図した画像が利用されない。
• picture 要素では、ピクセル密度記述子を使った指定はできないようだ。
  • これについては、picture要素 - | MDN に記載されている。

実験4: png と webp を指定する

ブラウザが対応していれば webp が適用される。そうでなければ、png が適用される。

HTMLソース

<picture>
  <source srcset="ryuukishi-350.webp" type="image/webp">
  <img src="ryuukishi-350.png" alt="ryuukishi-350" />
</picture>

画像を表示する

結果・分かったこと

• ちゃんと適したほうが利用される。

実験5: メディアクエリーで場合分けしつつ、png と webp を指定する

かなり面倒な記述になるがやってみる。

HTMLソース

<picture>
  <source type="image/webp"
          media="(max-width:800px)"
          sizes="200px"
          srcset="c-100.webp 100w,
                  c-200.webp 200w,
                  c-300.webp 300w,
                  c-400.webp 400w">
  <source type="image/webp"
          sizes="400px"
          srcset="c-100.webp 100w,
                  c-200.webp 200w,
                  c-300.webp 300w,
                  c-400.webp 400w">
  <img srcset="c-100.png 100w,
               c-200.png 200w,
               c-300.png 300w,
               c-400.png 400w"
    sizes="(max-width:800px) 200px, 400px"
    src="c-200.png"
    alt="c-200">
</picture>

• PNG画像の設定は<img>要素に記述する。srcset属性や sizes属性を使う。
• <img>要素の sizes属性に記述した条件毎に <source>要素を追加する。条件の部分は media属性に記述し、サイズは sizes属性に記述する。
• 各 <source>要素の srcset属性には WebP画像を羅列する。内容が重複するが仕方ない。
• 各 <source>要素の type属性値と media属性値が、その要素を適用する条件となる。

画像を表示する

結果・分かったこと

• 記述がかなり面倒になるが可能であることが分かった。