＜img要素＞ - 画像
公開日:
img要素は、画像を表す要素です。
概要
- 名前
- img (Image)
- カテゴリー
- Flow content
- Phrasing content
- Embedded content
- Interactive content: usemap属性を持つ場合のみ。
- Palpable content
- Form-associated element
- 配置できる場所
- Embedded contentが期待される場所。
- コンテンツモデル
- 空要素のため、子ノードを持ちません。
- タグの省略
- 省略できません。
- DOM Interface
- HTMLImageElement
- 仕様書
- https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
属性
alt
画像を表示できない場合の代替テキスト。
src
リソースのアドレス。
srcset
リソースのアドレスの1個以上のセット。ユーザーエージェントは、条件に合わせてこれらの中から画像を選択する。
sizes
srcset属性の画像を選択する時の、基準となる幅を指定する。
crossorigin
この属性を指定すると、リソースの取得がクロスオリジンモード(CORS)で行なわれる。その上で、クッキーなどの情報(クレデンシャル)を送信するか、しないかをキーワードで指定する。列挙属性で、無効な値を指定した場合は初期値が適用される。
- anonymous
- 送信しない。初期値。
- use-credentials
- 送信する。
usemap
画像にイメージマップを適用する時の、対象のmap要素のname属性。先頭にハッシュ(#)を付けること。
ismap
width
横幅。
height
高さ。
referrerpolicy
リソースにアクセスする際のリファラーポリシーをキーワードで指定する。Referrer Policiesを参考。
- no-referrer
- リファラーを送信しない。
- no-referrer-when-downgrade
- https接続以外ではリファラーを送信しない。
- origin
- スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
- origin-when-cross-origin
- 異なるオリジンへのアクセスの場合だけ、リファラーにパスを含めない。
- unsafe-url
- https接続、http接続ともに、スキーム、ホスト、ポート、パスをリファラーに含める。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
基本的な使い方
img要素で画像を表示するには、src属性に画像ファイルのURLを指定します。
画像を表示できない場合に代わりに表示されたり読み上げられる代替テキストを、alt属性で指定できます。表示できない場合とは、URLが間違っている場合だけじゃなく、ユーザーが画像を表示しないように設定している場合、目が不自由な人が音声機能を利用して閲覧している場合など様々です。また、Googleなどの検索エンジンのクローラーは、alt属性を参照して、画像が何なのかを理解するヒントにしています。alt属性は重要な属性であることを認識しておきましょう。
srcset属性とは？
srcset属性は、画像のURLを複数指定するための属性です。複数指定された画像の中から、ブラウザは最適な画像を1つ選んで表示します。srcset属性に対応していない場合、ブラウザはsrc属性の画像を表示します。
2種類の情報
srcset属性でURLを指定する場合、URLの1つ1つに画像の大きさに関する情報を付けなければいけません。情報は2種類のうち、どちらかだけを付けることができます。
| 情報 | 単位 | 説明 |
|---|---|---|
| 幅 | w | 画像の具体的な横幅。例えば、画像の横幅が600pxだったら600wを指定する。 |
| 画素密度 | x | 画像が想定する、デバイスピクセル比。例えば、2xのRetinaディスプレイ用に用意している画像だったら、2xを指定する。 |
構文
srcset属性の記述ルールです。「URL、半角スペース、情報」を1セットにして、任意の数だけ半角カンマ(,)で区切って指定します。空白文字(改行、タブなど)が含まれていても大丈夫です。なお、セットの順番は表示に一切関係ありません。
HTML
<!-- 1セットを指定 -->
<img srcset="image1.png 600w">
<img srcset="image1.png 2x">
<!-- 2セットを指定 -->
<img srcset="image1.png 600w, image2.png 900w">
<img srcset="image1.png 1x, image2.png 2x">
<!-- 3セットを指定 -->
<img srcset="image1.png 600w, image2.png 900w, image3.png 1200w">
<img srcset="image1.png 3x, image2.png 2x, image3.png 1x">ルール
ルールを確認しておいて下さい。
- URLに情報を付けなかった場合、
1xを付けたのと同じ扱いになる。 - 同じsrcset属性の中に、異なる単位があってはいけない。
- 同じsrcset属性の中に、同一の情報があってはいけない。
HTML
<!-- 省略したら1xになる (次の2つは同じ内容) -->
<img srcset="image1.png">
<img srcset="image1.png 1x">
<!-- 1つのsrcset属性の中に異なる単位があってはいけない -->
<img srcset="image1.png 600w, image2.png 3x">
<!-- 1つのsrcset属性の中に同一の情報があってはいけない -->
<img srcset="image1.png 600w, image2.png 900w, image3.png 600w">ブラウザの処理
さて、ブラウザは、現在の画面幅、自身が対応するデバイスピクセル比を考慮して、srcset属性の中から最適な画像を選んで表示します。一番、簡単な例が下記です。今、あなたがお使いのブラウザのデバイスピクセル比は、です。実際にどちらの画像が表示されるのか確認してみて下さいね。デバイスピクセル比が3xのブラウザは、この中で一番近い2xの画像を選択するでしょう。
HTML
<h1>デバイスピクセル比</h1>
<p>ブラウザのデバイスピクセル比が1xなら<a href="./image1.jpg">image1.jpg</a>、2xなら<a href="./image2.jpg">image2.jpg</a>が表示されるはずです。</p>
<p>Chromeの場合、一番大きいサイズの画像をキャッシュしたらそれより小さいサイズの画像は読み込みません。srcset属性の挙動を確かめるには、毎回キャッシュを削除するか、他のブラウザをご利用下さい。</p>
<img srcset="
image1.jpg 1x ,
image2.jpg 2x
">ちなみにスタイルシートなどで画像のサイズを指定していない時、一般的なブラウザは、2xの画像なら1/2、3xの画像なら1/3に画像を縮小して表示します。デバイスピクセル比を反映してくれるというわけです。srcset属性の選択肢を1つだけにすれば強制的に表示させることができるので、試してみましょう。
HTML
<h1>デバイスピクセル比</h1>
<p>下記の画像は全て同じ画像です。</p>
<h2>1x</h2>
<img srcset="image.jpg 1x">
<h2>2x</h2>
<img srcset="image.jpg 2x">
<h2>3x</h2>
<img srcset="image.jpg 3x">次に、幅の情報を付けた時の例を確認しましょう。ブラウザは、現在のウィンドウの幅を考慮して、それに適した画像を選択します。ここで注意しなければいけないのはデバイスピクセル比です。ウィンドウ幅(あなたは)にデバイスピクセル比(あなたは)をかけた値()が、最適な画像を選択する基準幅となります。この基準幅に近くてできればこれよりも大きい画像、が選択されるはずです。基準幅よりも小さい画像を選択したら、画像を引き伸ばして表示しないといけなくなりますからね。色々とウィンドウ幅を変えてリロードしてみて下さい。
HTML
<h1>幅</h1>
<p>ウィンドウ幅とデバイスピクセル比をかけた基準幅に最も近くてできればこれより大きい画像、が表示されるはずです。</p>
<p>Chromeの場合、一番大きいサイズの画像をキャッシュしたらそれより小さいサイズの画像は読み込みません。srcset属性の挙動を確かめるには、毎回キャッシュを削除するか、他のブラウザをご利用下さい。</p>
<img srcset="
image1.jpg 100w ,
image2.jpg 300w ,
image3.jpg 600w ,
image4.jpg 900w ,
image5.jpg 1200w ,
image6.jpg 1500w ,
image7.jpg 1800w
">Chromeの挙動について
さて、Chromeはsrcset属性の中で最適な画像を選択した時、それよりも大きいサイズのキャッシュが既にあれば、そちらを表示する仕様になっています。先ほどの例で言えば、1200pxの画像が最適な状況でも、1800pxのキャッシュを持っていればそちらを表示するということです。
これはそもそもsrcset属性の役割が、同じ内容のサイズ別の写真を取り扱うことを想定しているからです。つまり画面幅によって、写真のサイズ以外が変わることは想定されていません。アスペクト比が変わるのも、もちろんダメ。その前提でいけば、大きい画像を使った方がより綺麗に表示される理屈になりますよね。キャッシュでコストがかからず表示できるなら、より大きな画像が選択されるというわけです。
sizes属性とは？
sizes属性は、srcset属性をサポートするための属性です。srcset属性を先に理解して下さい。通常、ブラウザがsrcset属性の画像を選択する時に基準にするのは、ウィンドウ幅(あなたは)にデバイスピクセル比(あなたは)をかけた値()です。この計算における、ウィンドウ幅の部分を調整できるのが、sizes属性です。
例えば、画面幅の半分の横幅のコンテナがあるとします。この内部に画像を表示することを考えて下さい。
HTML
<h1>幅のコンテナに画像を表示</h1>
<p>コンテナには赤の枠線を付け、画像は半透明にしています。</p>
<p>Chromeの場合、一番大きいサイズの画像をキャッシュしたらそれより小さいサイズの画像は読み込みません。srcset属性の挙動を確かめるには、毎回キャッシュを削除するか、他のブラウザをご利用下さい。</p>
<!-- divの横幅は全体の50% -->
<div>
<img srcset="
image1.jpg 100w ,
image2.jpg 300w ,
image3.jpg 600w ,
image4.jpg 900w ,
image5.jpg 1200w ,
image6.jpg 1500w ,
image7.jpg 1800w
">
</div>鋭い人ならもうお気付きだと思いますが、この場合の最適な基準幅は、ウィンドウ幅()にデバイスピクセル比()をかけた値()ではなくて、ウィンドウ幅の半分、すなわち、コンテナの幅()にデバイスピクセル比()をかけた値()ですよね。何故なら、そうしないと無駄に大きな画像を読み込んでしまいます。だからsizes属性を使って、そのように指定してみましょう。今度はウィンドウ幅(100%)じゃなく、コンテナ幅(50%)に最適な画像を読み込めるはずです。50%を指定したい時は、%ではなくvwの単位を使って下さい。
HTML
<h1>幅のコンテナに画像を表示</h1>
<p>コンテナには赤の枠線を付け、画像は半透明にしています。</p>
<p>Chromeの場合、一番大きいサイズの画像をキャッシュしたらそれより小さいサイズの画像は読み込みません。srcset属性の挙動を確かめるには、毎回キャッシュを削除するか、他のブラウザをご利用下さい。</p>
<h2>50%のコンテナ</h2>
<!-- divの横幅は全体の50% -->
<div class="half">
<img srcset="
image1.jpg 100w ,
image2.jpg 300w ,
image3.jpg 600w ,
image4.jpg 900w ,
image5.jpg 1200w ,
image6.jpg 1500w ,
image7.jpg 1800w
" sizes="50vw">
</div>
<h2>300pxのコンテナ</h2>
<p>おまけに300pxのコンテナの例も見ておきましょう。</p>
<!-- divの横幅は300px -->
<div class="px300">
<img srcset="
image1.jpg 100w ,
image2.jpg 300w ,
image3.jpg 600w ,
image4.jpg 900w ,
image5.jpg 1200w ,
image6.jpg 1500w ,
image7.jpg 1800w
" sizes="300px">
</div>構文
sizes属性は、「基本幅」を最後に指定して、その直前に「メディアクエリ、半角スペース、幅」のセットを、半角カンマ(,)で区切って0個以上、指定します。空白文字(改行、タブなど)が含まれていても大丈夫です。複数の幅を指定するのは、レスポンシブ・ウェブサイトなどで、画面幅によってコンテナのサイズが変わるのに対応するためです。
HTML
<!-- 「基本幅」と0セットを指定 -->
<img sizes="300px">
<!-- 「基本幅」と1セットを指定 -->
<img sizes="(min-width: 500px) 50vw, 100vw">
<!-- 「基本幅」と2セットを指定 -->
<img sizes="(min-width: 1000px) 50vw, (min-width: 500px) 75vw, 100vw">ブラウザは、先頭から順に調査をし、メディアクエリの条件に一致した時点でその幅を選択します。どのメディアクエリの条件にも一致しなかった場合は、基本幅を選択します。そのため、セットの順番は重要です。下記の場合、画面幅が1000px以上だったら50vw、そうではなく500px以上だったら75vw、そうではなければ100vwが選択され、その幅が、srcset属性から画像を選択する時の計算に使用されます。
HTML
<!-- 「基本幅」と2セットを指定 -->
<img sizes="(min-width: 1000px) 50vw, (min-width: 500px) 75vw, 100vw">有効なケース
sizes属性は、srcset属性があって、さらに幅単位(w)が使われている時にだけ有効です。それ以外では意味を持ちません。
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜img要素＞ - 画像</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/img/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>img要素は、画像を表示するための要素です。</p>
<p>当サイトのマスコットキャラクターです。</p>
<p><img src="/image/mascot/200.png" alt="マスコットキャラクター"></p>
</body>
</html>