画像のタグ

画像はインターネットの重要な部分であり、ウェブページを豊かでカラフルにします。本章では、ウェブページに画像を挿入する方法を紹介します。

<img>

<img> タグは画像を挿入するために使用されます。これは自己完結型で、終了タグはありません。

<img src="foo.jpg">

上記のコードは、ウェブページに画像 foo.jpg を挿入します。src 属性は画像のURLを指定します。この例では相対URLを使用しており、画像はウェブページと同じディレクトリにあります。

<img> はデフォルトでインライン要素として扱われ、テキストと同じ行に表示されます。

<p>Hello<img src="foo.jpg">World</p>

上記のコードのレンダリング結果は、テキストと画像が同じ行に表示されることです。

画像はデフォルトで元のサイズで表示されます。もし画像が大きくてテキストと同じ行にある場合、その画像は行の高さを押し上げ、画像の下辺がテキストの下辺と同じ水平線上に表示されます。

<img> タグは <a> タグの内部に配置することができ、画像がクリック可能なリンクになります。

<a href="example.html">
  <img src="foo.jpg">
</a>

上記のコードでは、画像がリンクとして機能し、クリックすると別のページに移動します。

（1）alt 属性

alt 属性は、画像のテキスト説明を設定するために使用されます。画像が表示されない場合（例：ダウンロードエラーやユーザーが画像の読み込みを無効にした場合）、その位置にこのテキストが表示されます。

<img src="foo.jpg" alt="サンプル画像">

上記のコードでは、alt は画像の説明です。画像のダウンロードに失敗した場合、ブラウザはその位置に「サンプル画像」というテキストを表示します。

（2）width 属性、height 属性

画像はデフォルトで元のサイズで挿入されますが、width 属性と height 属性で表示時の幅と高さを指定することができます。単位はピクセルまたはパーセントです。

<img src="foo.jpg" width="400" height="300">

上記のコードでは、width 属性で画像の幅を400ピクセル、height 属性で高さを300ピクセルに設定しています。

注意すべき点として、これらの属性を設定すると、ブラウザは画像の読み込みが成功したかどうかにかかわらず、そのサイズ分のスペースを事前に確保します。しかし、CSSで画像のサイズを指定することができるため、これらの属性を使用することは推奨されません。

一つの特殊なケースとして、width 属性と height 属性のうち片方だけを設定し、もう片方を設定しない場合があります。この場合、ブラウザは画像の元のサイズに基づいて対応するサイズを自動で設定します。例えば、画像のサイズが 800ピクセル x 800ピクセルで、width 属性を200ピクセルに設定した場合、ブラウザは height を自動的に200ピクセルに設定します。

（3）srcset と sizes

詳しくは後述する「レスポンシブ画像」の章を参照してください。

（4）referrerpolicy

<img> タグによって画像が読み込まれると、デフォルトでHTTPリクエストに Referer ヘッダーが含まれます。referrerpolicy 属性は、この動作を設定するためのものです。

（5）crossorigin

時折、画像とウェブページが異なるドメインに属している場合、画像の読み込みはクロスオリジンリクエストを引き起こすことがあります。相手のサーバーがクロスオリジン認証を要求する可能性があります。この属性は、ブラウザがクロスオリジン形式で画像をダウンロードするかどうかを指定します。

簡単に言うと、この属性を有効にするとHTTPリクエストのヘッダーに origin フィールドが追加され、リクエスト元のドメインが記載されます。この属性を有効にしない場合、origin フィールドは追加されません。

この属性には2つの値を設定できます。

• anonymous：ユーザー認証情報（通常はCookie）なしのクロスオリジンリクエスト。
• use-credentials：ユーザー認証情報を伴うクロスオリジンリクエスト。

以下はその例です。

<img src="foo.jpg" crossorigin="anonymous">

crossorigin 属性の値が省略された場合、それは anonymous と同じ意味です。

<img src="foo.jpg" crossorigin>

（6）loading

デフォルトでは、ブラウザは <img> タグを解析するとすぐに画像の読み込みを開始します。長いウェブページでは、この動作は帯域幅の無駄遣いになる可能性があります。なぜなら、ユーザーがページの最後までスクロールしない可能性があるからです。ユーザーがすぐにページを閉じた場合、視界に入っていない画像の読み込みに使われた帯域幅はすべて無駄になります。

loading 属性はこの動作を変更し、画像の遅延読み込みを指定することができます。つまり、画像がデフォルトでは読み込まれず、ユーザーの視界に入った時に初めて読み込まれるため、帯域幅を節約できます。

loading 属性は以下の3つの値を取ることができます。

• auto：ブラウザのデフォルトの動作であり、loading 属性を使用しない場合と同じです。
• lazy：遅延読み込みを有効にします。
• eager：ページ上のどの位置にあるリソースでも即座に読み込みます。

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

インライン画像の遅延読み込みは、ページレイアウトの再配置を引き起こす可能性があるため、この属性を使用する際には画像の高さと幅を指定することをお勧めします。

<figure> と <figcaption>

<figure> タグは、画像と関連情報を一緒に包む画像ブロックと見なすことができます。<figcaption> はオプションの子要素であり、通常タイトルを配置するために使用される画像のテキストキャプションを表し、複数使用できます。

<figure>
  <img src="https://example.com/foo.jpg">
  <figcaption>サンプル画像</figcaption>
</figure>

画像だけでなく、<figure> タグは引用、コード、詩などもラップできます。つまり、メインコンテンツと付加情報を一緒に包む意味論的なコンテナです。

<figure>
  <figcaption>JavaScriptコード例</figcaption>
  <p><code>const foo = 'hello';</code></p>
</figure>

レスポンシブ画像

異なるサイズのデバイスで優れた表示結果を生み出すウェブページのデザインを、「レスポンシブデザイン」 と呼びます。レスポンシブデザインのウェブ画像を「レスポンシブ画像」と呼びます。

レスポンシブ画像には多くの解決策があり、JavaScriptやCSSで実現することもできます。ここでは、意味論的に最適なHTML方法のみを紹介します。これはブラウザでネイティブにサポートされています。

問題の発端

ご存じの通り、<img> タグはウェブページに画像を挿入するために使用され、すべての状況で同じ画像が挿入されます。

<img src="foo.jpg">

上記のコードは、デスクトップとモバイルの両方で、挿入されている画像ファイルfoo.jpgを表示します。

この処理方法は確かにシンプルですが、3つの大きな欠点があります。

（1）サイズ

一般的に、デスクトップでは大きなサイズの画像が表示され、ファイルサイズが大きくなります。モバイルの画面は小さいため、小さなサイズの画像が必要であり、帯域幅を節約し、ウェブページのレンダリングを加速できます。

（2）ピクセル密度

デスクトップモニターは一般に1倍のピクセル密度ですが、モバイルディスプレイはしばしば複数倍のピクセル密度を持っています。つまり、表示時に複数のピクセルが1つのピクセルに合成され、このような画面はRetinaディスプレイと呼ばれます。画像ファイルはデスクトップでは非常に鮮明に見える可能性がありますが、モバイルに表示すると少しぼやけてしまいます。なぜなら、画像のピクセル密度がそれほど高くなく、ブラウザが画像の各ピクセルを周囲のピクセルに自動的にコピーして、ピクセル密度の要件を満たすからです。その結果、画像の鮮明さが低下します。

（3）視覚スタイル

デスクトップモニターは面積が大きいため、画像はより多くの詳細を収容できます。モバイルの画面は小さいため、多くの詳細ははっきりと見えず、重点を強調する必要があります。

上記の2枚の画像では、下のモバイル画像はトリミングされた後、画像の重点がより強調され、明らかに効果が良くなっています。

srcset属性

これらの問題を解決するために、HTML言語は完全なソリューションを提供しています。まず、<img>タグはsrcset属性を導入しました。

srcset属性は、異なるピクセル密度の画面に適応するために、複数の画像を指定します。その値はカンマで区切られた文字列であり、各部分は画像のURLの後にスペースとピクセル密度の記述子が続きます。以下の例をご覧ください。

<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">

上記のコードでは、srcset属性は3つの画像URLを示しており、3つの異なるピクセル密度に対応しています。

画像URLの後にあるピクセル密度記述子の形式は、ピクセル密度の倍率 + 文字xです。1xは1倍のピクセル密度を示し、省略可能です。ブラウザは現在のデバイスのピクセル密度に基づいて、ロードする画像を選択します。

もしsrcset属性が条件を満たさない場合、src属性で指定されたデフォルトの画像がロードされます。

sizes属性

ピクセル密度の適応は、同じサイズの画像を表示する場合に適しています。異なるサイズの画面で異なるサイズの画像を表示したい場合、srcset属性だけでは不十分で、必ずsizes属性と組み合わせる必要があります。

最初のステップとして、srcset属性はすべての利用可能な画像を列挙します。

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     src="foo-1280.jpg">

上記のコードでは、srcset属性は4枚の利用可能な画像を列挙しており、各画像のURLの後にスペースと幅の記述子が続きます。

幅の記述子は画像の元の幅にwという文字を追加したものです。上記の例の4つの画像の元の幅はそれぞれ160ピクセル、320ピクセル、640ピクセル、1280ピクセルです。

次のステップとして、sizes属性は異なるデバイスの画像表示幅を列挙します。

sizes属性の値はカンマで区切られた文字列であり、最後の部分を除き、前の各部分は括弧内に配置されたメディアクエリ表現であり、後ろには空白と画像の表示幅が続きます。

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="foo-1280.jpg">

上記のコードでは、sizes属性は3種類の画面条件と対応する画像表示幅を示しています。幅が440ピクセルを超えないデバイスでは、画像の表示幅は100％です；幅が441ピクセルから900ピクセルのデバイスでは、画像の表示幅は33％です；幅が900ピクセルを超えるデバイスでは、画像の表示幅は254pxです。

3番目のステップとして、ブラウザは現在のデバイスの幅に基づいてsizes属性から画像の表示幅を取得し、srcset属性からその幅に最も近い画像を選択してロードします。

現在のデバイスの画面幅が480pxであると仮定すると、ブラウザはsizes属性から画像の表示幅が33vw（すなわち33％）であり、これは160pxに等しいことを取得します。srcset属性の中には、ちょうど幅が160pxの画像があるため、foo-160.jpgをロードします。

sizes属性を省略すると、ブラウザは実際の画像表示幅に基づいてsrcset属性から最も近い画像を選択します。一度sizes属性を使用すると、必ずsrcset属性と組み合わせて使用する必要があります。単独でsizes属性を使用することは無効です。

<picture>

レスポンシブな使用法

<img>タグのsrcset属性とsizes属性は、それぞれピクセル密度と画面サイズの適応を解決しますが、異なるピクセル密度と異なるサイズの画面を同時に適応させるには<picture>タグを使用する必要があります。

<picture>はコンテナタグであり、内部に<source>と<img>を使用して、異なる状況でロードされる画像を指定します。

<picture>
  <source media="(max-width: 500px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

上記のコードでは、<picture>タグの内部に2つの<source>タグと1つの<img>タグがあります。

<picture>内部の<source>タグは、主にmedia属性とsrcset属性を使用します。media属性はメディアクエリ表現を提供し、srcset属性は<img>タグのsrcset属性であり、ロードする画像ファイルを示します。実際にはここでもsizes属性を使用できますが、media属性があるため必要ありません。

ブラウザは<source>タグが現れる順序に従って、順次現在のデバイスがmedia属性のメディアクエリ表現を満たしているかどうかを判断します。満たしている場合は、srcset属性で指定された画像ファイルをロードし、以降の<source>タグと<img>