img : 画像

カテゴリ

<!-- 一般的な例 -->
<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">

<!-- 1.5倍のピクセル密度を持つ端末までは150-...の画像を、2倍(例えばRetina)の密度を持つ端末では200-...の画像を100x150で表示 -->
<img src="/uploads/100-marie-lloyd.jpg" srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x" alt="" width="100" height="150">

<!-- 幅400px(200/50%)以下の端末では..-200の画像を、幅800px(400/50%)以下の端末では..-400の画像を、それ以上の端末では-800pxの画像を画面サイズの半分幅(50%幅)で表示 -->
<img sizes="50vw" srcset="wolf-200.jpg 200w, wolf-400.jpg 400w, wolf-800.jpg 800w" src="wolf-400.jpg" alt="">

<!-- sizes: 幅30em以下の端末では100%幅、それ以上で幅50em以下は50%幅、それ以上は33%-100px -->
<!-- srcset: その計算結果が、200px以下なら..-200、400px以下なら..-400、800px以下なら-800、それ以上なら-1600の画像を使う -->
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="">

説明

画像。HTML5では、現状の多種多様なデバイス環境に対応するために、大幅に拡張された。

属性 属性値の見方

alt  変更[文字列]
画像の代替テキスト。HTML5では限定的な状況において不要になったが(例えば画像管理システムで自動的に出力されたHTMLで、画像に対する適切な説明ができない場合等)、依然として装飾画像等の場合は必要で、その場合は空でもaltを指定する。ここに入れるのは、飽くまで画像の代替になるテキストなので、ファイル名をそのまま入れたりシステムで自動生成されたf:id:hogehoge:20180123012345p:plainとかではなく、画像が無くても問題ない画像の説明を入れる
crossorigin  newanonymous|use-credentials
オリジンをまたいでリンク先リソースを取得する場合に、以下の通り情報を付与する。CORS
  • anonymous: HTTP Originヘッダー有り/CookieやBASIC認証情報等の信用情報無し
  • use-credentials: HTTP Originヘッダー有り/CookieやBASIC認証情報等の信用情報有り
  • 指定なし: HTTP Originヘッダー無し

他オリジンの画像を利用してcanvasに描画する場合、これをちゃんと設定しておかないと、描画したデータを取得できなくなる(ブラウザ画面上では見えるが、ファイルに保存したりできなくなる)。勝手に他所の画像を利用するな、という事なので、もちろん他所の側の設定も必要で、Access-Control-Allow-Origin HTTPヘッダーを適切に設定する。

decoding  未来sync|async|auto
画像のデコード方式を指定。画像のデコードというのは、画像データを解析して画面に表示できる状態に落とし込む感じ。
  • sync: コンテンツと同期してデコード
  • async: コンテンツと非同期でデコード
  • auto: ブラウザ任せ
height  変更[正の整数]|0
HTML5でパーセンテージ指定が不可になった。
ismap(真偽値)
サーバーサイドイメージマップ。っていと何か凄い技術っぽいけど、要するに画像リンクをクリックした時にURLにクリック位置の座標を送る。?x=12&y=34みたいな感じ。親要素にhref属性付きのaが必要。
longdesc[URL]
詳細説明のURL。一旦廃止されたものの、再検討の結果5.2と5.3 2018/8/9ドラフト時点では復活している。が、Living Standardでは廃止する方向の模様。代わりにaを使って説明にリンクする等を検討する点は初期から記載されていて、それに従っておくのが無難そう。
referrerpolicy  new[列挙型]edgeiesafariios
リファラー(REFERER)をリクエスト時に送信するかどうかを指定する。Referrer Policyに則ったキーワードを指定する。
sizes  new([メディアクエリ] [CSSの長さ],)*[CSSの長さ]iesafari
このメディアクエリに合致する場合はこの幅で、このメディアクエリに合致する場合はこの幅で、どれにも合致しない場合は最後の幅で表示、という感じで指定する。

ここの[CSSの長さ]にはパーセンテージは使えない制限があり、代わりにvwを使う。

src  必須[URL]
srcset  new([URL] ([正の整数]w|([正の数値]|0)x)?)(,([URL] ([正の整数]w|([正の数値]|0)x)?)*ieedgechromeopera
[正の整数]wでは画像幅(この幅で表示したいという値ではなく、実際の画像の幅)を指定、[正の数値]xではピクセル密度を指定。幅指定があるものが1つでもある場合、sizes属性の指定も必須。
つまり、Retinaではこの画像、非Retinaではこの画像という場合は2xとかx付きの値、画面サイズに応じて画像と表示サイズを出し分けたい等メディアクエリで細かく制御したい場合は120wとかw付きの値を使う。
usemap#[文字列]
イメージマップを利用する場合、その名前。mapのname属性。map name="hoge"の場合、img usemap="#hoge"になる。
width  変更[正の整数]|0
HTML5でパーセンテージ指定が不可になった。
align
代わりにCSSを使用
border
代わりにCSSを使用
hspace
代わりにCSSを使用
name
代わりにid属性を使用
vspace
代わりにCSSを使用