レスポンシブイメージについて

2015年ではレスポンシブサイトに対応させるために無駄にサイズの大きい画像を用意していました。
それぞれのデバイスの画面幅サイズで画像を切り分けられると都合がよくなります。そのような要望に対応した画像表示の仕組みがレスポンシブイメージです。chromeやfirefoxをはじめ多くのブラウザも対応が進み今年あたりから注目度も高くなるものと思われます。

レスポンシブイメージにはimgタグでsrcset属性を使う方法と、pictureタグを使う方法の2通りの方法があります。
これらの仕様はHTML5.1（2016年第４四半期あたりで勧告予定）で策定されています。HTML5.1しっかりと注目しておきましょう。

srcset属性

srcsetはimgタグの中で使用できる複数の画像を選択できる属性です。
詳細な説明はHTML5.1のドラフトに書かれていますが、大体以下の通りです。

srcsetは複数のデバイスで表示するために複数の種類の画像を、カンマ区切りで指定するものです。
それぞれの画像はURLのあとに半角スペースで区切って、デバイス幅を単位「w」で整数で記述します。
また、画素密度を単位 「x」で小数単位で記述することもできます。省略した場合は「1x」になります。

デバイスにはsrcsetで指定した画像からどれを表示するかの裁量が任されています。
そのため、通常は同一の画像で画像サイズを変えたものを指定して、ブラウザのあるいはデバイスの幅に応じてブラウザの判断でどの画像を表示するか決める方法をとります。

レスポンシブイメージの例１
このサンプルをPCやスマートフォンで表示すると1280pxの幅以下ではflower1280.jpgが表示され、640px以下ではflower640.jpg、320px以下ではflower320.jpg、160px以下ではflower160.jpgが表示されます。
ブラウザの横幅を縮めて確認しても即座に画面は切り替わりません。対象の幅に縮めて一旦ブラウザをリロードする必要があります。

sizesは今表示しているデバイスの表示領域からの割合をvwで指定することができます。省略すると100vwとなります。
たとえば、50vwとすると画面幅の50％の幅で画像が表示されて、その幅の画像を表示するのにちょうどよいサイズの幅の画像が選ばれて表示されることになります。

 <img src="flower160.jpg" alt="flower"
     sizes="80vw"
     srcset="flower160.jpg 160w, 
             flower320.jpg 320w,        
             flower640.jpg 640w,
             flower1280.jpg 1280w">

CSS

img {
        display: block;
        margin: 0 auto;
    }

各ブラウザの対応状況はこちらです。

pictureタグを使った方法

imgタグのsrcset属性の方法と使い分けとしては、pictureタグの方はデバイスごとに表示イメージの内容を変更したい場合（アートディレクション）、imgタグのsrcset属性は同じ画像内容でサイズだけ変更したい場合に使用すると良いようです。

pictureタグの使い方

pictureタグを使用した方法では明示的にmedia=”(min-width: 650px)”を記述してブラウザに対してデバイスの幅に応じて画像を切り替える指示を入れています。

レスポンシブイメージの例２

HTML

    <picture>
        <source media="(min-width: 650px)" srcset="flower640.jpg">
        <source media="(min-width: 465px)" srcset="flower320.jpg">
        <img src="flower160.jpg" alt="flower">
    </picture>

CSS

img {
        display: block;
        margin: 0 auto;
    }

各ブラウザのpictureタグの対応状況