HTML5のEmbedded Content～img要素～ - チョコパイを240こ食べたエンジニア

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

Embedded Content関連

img要素

画像またはそのフォールバックコンテンツ(外部リソースが使用できないときに使用するコンテンツ)を表す。

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・form-associated要素
・usemap 属性がある場合、インタラクティブコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性
・alt - 画像が利用できない場合の代替テキスト
・src - リソースのアドレス
・srcset - 異なる環境で使用する画像のリスト (例：高解像度のディスプレイ用の画像、画面幅の小さいディスプレイ用の画像)
・sizes - ブレークポイントごとの画像幅を指定
・crossorigin - クロスオリジンの指定。anonymousなら認証情報モードを"same-origin"としてリクエスト。use-credentialsなら認証情報モードを"include"としてリクエスト。
・usemap - イメージマップの設定
・ismap - サーバサイドイメージマップの設定
・width - 画像の横幅
・height - 画像の高さ
・referrerpolicy - リファラーポリシーの設定
・longdesc - 画像の詳細な説明へのリンクの設定

タグの記載場所
・エンベディッドコンテンツを配置できる場所

▼srcsetでピクセル密度記述子を用いた指定

画像URLが何倍のピクセル密度デバイス用のものかを示す。
[画像URL(半角スペース)〇x]の形式で記載。〇には浮動小数点数を指定する。2xなら2倍、3xなら3倍のピクセル密度のデバイス用の画像を示す。
srcset属性に属性に未対応の環境やピクセル密度が1倍の場合はsrc属性に指定した画像が表示される。

<div>
    <h4>src属性のみ指定</h4>
    <img src="500_ice.JPG" alt="">
</div>
<div>
    <h4>ピクセル密度2倍のデバイス向け指定あり</h4>
    <img srcset="500_ice.JPG 1x, 1000_ice.JPG 2x" src="500_ice.JPG">
</div>

PCで表示したとき
f:id:chooringo:20190420205247p:plain

iPhone8で表示したとき
f:id:chooringo:20190420192418p:plain

▼srcsetで幅記述子を用いた指定

画像URLの画像自体の幅を示す。ブラウザがピクセル密度や表示させる幅などを見て最適な画像をよしなに選んでそれだけロードして表示。
[画像URL(半角スペース)〇w]の形式で記載。〇には負ではない整数を指定する。500wなら画像の幅が500px。

<div>
    <h4>画像幅指定あり</h4>
    <img srcset="500_ice.JPG 500w, 1000_ice.JPG 1000w, 2000_ice.JPG 2000w" src="500_ice.JPG" width="500" alt="">
</div>

PCのchromeブラウザ幅529pxで表示したとき
f:id:chooringo:20190420223011p:plain

PCのchromeブラウザ幅1040pxで表示したとき
f:id:chooringo:20190420223025p:plain

iPhone8(ブラウザ幅375px)で表示したとき
f:id:chooringo:20190420221603p:plain

▼sizesで画像幅を指定

vw(viewportのwidth)やpxで指定。
ブラウザが、この指定に加えてピクセル密度などを見て最適な画像をよしなに選んでそれだけロードして表示。

<div>
    <h4>sizes指定あり</h4>
    <img sizes="(max-width:1000px)100vw, (max-width:2000px)500px" 
              srcset="500_ice.JPG 500w, 
                           1000_ice.JPG 1000w, 
                           2000_ice.JPG 2000w" 
              src="500_ice.JPG" alt="">
</div>