それを実装する上でどのような道具を提供しているかを見てみます。トピックの将来のモジュールで多くのことを学ぶトピックです。基本及びウェブページに静止画を追加する方法をすでに知っているものとします。要素のような機能を使って、ウェブサイトにレスポンシブ画像を実装する方法を学ぶこと。レスポンシブ画像なのか?では、レスポンシブ画像でどのような問題を解決しようとしているのでしょうか。典型的なシナリオを見てみましょう。典型的なウェブサイトには、おそらく訪問者の印象を良くするためのヘッダー画像と、おそらくその下にはコンテンツ画像がいくつかあります。ヘッダー画像はヘッダーの幅全体にまたがるようにして、コンテンツ画像はコンテンツ列のどこかに合わせたいと思うでしょう。この簡単な例を見てみましょう。ソースコードを見ることができます)。ついては詳しく説明しません。ピクセルに設定されています。ピクセルのままで、利用可能な領域の中で中央に配置されます。ヘッダー画像は、ヘッダーの幅がどのような幅であっても、その中心が常にヘッダーの中央に来るように設定されています。サイトがより狭い画面で表示されている場合は、画像の中心にある重要なディテール(人物)が常に見え、両端の余分な部分が失われます。要素が画像より狭くなると、画像があふれるのではなく、常に本文内に収まるように縮小し始めるよう設定されています。これは問題ありませんが狭い画面のデバイスでサイトを表示するときには問題が発生します。ヘッダーは正しく見えますが、モバイルデバイスの画面の高さ全体のうち多くの部分を占めるようになってきています。最初のコンテンツ画像はひどく見えにくくなっています。この寸法では、中の人物がほとんど見えていません。改良点は、サイトを狭い画面で見たときに画像の重要なディティールを表示するため、切り取った画像を表示することです。第2の切り取られた画像は、タブレットのような中幅の画面のデバイス用に表示することができます。これは一般的にアートディレクションの問題として知られています。小さなモバイル画面で見ている場合、このような大きな画像をページに埋め込む必要はありません。これは解像度切り替えの問題と呼ばれています。ラスター画像は、ベクターグラフィックスの所で見たように、幅のピクセルの集まりと、高さのピクセルの集まりです。小さいラスター画像は、元のサイズよりも大きく表示されていると粒状に見え始めます(ベクターグラフィックスではそうなりません)。逆に、意図した大きさよりもはるかに小さい画面に大きな画像を表示する必要はありません。することで帯域幅を無駄にすることがあります。モバイルユーザーは、小さな画像がデバイスに表示される時、デスクトップ向けの大きな画像をダウンロードすることによって帯域幅を無駄にしたくありません。理想的な状況は、複数の解像度が利用可能で、ウェブサイト上のデータにアクセスするデバイスに応じて適切なサイズを提供することです。状況をより複雑にしているのが、一部のデバイスは高い解像度の画面を持ち、きれいに表示するには、期待されるよりも大きい画像を必要としていることです。これは本質的に同じ問題ですが、少し異なる状況のものです。ベクター画像はある側面でこれらの問題を解決すると思うかもしれません。ファイルサイズが小さくて容易に縮尺変更でき、どこでも利用できるからです。すべての種類の画像に適しているわけではありません。単純な図形、パターン、インターフェイス要素などには適していますが、例えば写真のような、ディティールのものをベクターベースの画像で作成すると、とても複雑になります。ようなラスター画像形式は、上記の例に見られるような種類の画像により適しています。ウェブをブラウズする唯一のデバイスはデスクトップとラップトップであったため、ブラウザーの技術者や仕様書の著者は解決策を実装することを考えませんでした。レスポンシブ画像技術は上記のような問題を解決するために最近になって実装され、ブラウザーに様々な画像ファイル、どれも表示するものは同じですが、ピクセル数が異なる様々な画像(解像度の切り替え)、異なる領域の取り方が異なる様々な画像(アートディレクション)を含めることができます。レスポンシブ機能を使用してそれらを解決する方法を示します。背景画像を使用して実装します。モジュールで説明します。同じ画像コンテンツを、機器に応じて大きくしたり小さくしたりして表示することです。これは、例の中の2番目のコンテンツ画像の状況です。要素は、伝統的にブラウザーにソースファイルを一つだけしか指定できません。使用することができます。見ることができます(ソースコードも参照してください)。属性は複雑に見えますが、上記のように属性値のそれぞれの部分を別々の行に書けば、理解することは難しくありません。それぞれの値にはコンマ区切りのリストが設定されており、それぞれのリストの部分は3つの部分からなっています。それぞれの中身を見てみましょう。ブラウザーが選択することができる画像のセットと、それぞれの画像の寸法を定義します。それぞれのコンマの前に書くものは以下の通りです。押すと情報画面が出てきます)。一連のメディア条件(例えば画面の幅)であり、特定のメディア条件が成立したときに、どの寸法の画像を選択するのが最適化を示します。これらは以前に説明したヒントです。この場合、それぞれのコンマの前には次のようなものを書きます。記事で詳しく学びますが、今はメディア条件とは画面がなることができる状態であるとだけ言っておきましょう。ピクセル以下であるとき」と言っています。em)又は相対的な長さ(パーセント値など)で指定することができます。最後のスロットの幅にはメディア条件がないことに気づいたかもしれません。これは成立するメディア条件がない場合に使用される既定値です。ブラウザーは最初に一致した条件の後はすべて無視しますので、メディア条件の順序に注意してください。したがって、これらの属性を使用すると、ブラウザーは次のようになります。そのデバイスの幅を見る。リストの中のどのメディア条件が真であるかを確認する。そのメディア照会で与えられたスロットサイズを見る。リストで参照される画像を読み込みます。