レスポンシブ画像は、レスポンシブWebデザインの課題の1つです。 おそらく、高解像度ディスプレイに高解像度画像を使用し始め、ディスプレイ解像度の低いデバイスのサイズを縮小し始めたため、低解像度ディスプレイのデバイスの所有者に利益をもたらすことなくトラフィックを使い果たしてしまいます。 または、大画面や高解像度ディスプレイではひどく見える低解像度の画像を使用します。 この問題を解決するために、多くのハックが作成されました。
レスポンシブ画像の仕様がまだないという事実に腹を立てました。 2011年11月、 私はpicture tagを提案しました 。 この要素は、メディアクエリと連携してビデオタグメカニズムを使用します。
<picture alt="angry pirate"> <source src=hires.png media="min-width:800px"> <source src=midres.png media="min-width:480px"> <source src=lores.png> <!-- --> <img src=midres.png alt="angry pirate"> </picture>
同時に、他の人々 が同様の仕様を提案し 、その後、適応画像仕様を議論するためにW3Cグループが作成されました。
ただし、1月に、HTML5エディターのIan Hicksonは次のように書きました。
なぜimgタグに対してこれを行うのですか？ 通常、 img要素は、レスポンシブにする必要のないコンテンツの画像に使用されます。
AppleのEdward O'Connorは、後でimg要素にsrcset属性を使用する別の方法を提案しました。 これは、WebKitに既に追加されている新しいCSS image-setプロパティの同様の提案を補完します。
<img src="foo-lores.jpg"
srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
alt="decent alt text for foo.">
値「2x」および「6.5x」は、ブラウザーに相対解像度を伝えます。 foo-hires.jpgは元の画像の2倍、 foo-superduperhires.jpgは6.5倍です。 数日後、この提案が仕様に追加されました 。
提案された画像要素とsrcset属性の間には、主に2つの違いがあります。 最も明らかなのは、 srcset属性が img要素で使用されていることです。これはもともと画像用でした。 そしてこれは素晴らしい。
2番目の違いは、 srcset属性を使用してもメディアクエリが提供されないことです。 メディアクエリを使用しても、任意の解像度、デバイスの向き、dpi、色深度、アスペクト比のパラメーターを設定できます。 一方、各画像バリアントにメディアクエリを設定すると、コードが数倍増加する可能性があります。
オコナーはこう書いている：
メディアクエリではなく、スケールファクターを提案するのはなぜですか？ メディアクエリはユーザーエージェントデータを使用していますが、さまざまな画像オプション間の関係について説明しています。 また、ユーザーエージェントは、メディアクエリを使用して設定されたパラメーターだけでなく、CSSを使用してimg要素に与えられたサイズ、さらにはページの現在の倍率も考慮して、現在の状態に最適な画像オプションを自由に選択できる必要があります。
ブラウザーが情報受信速度、遅延、ppi、デバイスの向きなどのデータに基づいて最適な画像オプションを選択できるようにするというアイデアが好きです。 これは、このバージョンまたはそのバージョンのイメージが関係する条件を記述する必要性から開発者を解放することです。 画像データ、サイズ、密度を指定するだけで、ブラウザ自体がこの状況で使用するのに最適なものを決定します。
提案されたsrcset属性には2つの欠点があります。 最初のものは非常に主観的ですが、多くの人が私に同意します：現在の仕様はひどい構文を持っています：
<img src="face-600-200-at-1.jpeg" alt=""
srcset="face-600-200-at-1.jpeg 600w 200h 1x,
face-600-200-at-2.jpeg 600w 200h 2x,
face-icon.png 200w 200h">
もちろん、これは修正可能であり、修正する必要があります。 コードの美学だけではありません。 構文があまりにも混乱している場合は、誤って使用されます。
2番目の問題は、開発者がプロセスを制御する機能を失いたくないことです。 これは、視覚的コンテンツの意味を失うことの問題であり（ 「アートの方向性に関心がありますか？」段落を参照）、多くの人はAppleがそれについて考えなかったと確信しています。 srcsetの支持者は反対意見です。
ソース： HTML5アダプティブイメージ：ラウンド1の終わり
便利なリンク：
- 開発者間のホリバーについて少し
- どのレスポンシブ画像ソリューションを使用すべきですか？