今、これが多くの写真を持っているページだったと想像してみてください。この技術を使用することで、モバイルユーザーは多くの帯域幅を節約できます。属性で参照されている画像を通常の方法で読み込みます。これは、モバイルブラウザーがウェブページを読み込むために実際のビューポート幅を使用するように強制します。(一部のモバイルブラウザーでは、ビューポート幅について嘘をつき、大きなビューポート幅でページを読み込み、読み込んだページを縮小するため、レスポンシブ画像やデザインにはあまり役に立ちません。これについては、今後のモジュールで詳しく説明します。)便利な開発者ツールブラウザーには、必要なスロット幅などの作業に役立ついくつかの便利な開発者ツールがあります。レスポンシブデザインモード)に行きました。さまざまなデバイスの画面サイズで表示されているかのようにウェブページのレイアウトを見ることができます。そのサイズを調べました。これはあなたが必要とする固有の画像幅を与えるはずです。機能しているかどうかを確認できます。これにより、ウェブページを構成するためにダウンロードされた資産のリストが表示されます。ここでダウンロード用に選択された画像ファイルを確認できます。チェックボックスをオンにして、開発者ツールが開いているときにキャッシュを無効にします。キャッシュされた画像をより適切なものより優先します。ようなものです(ソースコードも参照してください)。ピクセルとも呼ばれます)。参照される最も適切な画像を提供します。暗黙のため、含める必要はありません)。画像が読み込まれます。アートディレクション要約すると、アートディレクションの問題は、表示される画像を異なる画像表示サイズに合うように変更したいことを含みます。デスクトップブラウザーで見たときに中央に人がいる大きな風景をウェブサイトに表示している場合、モバイルブラウザーでウェブサイトを表示すると縮小され、人がとても小さくて見えにくいので格好悪くなります。モバイルでは、人にズームインしたより小型のポートレイト画像を表示するほうがよいでしょう。要素は、この種の解決法を実装することを可能にします。例に戻ると、アートディレクションがひどく必要な画像があります。コードは次のようになります。属性が含まれています。例のように、これらの条件はどの画像が表示されるかを決定するテストであり、最初に真を返すものが表示されます。要素の画像が表示されます。ピクセル以上であれば、2番目のものになります。属性には、表示する画像へのパスが含まれます。属性をとることができます。要素で複数の画像を提供することもできますが、それぞれの画像も複数の解像度で提供することができます。現実的には、この種のことを非常に頻繁にやりたいとは思わないでしょう。直前に置く必要があります。しないと画像は表示されません。要素をサポートしないブラウザーの代替に適用されるデフォルトのケースを提供します。このコードでは、以下に示すように、広い画面と狭い画面の両方に適切な画像を表示することができます。属性は、アートディレクションのシナリオでのみ使用してください。属性内でメディア条件も指定しないでください。読み込んで解釈する前に、画像のダウンロード(先読み)を開始します。レスポンシブ画像では役に立ちません。ような解決法を実装する必要があります。ビューポートの幅を検出し、必要に応じて元の画像をより小さなものに動的に変更することはできません。それまでには、元の画像が既に読み込まれていて、さらに小さい画像も読み込むことになります。これは、レスポンシブ画像の条件ではさらに悪化します。)がいくつかあります。ブラウザーのサポートにはむらがあります。古いブラウザーにも対応しています。属性内に指定すると、ブラウザーはサポートしていないファイルタイプを直ちに拒否できます。属性を使用しないでください。宣言された型の画像のみを参照できます。カンマで区切ったリストを使用することもできます。あなた自身のレスポンシブ画像の実装この能動的学習では、私たちはあなたが勇敢に(ほとんど)一人で行くことを期待しています。使用する解像度切り替えの例を実装してください。出発点として使用する)どこかから細かいディテールが入った素晴らしい広い画面のランドスケープ画像を探してきましょう。幅がこれに適しています)。要素を使用して、アートディレクション画像切り替えを実装します。サイズの異なる複数の画像ファイルを作成し、それぞれが同じ画像を表示します。使用して、異なる解像度で同じサイズの画像を提供するか、異なるビューポートの幅で異なる画像サイズを提供するかのいずれかの解像度切り替えの例を作成します。上記のように、ブラウザーの開発者ツールの助けを借りて、必要なサイズにしてください。あなたはこれらの新しいテクニックで遊ぶことを楽しんでください。要約すると、私たちがここで議論してきた2つの明確な問題があります。デスクトップレイアウトのフルシーンを示すランドスケープ画像や、モバイルレイアウトのためにズームインした主な被写体を示すポートレート画像などがあります。要素を使用して解決できます。必要に応じて異なる解像度の画像を高密度や低密度の画面に表示したい場合もあります。属性を使用して解決できます。先に進む前に行うべき唯一のことは、マルチメディアの評価を試み、あなたがどのように乗り出すかを見ることです。inbox.現在、ニュースレターは英語でのみ提供されています。従って私の個人情報を扱うことに同意します。