画像要素（img）の仕様と使い方
カテゴリ：HTML編
img要素
画像ファイルをページに表示する際にはimg要素を使用します。
基本的な使い方
通常、以下のようにsrc属性に画像ファイルのパスを指定し、alt属性に画像の説明を記述します。
img属性には閉じタグは必要ありません。
<img src="/images/title_logo.png" alt="タイトル画像">src属性は必須の属性です。
alt属性は画像が表示できない環境（Lynxなどのテキストベースのブラウザ）や視覚障碍者用の音声読み上げソフトのために利用される代替テキスト（フォールバックコンテンツ）です。
alt属性は必須ではありませんが、W3Cの勧告ではすべてのimg要素にalt属性を指定することが推奨されています。
ユーザーエージェントはalt属性の欠落を修復することが推奨されているが、作者はそのような動作に依存してはならない。
なお、装飾用の画像など、説明の必要がない場合は空の値（alt=""）を指定できます。
指定できる画像タイプ
img要素でサポートされる画像タイプは以下になります。
- 静的ビットマップ（PNG、GIF、JPEGなど）
- 単一ページのベクタードキュメント（単一ページのPDF、SVGドキュメント要素を含むXMLファイル）
- アニメーションビットマップ（APNG、アニメーションGIF）
- アニメーション ベクタグラフィックス（宣言的SMILアニメーションを使用するSVGドキュメント要素を持つXMLファイル）
画像の大きさ
表示する画像の大きさはwidthとheight属性（ピクセルで指定）で変更（拡大、縮小）できます。
但しCSSで指定するのが一般的です。
Retinaディスプレイに対応させる
iPhoneなどのRetinaディスプレイは実解像度が2倍です。
このため通常の画像を表示させるとぼやけてしまいます。
すべての画像を対応させる必要はありませんが、タイトル画像など重要な画像にはRetinaディスプレイに対応させた画像を表示することが望ましいでしょう。
デバイスのDPIの大きさに合わせて表示する画像を自動で切り替えるには、srcset属性を使用します。
srcset属性には以下のようにコンマ区切りで複数の画像のパスとピクセル密度を"2x"などのように指定します。
※ピクセル密度記述子を省略した場合は1xとして扱われます。
<img src="/images/title_logo.png" srcset="/images/title_logo@320.png, images/title_logo@640.png 2x">ウインドウサイズに合わせて表示する画像を変える
レスポンシブサイトなどのように、パソコンやスマフォなどのように複数のデバイスに対応させる場合、ウインドウサイズ（ビューポート）に応じて画像を切り替えます。
その場合、srcset属性にウインドウサイズを"320w"などのように指定します。
以下の例では、320wを指定した画像ファイル「320.png」はウインドウサイズが320px以上、640px未満（スマートフォン等）の場合に表示されます。
640wを指定した画像ファイル「640.png」はウインドウサイズが640px以上（パソコン、タブレット等）の場合に表示されます。
<img src="/article/image/320.png" srcset="/article/image/320.png 320w, /article/image/640.png 640w">なお、srcset属性は実際のピクセル数で判定するため、Retinaディスプレイの場合、320wではなく、実際の解像度を基に640wが選択されます。
つまり、Retinaディスプレイでは640wで指定した方の画像が表示さるため、同時にRetina対応もできるのです。
ウインドウサイズに応じて画像の割合を変化させる
記事中の画像など、例えばスマートフォンでは画面の幅いっぱい（100%）で表示したいが、パソコンでは画面の幅の30%で画像を表示したい場合があります。
その場合は、以下のようにsizes属性にメディアクエリ（条件）と比率を"30vw"などのように指定します。
sizes="(min-width: 640px) 30vw, 100vw"以下の例では、ウインドウサイズ（ビューポート）が640px以上の場合は、ウインドウサイズの30%で画像を表示し、ウインドウサイズが640px未満の場合は、ウインドウサイズの100%で画像を表示することを示します。
<img sizes="(min-width: 640px) 30vw, 100vw" src="/article/image/320.png" srcset="/article/image/320.png 320w, /article/image/640.png 640w">実際にWebブラウザの幅を変えてどのように表示されるかを確認してみましょう。
指定できる属性
上に挙げた属性が主に使用される属性ですが、他にも使用できる属性があります。
img要素で使用できる属性は以下となります。
| alt | イメージが利用できない場合に使用する置換テキスト |
|---|---|
| src | リソースのアドレス |
| srcset | さまざまな状況で使用するイメージ（高解像度ディスプレイ、小型モニターなど） |
| sizes | ブレークポイント間のイメージサイズ |
| crossorigin | 要素がcrossorigin要求を処理する方法 |
| usemap | 使用するイメージマップの名前 |
| ismap | イメージがサーバー側イメージマップかどうか |
| width | 画像の幅 |
| height | 画像の高さ |
| referrerpolicy | 要素によって開始されるフェッチのリファラーポリシー |
| longdesc | 「html-longdesc」で定義されているイメージの拡張記述へのリンクを提供するURL |
W3Cによるimg要素の説明
img要素は、イメージとそのフォールバック内容を表します。
srcおよびsrcset属性によって与えられたイメージ、および親がピクチャ要素であれば、以前の兄弟ソース要素のsrcset属性は埋め込みコンテンツです。 alt属性の値とlongdesc属性で参照されるコンテンツはimg要素のフォールバックコンテンツであり、画像を処理できない、または画像の読み込みを無効にしているユーザーとユーザーエージェントには同等のコンテンツを提供します。
公開日時：2018年01月14日 21:08:57
最終更新日時：2022年03月12日 07:17:21
