@ HTML

img 要素

img 要素は Image の略で、ドキュメントに画像を表示します。

elements_img-01

<img src="images/example-img.png" alt="example image">

srcset 属性を使って、デバイスピクセル比が2xの環境用の画像指定が可能です。

elements_img-02

<img src="images/example-img.png"
  srcset="images/example-img.png 1x,
    images/example-img-HD.png 2x"
  alt="example image">

ウィンドウサイズに合わせた動的な画像切り替えが可能です。

elements_img-03

<img src="images/example-img.png" // srcset属性未対応ブラウザ用の画像のパス
  srcset="images/example-img-320.png 320w,
    images/example-img-640.png 640w"
  alt="example image">

上記ソースコードでは、ウィンドウサイズが320pxの時は example-img-320.png が読み込まれ、ウィンドウサイズが640pxの時は example-img-640.png が読み込まれます。

sizes 属性と組み合わせて、ウィンドウサイズに合わせた画像の表示サイズ変更が可能です。

elements_img-04

<img src="images/example-img.png"
  sizes="(max-width: 640px) 100vw, 50vw"
  srcset="images/example-img-320.png 320w,
    images/example-img-640.png 640w"
  alt="example image">

上記ソースコードでは、メディア条件 (max-width: 640px) にマッチすると画像の幅は 100vw (ビューポートの幅の 100%) に、そうでない場合は 50vw 幅になります。