画像のレスポンシブ対応＝picture要素を使用したコーディング

<picture> タグを使った画像のレスポンシブ対応について

画像向けコーディングの過去版と現在版を比較する。
ただ、2019年現在、過去版の使用率がまだ圧倒的に高い。
その流れを変えたい。

トラディショナルなイメージ向けコーディング

<img src="./img/logo.png"
             width="100" height="50"
             alt="イメージの代替テキスト"
             title="イメージの説明文">

上記は画像向けコーディングの一例。アクセシビリティ上、alt 属性は入れた方がよい（ユーザ補助になる）が、title は必須ではない（ツールチップで表示される、alt と同じにしない方がよい）。縦横のサイズを指定することで、縦横比はスクリーンサイズに関わらず（レスポンシブであっても）常に同じになる。現在もこのように記述するサイトが多い。
次に、よりモダンなコーディングを紹介（とはいっても５年以上前から利用されているが）。

現在のイメージ向けコーディング（<picture>を使う進化版）

<style>
  img {display: block; margin: 0 auto;}
</style>

<picture>

<!-- 画面が768px以上の場合に有効 -->
<source media="(min-width: 768px)"
           srcset="img/large-image.png">


<!-- 画面が640px以上の場合に有効 -->
<source media="(min-width: 640px)"
           srcset="img/medium-image.png">

<!-- 画面が640px未満の場合に有効 -->
<source srcset="img/small-image.png">

<!-- pictureがサポートされていない時に有効 -->
<img src="img/image.png" alt="代替テキスト">

</picture>

コンテナとなる <picture> 内には、<source> タグを使用して複数の画像リソースを格納でき、メディアクエリでブレイクポイントを指定したり、高解像度ディスプレイへの対応などがコントロール可能となる。

<picture> タグ内の一番最後の <img> 要素は、<picture> がサポートされていないブラウザ向けのフォールバックになる。

このようなコーディングでユーザのスクリーンに応じた画像リソースをHTMLだけでクリーンに提供できる。
スクリーンに応じてコンテンツを配信することをアートディレクションと呼ぶこともあるので覚えておくとよいだろう。

属性srcsetの使用例

<picture>

<!-- 画面が768px以上の場合に幅500pxの画像を配信、
         ビューポート幅に対して1/3で描画 -->
<source media="(min-width: 768px)"
        srcset="img/big-image.png 500w"
        sizes="33.3vw">


<!-- 画面が640px以上の場合に幅450pxの画像を配信、
         ビューポート幅に対して80%で描画 -->
<source media="(min-width: 640px)"
        srcset="img/medium-image.png 450w"
        sizes="80vw">

<!-- 画面が640px未満の場合に有効 -->
<source srcset="img/small-image.png">

<!-- pictureがサポートされていない時に有効 -->
<img src="img/default-image.png"
        alt="代替テキスト">

</picture>

ピクセル密度デスクリプタの使用例

高DPIスクリーン向けには、<picture> 要素内のsrcset属性において1x、1.5x、2x、3x といったx値（ピクセル密度デスクリプタ）を使って、高解像度のイメージを配信できる。

<picture>

<!-- 画面が768px以上の場合に、
     画面解像度に合わせて配信 -->
<source media="(min-width: 768px)"
   srcset="img/big-image.png,
           img/big-image@1.5x.png 1.5x,
           img/big-image@2x.png 2x">

<!-- 画面が640px以上の場合に、
      画面解像度に合わせて配信 -->
<source media="(min-width: 640px)"
   srcset="img/medium-image.png,
           img/medium-image@1.5x.png 1.5x,
           img/medium-image@2x.png 2x">

<!-- 画面が640px未満の場合に有効、
   解像度に合わせながらフォールバックも兼用 -->
<img src="img/default-image.png"
      alt="代替テキスト"
  srcset="img/default-image@1.5x.png 1.5x,
          img/default-image@2x.png 2x">
</picture>

画像にWebPを使用する時のコーディング例

<picture>

<!-- WebPをサポートしている場合に有効 -->
<source type="image/webp"
       srcset="img/image.webp">


<!-- WebPがサポートされていない場合に有効 -->
<img src="img/image.png" alt="代替テキスト">

</picture>

上記では、Googleが提唱しているWebPを使用。type 属性に image/webp を記述。
非対応ブラウザでは <img> がフォールバックされる。