レスポンシブ画像の初心者向けガイド：画像を正しく表示する方法

このレスポンシブ画像のチュートリアルでは、CSSテクニック、HTML機能、および検討する必要のあるいくつかのツールについて説明します。 これらすべてにより、今日のプロジェクトでレスポンシブ画像を使い始めるための概要がわかります。

目次：

• プレーンCSSを使用したレスポンシブ画像
• srcset属性とsizes属性を持つレスポンシブ画像
• ピクセル密度記述子でsrcsetを使用する
• <picture>要素を使用する
• レスポンシブ画像を支援するツールとサービス

プレーンCSSを使用したレスポンシブ画像

Webページ上の画像をレスポンシブにする最も簡単な方法は、メディアクエリや追加のHTMLを必要としません。 数行のHTMLとCSSを使用して、ウィンドウのサイズに応じて任意の画像を拡大および縮小できます。

まず、私のHTMLにはwidthとheightの属性が含まれます。

HTMLにwidthとheightの値を含めるのがベストプラクティスです。 これにより、ブラウザが画像に必要なスペースを確保し、画像の読み込み中に後続のページのリフローが発生しなくなります。

それに加えて、次のCSSを使用します。

 img { max-width : 100% ; height : auto; }
 コード言語： CSS （ css ）

これらの値は私のHTMLを上書きします。 max-widthプロパティは100%に設定され、必要なスペースを最大1000px（HTMLからの値）まで確実に埋めます。 autoのheightの値は、画像の高さが画像の寸法をその自然な幅と高さに比例させておくようにします。 height: auto lineを削除すると、幅に関係なく、画像はHTMLで定義された高さに留まります。これは通常、私が望むものではありません。

次のCodePenを使用して、この簡単な例を試すことができます。 応答性をテストする場合は、新しいウィンドウでデモを開くことをお勧めします。

また、私の例では、画像の自然なサイズは2000px x 1333pxですが、最大1000pxで表示することを選択していることに注意してください。

理論的には、ページ上のすべての画像に対して上記を実行できます。これは、レスポンシブ画像をプロジェクトに組み込むための基本的で許容可能な方法です。 しかし、理想的には、これを次のレベルに引き上げ、画像の解像度やその他の要素を制御して、パフォーマンスを向上させ、SEOを支援したいと思います。これについては次のセクションで説明します。

srcset属性とsizes属性を持つレスポンシブ画像

上記の単純なCSSの例では、サイズを縮小するために可逆圧縮を使用した後でも、サイズが約1.44MBの画像を読み込んでいます。 デスクトップで見た場合、それ自体はひどいことではありませんが、スマートフォンなどの小さなデバイスにロードしたいサイズではありません。 ここで、 srcset属性とsizes属性が役立ちます。

srcset属性を使用すると、1つの値で複数の画像サイズを指定できます。 これらは、定義された状況下でブラウザまたはデバイスがアクセスできる画像になります。 sizes属性はsrcsetと連携して機能し、ブラウザにどの画像を選択するかを指示します。

前の例のleopard.png画像の複数のバージョンを使用する例を次に示します。

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 コード言語： HTML、XML （ xml ）

これまでにsrcset属性とsizes属性を見たことがない場合は、一見混乱しているように見えるかもしれません。 比較的簡単に把握できるように、すべてを分解します。

srcset属性の内訳

srcset属性は、1つ以上の文字列のコンマ区切りリストを受け入れます。 各文字列には次のものが含まれます。

• 画像を指すURL
• 次のオプションの記述子の1つ（スペースで区切る）：
  • 幅記述子
  • ピクセル密度記述子

私の例では、幅記述子を含めました。これは、最も頻繁に表示される記述子です。 画像には3つの異なるバージョンが含まれています。1つは幅800ピクセル、もう1つは幅480ピクセルの高解像度の大型バージョンです。

上記の例で幅記述子を使用した場合、構文は幅の値の直後に「w」が続くことに注意してください（「px」の単位値は使用しないでください）。 画像を表す幅記述子のそれぞれについて、ピクセル単位の画像の固有の幅を使用しています。 ファイルシステム、フォトエディタ、さらにはブラウザやブラウザの開発ツールでそのプロパティを参照することにより、いくつかの異なる方法のいずれかで画像の実際のサイズを取得できます。

sizes属性の内訳

sizes属性は、 srcset属性と一緒にのみ機能します。 srcsetを単独で使用できますが（次のセクションを参照）、 srcsetを使用する最も一般的な方法はsizesを使用することです。

sizes属性は、1つ以上の文字列のコンマ区切りリストを受け入れます。 各文字列には次のものが含まれます。

• メディア条件（CSSで使用されるメディアクエリと同様）
• 画像が占める「スロット」のサイズを定義する値

スロット値は、 emやpxのような絶対長、またはビューポートの相対単位（ vw ）にすることができます。 私の例では、 sizes属性のスロット値が3つの幅記述子と正確に一致していないことに注意してください。 コードは次のとおりです。

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 コード言語： HTML、XML （ xml ）

スロット値が幅記述子と正確に一致しないという事実は問題ありません。 私の場合、 sizesの値を次のように分類できます。

• 600px幅のビューポートは、幅480pxのスロット内のsrcset値から480w画像をロードします。
• 1000px幅のビューポートは800pxスロットに800w画像をロードします。
• 以前のメディア条件が満たされない場合、デフォルトのフルサイズ画像（2000w）は1000pxスロットを埋めます。

最後の文字列はスロット値のみで、メディア条件はありません。 前述のように、これにより、どのメディア条件も満たされない場合にブラウザに表示されるものが確保され、デフォルトとして機能します。

以下のCodePenデモを使用して、動作中のサンプルコードを表示できます。 この場合、さまざまなデバイスを模倣したもの（ChromeのDevToolsなど）でテストする必要があることに注意してください。 さまざまな実際のデバイスを使用してページを開いて、実際のテストを行うこともできます。 便宜上、各画像にテキストオーバーレイを含めて、ページを表示したときにどの画像が読み込まれるかを確認できるようにしました。

元の画像が読み込まれた後、ビューポートのサイズを変更しても画像のサイズは変更されないことに注意してください。 srcset属性とsizes属性は、最初の読み込み時にメディアの状態に応じて画像を読み込むのに役立ちますが、画面のサイズ変更に基づいて画像を切り替えるのには役立ちません。 後で、その問題を解決する別のレスポンシブ画像機能を紹介します。

ピクセル密度記述子でsrcsetを使用する

前に、 srcset属性をピクセル密度記述子で使用できることを説明しました。 この記述子により、ブラウザはデバイスの解像度機能に基づいて使用する画像を決定できます。 これは次のようになります。

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 コード言語： HTML、XML （ xml ）

ここでいくつかのことに注意してください。 まず、通常のsrc属性では、最小の画像を使用して、モバイルファーストのアプローチを確保しています。 次に、 srcset属性には、1.5xおよび2x記述子によって示される解像度で、画像の他のいくつかのバージョンが含まれます。 1xが暗示されているため、480イメージには記述子が含まれていません。 最後に、 sizes属性が存在しないことに注意してください。この場合は必要ありません。 MDNは、ブラウザが画像を選択する方法を説明しています。

記述子がどのように機能するかを理解するには、1つのデバイスピクセルが各CSSピクセルを表すことを覚えておいてください。 したがって、1xは1：1の比率になり、1.5xは1.5：1の比率になります。 以下のCodePenで試すことができますが、違いを確認するには、さまざまなデバイスを使用する（またはそれらを模倣するツールを使用する）必要があります。

<picture>要素を使用する

これまで、レスポンシブ画像を組み込むために説明した機能は、常に同じ画像を異なるサイズと解像度で表示することを前提としています。 また、すべての例でCSSを使用して、ユーザーがブラウザーのサイズを変更したときに画像の幅を変更していますが、ページが読み込まれると画像自体が実際に変更されることはありません。

<picture>要素は、特定のメディア機能の存在に基づいて画像の代替バージョンを提供できるようにするHTML機能です。 これにより、ユーザーがビューポートのサイズを変更したときに画像を切り替えることができ、基本的に画像でアートディレクションを行うことができ、同じシーンのさまざまなものを表示できますが、デバイスのサイズに応じてトリミングまたはズームが異なります。

たとえば、デスクトップやタブレットの大きなデバイスには、中央に小さなオブジェクトがあるワイドショットが適していますが、スマートフォンなどの小さなデバイスでは、トリミングまたはズームインした同じ画像を読み込むことができます。

これが私の画像にアートディレクションをすることを可能にするいくつかのサンプルコードです：

コードについて次の点に注意してください。

• <picture>要素は、ネストされた複数の<picture>要素を子として受け入れます
• <picture>内の各<source>要素は、 media属性を使用して、そのソース画像の使用をトリガーするメディア条件を定義しています。
• <picture>要素は通常の<img>を受け入れます子としての要素。 <picture>をサポートしていない場合、ブラウザはフォールバックとして認識します。
• <picture>要素に直接属性はありません（ <picture>はHTMLのグローバル属性のみを受け入れ、独自の属性はありません）

以下のCodePenはこれを示しています：

新しいウィンドウでデモを開くと、ウィンドウのサイズを変更して画像の変化を確認できます。 ブラウザウィンドウが小さくなるにつれて、画像の被写体がどのように拡大されるかに注目してください。 これは、使用されているデバイスに関係なく適切に見えるレスポンシブアート指向の画像を作成する簡単な方法です。 もちろん、これにはもう少し手間がかかりますが、使用するデバイスで画像を意味のあるものにしたい場合は価値があります。

レスポンシブ画像を支援するツールとサービス

レスポンシブ画像の実装を支援する、無料と商用の両方のツールが無数にあります。 そして、これらのいくつかは、私が議論したコードの多くを書かなくても済むようにするのに役立ちます。 ここにあなたが役に立つと思うかもしれないいくつかがあります：

重要かつ便利なことに、さまざまなサービスがレスポンシブ画像を自動的に実行し、さまざまな画像サイズ、オンザフライ画像生成用のAPIなどの機能を提供します。

WordPress自体にも、レスポンシブ画像のサポートが組み込まれています（バージョン4.4以降）。

検討する価値のあるもう1つのツール/サービスはOptimoleです。 これは、Themeisleの背後にあるチームによって構築された高度な画像最適化および配信ツールです。 これは、視覚的な品質を損なうことなく画像のディスクサイズを縮小するだけでなく、画像CDNを介してWebサイトの訪問者に画像を配信することもできます。 この画像配信機能の側面の1つは、画像がさまざまなデバイスで表示できるように最適化されることです。

Optimoleの無料バージョンが利用可能です。 毎月最大5,000のWebサイトにアクセスでき、すべての自動スケーリング機能、CDNなどを提供します。

ウェブサイトでレスポンシブ画像を使用した経験は何ですか？ 以下のコメントでお知らせください。

ChrisFitzgeraldとKarolKによるレイアウトとプレゼンテーション。