HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
この記事では、レスポンシブ画像という概念について学びます。レスポンシブ画像とは、画面サイズや解像度などが大きく異なる端末でも適切に表示される画像のことです。また、HTML が提供する、レスポンシブ画像の実装に役立つツールについても見ていきます。これにより、さまざまな端末でのパフォーマンスを向上させることができます。
典型的なシナリオを見てみましょう。 典型的なウェブサイトには、おそらく訪問者の印象を良くするためのヘッダー画像と、おそらくその下にはコンテンツ画像がいくつかあります。 おそらく、ヘッダー画像はヘッダーの幅全体にまたがるようにして、コンテンツ画像はコンテンツ列のどこかに合わせたいと思うでしょう。この簡単な例を見てみましょう。
これは、ノートパソコンやデスクトップなどの広い画面の端末ではうまく表示できます（ライブを見て、 GitHub でソースコードを見ることができます）。以下の点を除けば CSS については詳しく説明しません。
しかし、画面が狭い端末でサイトを見始めると、問題が発生します。下の図では、ヘッダーは問題なさそうですが、モバイル端末の画面の高さの多くを占め始めています。また、このサイズでは、最初のコンテンツ画像内の 2 人の顔が見えにくくなっています。
改善策として、狭い画面の内側へ表示される場合は、画像の重要な部分を表示するトリミングした版を表示することが考えられます。タブレットのような画面の内側が中型の機器には、 2 つ目のトリミングされた画像を表示することができます。このように、さまざまなレイアウトで異なるトリミング画像を提供したい場合の一般的な問題は、一般に「アートディレクション問題」と呼ばれます。
さらに、小さなモバイル画面で見ている場合、このような大きな画像をページに埋め込む必要はありません。このようなことをすると、帯域幅が無駄になります。具体的な例としては、モバイル端末のユーザーは、自分の端末では小さな画像で済むのに、デスクトップユーザー向けの大きな画像をダウンロードして、帯域幅を無駄にしたくないということがあります。逆に、小さなラスター画像は、元のサイズより大きく表示すると、粒状に見えてきます（ラスター画像は、幅の数のピクセルの集まりと、高さの数のピクセルの集まりです）。理想的な状況は、複数の解像度が利用可能で、ウェブサイト上のデータにアクセスする端末に応じて適切なサイズを提供することです。これは解像度切り替えの問題と呼ばれています。
状況をより複雑にしているのが、端末によっては高い解像度の画面を持ち、きれいに表示するには、期待されるよりも大きい画像を必要としていることです。 これは本質的に同じ問題ですが、少し異なる状況のものです。
ベクター画像はある側面でこれらの問題を解決すると思うかもしれません。 — ファイルサイズが小さくて容易に縮尺変更でき、どこでも利用できるからです。 しかし、すべての種類の画像に適しているわけではありません。単純な図形、パターン、インターフェイス要素などには適していますが、例えば写真のような精細なものをベクターベースの画像で作成すると、とても複雑になります。上記の例に見られるような種類の画像には、JPEG のようなラスター画像形式がより適しています。
この種の問題は、ウェブが最初に登場したとき、90 年代前半から中期の頃には存在しませんでした。 — ウェブをブラウズする唯一の端末はデスクトップとラップトップであったため、ブラウザーの技術者や仕様書の著者は解決策を実装することを考えませんでした。「レスポンシブ画像技術」は、上記のような問題を解決するために最近になって実装され、ブラウザーに様々な画像ファイル、どれも表示するものは同じですが、ピクセル数が異なる様々な画像（解像度の切り替え）、異なる領域の取り方が異なる様々な画像（アートディレクション）を含めることができます。
メモ: この記事で説明している新機能 — srcset/sizes/<picture> — は、現行のデスクトップおよびモバイルブラウザーのすべてが対応しています。
この節では、上で説明した 2 つの問題を踏まえ、 HTML のレスポンシブ機能を使用してそれらを解決する方法を示します。 なお、上記の例のコンテンツ領域に見られるように、この節では HTML の <img> に注目します。サイトヘッダーの画像は単なる装飾なので、 CSS 背景画像を使用して実装します。 CSS はおそらく、 HTML よりもレスポンシブデザインのための優れたツールを持っています(英語)ので、これについては将来 CSS のモジュールで説明します。
それでは、解像度切り替えで解決したい問題は何でしょうか？ 同じ画像コンテンツを、機器に応じて大きくしたり小さくしたりして表示することです。これは、例の中の 2 番目のコンテンツ画像の状況です。 標準的な <img> 要素は、伝統的にブラウザーにソースファイルを一つだけしか指定できません。
しかし、複数の追加のソース画像と、ブラウザーが正しいものを選択する助けになるヒントを提供することができる、 2 つの属性 — srcset 及び sizes — を使用することができます。 この例は、 GitHub の responsive.html で見ることができます(ソースコードも参照してください)。
srcset および sizes 属性は複雑に見えますが、上記のように属性値のそれぞれの部分を別々の行に書けば、理解することは難しくありません。 それぞれの値にはカンマ区切りのリストが設定されており、それぞれのリストの部分は 3 つの部分からなっています。 それぞれの中身を見てみましょう。
srcset は、ブラウザーが選択することができる画像のセットと、それぞれの画像の寸法を定義します。 それぞれのカンマの前に書くものは以下の通りです。
sizes は、一連のメディア条件(例えば画面の幅)であり、特定のメディア条件が成立したときに、どの寸法の画像を選択するのが最適かを示します。これらは以前に説明したヒントです。 この場合、それぞれのカンマの前には次のようなものを書きます。
メモ: sizes においては、任意の長さの値を使うことができます。例えば、絶対幅（例: 480px）の代わりに、ビューポートに対する相対幅（例: 50vw）を提供することができます。ただし、スロット幅としてパーセント値を用いることはできません。最後のスロットの幅にはメディア条件がないことにお気づきでしょうか （これは、どのメディア条件も真でない場合に選択される既定値です）。ブラウザーは最初に一致した条件よりも後を無視するので、メディア条件をどのように並べるか注意してください。
したがって、これらの属性を使用すると、ブラウザーは次のようになります。
以上です！ この時点で、480px のビューポート幅を持つ対応しているブラウザーがこのページを読み込むと、(width <= 600px) メディア条件が真となるため、ブラウザーは 480px のスロットを選択します。elva-fairy-480w.jpg の固有幅 (480w) が最も近いため、これが読み込まれます。 800px の画像は 128KB ですが、480px の画像は 63KB で 65KB の節約になります。 今、これが多くの写真があるページだったと想像してみてください。 この技術を使用することで、モバイルユーザーは多くの帯域幅を節約できます。
メモ: デスクトップのブラウザーでテストする場合、ブラウザーでウィンドウ幅を最も狭く設定したときに狭い画像を読み込むことができない場合は、ビューポートの値を確認してください（ブラウザー の JavaScript コンソールに移動して document.querySelector('html').clientWidth と入力すると、おおよその値を確認することができます）。さまざまなブラウザーでのウィンドウ幅の最小値が保有されており、それは思ったよりも広いかもしれません。モバイルブラウザーでテストする場合、 Firefox の about:debugging ページのようなツールを使用して、デスクトップの開発者ツールを使用してモバイルに読み込まれたページを検査することができます。
どの画像が読み込まれたかを確認するには、 Firefox の開発者ツールのネットワークモニタータブや、Chrome の開発者ツールのネットワークパネルを使用することができます。Chrome では、既にダウンロードされた画像を拾わないように、キャッシュを無効にすることができます。
これらの機能に対応していない古いブラウザーはこれらを無視し、 src 属性で参照されている画像を通常の方法で読み込みます。
メモ: 文書の <head> には、 <meta name="viewport" content="width=device-width"> という行があります。 これは、モバイルブラウザーがウェブページを読み込むために実際のビューポート幅を使用するように強制します。（一部のモバイルブラウザーでは、ビューポート幅について嘘をつき、大きなビューポート幅でページを読み込み、読み込んだページを縮小するため、レスポンシブ画像やデザインにはあまり役に立ちません。 これについては、今後のモジュールで詳しく説明します。）
さまざまな解像度のディスプレイに同じ実寸で表示される画像があるとします。高解像度のディスプレイでは、より高解像度の画像を提供することで、より優れたユーザー体験を提供することができます。
こうするためには、srcset で x 記述子を指定し、sizes を指定しないことで、ブラウザーに適切な解像度の画像を選択させることができます。やや簡単な構文です。これは srcset-resolutions.html のようなものです(ソースコードも参照してください)。
画像は常に同じサイズで表示されますが、高解像度のディスプレイではより多くの詳細を確認できることに注意してください。
この例では、次の CSS が画像に適用され、画面上に 320 ピクセルの幅が設定されます（CSS ピクセルとも呼ばれます）。
この場合、sizes は必要ありません。ブラウザーは、表示されている画面がどの解像度であるかを単純に調べ、srcset で参照される最も適切な画像を提供します。 したがって、ページにアクセスする端末が標準解像度や低解像度の画面を持っていて、1 つのデバイスピクセルが各 CSS ピクセルを表している場合、elva-fairy-320w.jpg の画像が読み込まれます(1x は暗黙のため、含める必要はありません)。 端末が CSS ピクセルあたり 2 つのデバイスピクセルの高解像度を持つ場合、elva-fairy-640w.jpg の画像が読み込まれます。 640px の画像は 93KB ですが、320px の画像は 39KB です。
要約すると、アートディレクションの問題は、表示される画像を異なる画像表示サイズに合うように変更したいことを含みます。 たとえば、デスクトップブラウザーで見たときに中央に人がいる大きな風景をウェブサイトに表示している場合、モバイルブラウザーでウェブサイトを表示すると縮小され、人がとても小さくて見えにくいので格好悪くなります。 モバイルでは、人にズームインしたより小型のポートレイト画像を表示するほうがよいでしょう。 <picture> 要素は、この種の解決法を実装することを可能にします。
オリジナルの not-responsive.html の例に戻ると、画像がひどくてアートディレクションが必要なものがあります。
<picture> でこれを修正しましょう。 <video>や<audio>と同様に、<picture> 要素はラッパーで、ブラウザーが選択できるいくつかの異なるソースを提供するいくつかの <source> 要素を含み、次に極めて重要な <img> 要素が続きます。 responsive.html のコードは次のようになります。
このコードでは、以下に示すように、広い画面と狭い画面の両方に適切な画像を表示することができます。