パート3
ネットワーク上のデータの62％は画像で構成されており、 毎日 、より多くのバイトの画像を作成しています。 それらがすべて意図した目的に使用されていれば素晴らしいでしょう。 しかし、小さな画面または低解像度の画面では、このデータのほとんどはジャンクになります。
なんで？ 誰でも何でもアクセスできるようにインターネットが作成されたという事実にもかかわらず、最近では、さまざまなデバイスがレスポンシブデザインへの大規模な動きを引き起こすレベルに達しました。 レスポンシブデザインを作成すると、コンテンツがエレガントかつ効率的にあらゆるデバイスに流れ込みます。 ラスター画像を除くすべてのコンテンツ。 ビットマップ画像の解像度は固定されています。 彼らの船-その悲しい孤独なsrcとの尊敬-は適応できません。
一部のページをぼやけさせるか、すべてを遅くするかの選択に直面して、ほとんどのデザイナーは後者のオプションを選択し、高解像度で巨大な画面を埋めるように設計された画像を全員に送信します。 つまり、ゴミ。
しかし！ 3年間の論争の後、レスポンシブ画像の問題を解決できるいくつかのマークアップ要素が登場しました。
•srcset
•サイズ
•写真
•旧友の情報源（音声およびビデオタグから取得）
これらの新しい要素と属性により、各クライアントに最も適したソースコードをマーク、変更、提示することができます。 9月にリリースされたChrome 38で、公式仕様と最初の本格的な実装に進みました。 エレガントに削減された要件とギャップを減らすためのポリフィリングにより、レスポンシブ画像の使用を開始できるようになりました。 それでは始めましょう！
既存のWebページを取得して、そのページの画像をレスポンシブにします。 これは3つの段階で実行でき、それぞれの新しいマークアップ要素を順番に適用します。
1. srcsetとサイズを使用して、画像を効果的にスケーリングします。
2.画像とソースメディアを使用して画像を送信します。
3.写真とソースタイプを使用した代替画像形式を提供します。
その過程で、新しい機能が生産性をどのように向上させるかがわかります。
現状
私は太って老いているよりも老いていることをそれほど心配していないと思います
ベンジャミン・フランクリン（またはピーター・ガブリエルですか？）
オブジェクトとして、キルトに関する小さなページを取り上げます 。 これはシンプルなレスポンシブページです。 ここにいくつかのコンテンツがあります：巨大な画像のみ（毛布！） 同時に、各ブランケットの全体的なデザインと、できるだけ多くの複雑な詳細を表示する必要があります。 したがって、ブランケットごとに2つの画像を提示します。
1.段落の幅に合わせた毛布の全体図
2.画面の幅の100％を占める詳細な画像
新しいマークアップ要素なしで画像のサイズとレイアウトをどのように設定しますか？ まず、毛布全体。 それらが常に明確に見えるようにするには、レイアウトの最大許容サイズを決定する必要があります。 CSSの例を次に示します。
* { box-sizing: border-box; } body { font-size: 1.25em; } figure { padding: 0 1em; max-width: 33em; } img { display: block; width: 100%; }
画像の最大幅（max-width）（図）からパディングを減算し、「em」をピクセルに変換することで、最大img表示幅を計算できます。
100% <img> width x ( 33em <figure> max-width - 2em <figure> padding ) x 1.25em <body> font-size x 16px default font-size = 620px
または、開発者ツールをチートして調べることもできます。
（私は2番目の方法を好みます。）
いずれの方法でも、ブランケット全体の最大img表示幅は620ピクセルになります。 元の画像を2倍の大きさにして、2倍の大きさの画面（幅1240ピクセル）に合わせます。
しかし、詳細な画像はどうでしょうか？ それらは、ウィンドウの幅全体を埋めるように引き伸ばされます。ウィンドウのサイズには上限が固定されていません。
より大きな標準を選択して、たとえば1920ピクセル幅に増やしましょう。 このようなサイズで画像を表示すると、ページはかなり「重く」なり、重量が3.5 MBになります。 ここでは、5.7 Kbを除くすべてが画像を占有します。 このような画像の多くのバイトは、低解像度の小さな画面に表示されたときに目に見えない余剰を構成していると推測できますが、どれくらいですか？ それを理解しましょう。
ステージ1：Scrsetとサイズを使用したスケーリング
最初に直面する問題は、ウィンドウの幅と画面解像度に合わせて画像を効果的にスケーリングすることです。 巨大なソースをより大きな解像度の画面や他のすべてのユーザー向けのよりコンパクトな画面に選択的に送信できるように、画像のいくつかの解像度を試します。 どうやって？ srcsetを使用します。
ウィンドウの幅全体の詳細な画像の1つを次に示します。
<img src="quilt_2-detail.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." /> //quilt_2-detail.jpg 1920 . , , : <img srcset="quilt_2/detail/large.jpg 1920w, quilt_2/detail/medium.jpg 960w, quilt_2/detail/small.jpg 480w" src="quilt_2/detail/medium.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork.">
imgに関して最初に注意する必要があるのは、まだsrcが含まれていることです。これは、新しい構文をサポートしていないブラウザーで読み込まれます。
より機能的なクライアントのために、ソースURLのコンマ区切りリストを含むsrcset属性という新しいものを追加しました。 各URLの後に、各画像の幅をピクセル単位で示す「幅特性」を記述します。 画像のサイズは1024 x 768ですか？ srcsetのURLの後に1024wを追加します。 srcsetをサポートするブラウザーは、ピクセル単位のこれらの幅と、現在のビューアーについて知っているすべてを使用して、読み込むソースを選択します。
彼らはどのように選択しますか？ これがsrcset属性で最も気に入っていることです。わかりません！ わかりません。 選択のロジックは特に開示されていません。
レスポンシブ画像の問題に対して最初に提案された解決策は、著者により多くの制御を与えようとしました。 私たちは、メディアクエリの包括的なセットを作成する責任があります。アクションプランは、画面サイズと解像度のすべての組み合わせをリストし、それぞれにソースが適合しています。
Srcsetは私たちを自分から守ります。 必要に応じて詳細な制御を引き続き使用できます（詳細は後ほど説明します）が、ほとんどの場合、キーボードから手を離してブラウザーに自由を与えます。 ブラウザには、画面、ウィンドウ、接続、およびオプションに関する豊富な知識があります。 制御を失う（何千ものオプションに特定のソースを割り当てるのではなく、画像を記述する）ため、ブラウザーはこの知識を使用できます。 大幅に少ないコードで最高の（未来志向の）機能を取得します。
パート2
Habré読者向けの便利なPaystoソリューション：