webmas.jp

画像の URL

src=”” 属性は画像の URL を指定します。この属性は必須です。

<img src="/images/img.png" />

代替テキスト

alt=”” 属性は画像の代わりになるテキストを指定します。ブラウザが画像の読み込みができなかった時や音声読み上げ時にこのテキストを読み上げます。

画像のタイトルではなくどういう内容の画像なのかが分かる説明を記入します。重要でない画像の場合は値を空欄にすることもできますがアクティビティの向上のため指定しておくことが望ましいです。

<img src="abc.png" alt="代替テキスト" />

外部ドメインのリソースの扱い方法を指定

crossorigin 属性は外部サイトから読み込んだ画像に認証を利用するかしないかを指定します。CORS (Cross-Origin Resource Sharing)という仕組みを利用し異なるオリジン（スキーム、ホスト、ポート）から読み込んだ画像を現在のオリジンのものとして扱うことができます。

外部サイトから単に画像を読み込む場合は気にする必要はありませんが、canvas 要素で利用する場合は画像が汚染されてしまいますので認証を利用する必要があります。

認証を利用する

use-credentials を指定します。Cookie、証明書、 HTTP ベーシック認証を使用し、信用情報を伴ってオリジン間リクエスト (HTTP の Origin ヘッダーを持つリクエスト) を送信します。が、サーバーが元のサイトに信用情報を付与していない場合は画像の利用が制限されることがあります。

<img src="https://example.com/abc.png" crossorigin="use-credentials" />

認証を利用しない

anonymous を指定します。オリジン間リクエストを送信しますが、資格情報 (Cookie、証明書、HTTP ベーシック認証等）を送信しないためサーバーがそのオリジンのサイトに資格情報を付与しない場合は画像の利用が制限されることがあります。

<img src="https://example.com/abc.png" crossorigin="anonymous" />

decoding

Web ブラウザに対し画像をどのように表示するかを指示します。

sync

画像を同期的に読み込みます。画像が読み込まれている間は他のコンテンツの読み込みが待機されます。

<img src="abc.png" alt="" decoding="sync" />

async

画像を非同期的に読み込みます。画像と他のコンテンツはそれぞれ待機せずに読み込まれます。

<img src="abc.png" alt="" decoding="async" />

auto

Web ブラウザがどのように画像を読み込むかを選択します。

<img src="abc.png" alt="" decoding="auto" />

画像の高さ

height=”” 属性は画像の高さをピクセルで指定します。height が指定されていて width が指定されていない場合は自動的に width が設定され画像の縦横比が維持されます。

<img src="abc.png" height="300" />

画像を読み込むタイミング

loading 属性を指定すると画像の読み込みを開始するタイミングを指定できます。

eager

ページが読み込まれたタイミングでページ内のすべての画像の読み込みが開始されます。

<img src="abc.png" loading="eager" />

lazy

ページがスクロールされ可視エリアに入ったタイミングで画像の読み込みが開始されます。画像が多いページでは読み込み速度を上げたり、一度にデータ通信する量を削減するなどのメリットがあります。

<img src="abc.png" loading="lazy" />

画像の読み込みサイズ

sizes=”” 属性は srcset=”” 属性と組み合わせ、異なる解像度で画像を設定できます。異なるサイズの画像をいくつか用意しておくと画面サイズが異なる環境で自動的に適切な画像が表示されるようになります。この属性に対応していない Web ブラウザは src=”” で指定された画像を読み込みます。

これは Microsoft の Surface シリーズや Apple の iPhone など、実際のピクセル数と表示上のピクセル数が違うデバイスで役に立ちます。画面の表示上では横幅 1px でもディスプレイの物理的なピクセル数では 2px だった場合に2倍のサイズの画像を読み込むことでより鮮明に画像表示できるようになります。

<img src="img.png" alt="" width="500" sizes="500px" srcset="img300.png 300w, img.png 500w, img1000.png 1000w" />

sizes=”” には srcset=”” で w 単位を指定した時に使用します。この sizes=”” で指示されたサイズで画像を表示するために、srcset=”” で指定された画像の中から Web ブラウザが適切なものをダウンロードして表示します。

上記のソースでは sizes=”500px” なので 500px で表示するために、srcset=”” から適切な画像を Web ブラウザが自動的に選択します。ディスプレイの物理的な解像度が 200% の場合は img1000.png 1000w が選択されます。

また、ビューポートが設定されている場合はメディアクエリを使用し Web ブラウザの幅に応じて異なる画像の指定が可能です。

<img src="img.png" alt="" sizes="(max-width: 500px) 100vw, 500px" srcset="img300.png 300w, img.png 500w, img1000.png 1000w" />

メディアクエリで条件分けする場合は width=””、height=”” は指定しません（指定した場合こちらが優先されてしまうため）。

画像の候補

srcset=”” 属性は Web ブラウザに対して画像の候補を与えます。画像ファイルの URL と画像のサイズ（幅）をセットで記述し、複数指定することができます。画像の幅は x 単位と w 単位のどちらかを指定します。

この属性に対応していない Web ブラウザは src=”” で指定された画像を読み込みます。

x 単位で指定

デバイスの表示倍率に応じて画像を選択する指定です。実際は 1000px ある画像を 500px として表示する場合は 2x と記述します（1000 / 500 = 2）。この単位を使用する場合は sizes=”” 属性の指定は必要ありません。しかしメディアクエリを使用して条件で分けることはできません。

w 単位で指定

Web ブラウザの表示領域の幅によって画像を切り替える場合に使用することができます。この単位を使用する場合は sizes=”” 属性の指定が必要になります。

実際は 1000px ある画像を 500px として表示する場合は 1000w と記述し sizes=”500px” を指定します。

画像の幅

width=”” 属性は画像の高さをピクセルで指定します。width が指定されていて height が指定されていない場合は自動的に height が設定され画像の縦横比が維持されます。

<img src="abc.png" width="300" />

イメージマップ

usemap=”” 属性を指定することでイメージマップを作成することが可能です。この属性には <area> 要素の name 属性を # 付きで指定します。

<p><img src="abc.png" usemap="#map" /></p>
<map name="map">
</map>

<area> 要素についても参照してください。