img要素

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

alt

src属性で指定した画像を表示できない際に、代替えテキストとして表示 する内容を指定します。画像のタイトルではなく、その画像の内容を説明するテキストを設定することが望ましいです。

src

必須の属性となります。参照する画像のパスを相対パス、または絶対パスで指定します。埋め込むことができるのはJPG、PNG、GIF、PDF、SVGなどの画像ファイルです。

srcset

デバイスの解像度に応じて複数の画像ファイルを指定したい場合に使用します。「,（カンマ）」で区切り、複数の画像パスを指定します。また、幅や高さ、解像度の倍数をパスの横に指定します。こちらの要素を指定することで、Retinaなど高解像度デバイスの画像ぼやけ対策となります。詳しくは、下記使用例を参照してください。

crossorigin

この属性は、読み込む画像をCORSを使用して取得するか、そうでないかを示します。CORSが有効な画像は、同じサイトから提供された画像のようにcanvas要素で再利用できます。

• anonymous

  クロスオリジン要求は実行されますが、信用情報は送信されません。サーバがリソース提供元サイトに信用情報を付与しない場合、画像の使用は制限されます。

• use-credentials

  クロスオリジン要求は実行され、信用情報も送信されます。信用情報の送信にはCookie、証明書、ベーシック認証が使用されます。しかし、サーバーがリソース提供元サイトに信用情報を付与しない場合、画像の使用は制限されます。

usemap

画像をクライアントサイドのプログラムでmap要素と関連付けたい場合に使用します。値には関連付けたいmap要素のname属性に「#」をつけたものを指定します。（a要素のhref属性にアンカーを指定するときと同様の形式です。）

ismap

サーバーサイドのプログラムへのリンクを指定したa要素で、この属性を指定したimg要素を囲む形で使用します。img要素で表示している画像がクリックされてプログラムを呼び出した際に、画像上のクリックされた座標値（x座標,y座標）が送信されます。この属性は論理属性です。

width

画像の幅を指定します。

height

画像の高さを指定します。

使用例

ベースとなる画像とは別に、Retina対策で表示する画像を使い分けるときのサンプルコードです。通常は「sample.jpg」が表示されますが、Retinaディスプレイなど高解像度のときは「2x」指定された「sample_x2.jpg」が表示されます。

<img src="images/sample.jpg" srcset="images/sample_x2.jpg 2x" alt="srcset属性のサンプル画像">

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。