img要素
img要素はイメージを表示するための要素です。
イメージとはPNGやGIF、JPEGといったビットマップファイルや、PDFファイルやSVGファイルといったベクターファイル、APNGやアニメーションGIFといったアニメーションビットマップファイル、SMILアニメーションのSVGファイルといったアニメーションベクターファイルなどのことです。
src属性で画象のURLやパスを指定し、alt属性で画象がない場合や取得に失敗した場合の代替テキストを指定できます。
<img src="images/photo.jpg" alt="代替テキスト">width属性とheight属性でイメージの横幅や高さが指定できます。
指定された数値はピクセルで計算され、width属性とheight属性を合わせて指定することで要素の高さ、横幅を指定でき、どちらか片方のみが指定されている場合は縦横比を保ったまま縮小拡大されます。
<img src="images/photo.jpg" width="200" height="200" alt="代替テキスト">usemap属性を持つ場合はインタラクティブコンテンツとしても扱われ、クリッカブルマップとして利用するmap要素のname属性が指定できます。
<img alt="" src="http://www.webcreativepark.net/sample/images/2013-12-05%2013.22.31.jpg" width="500" height="500" usemap="#sample">
<map name="sample">
<area shape="rect" coords="0,0,250,250" href="http://www.webcreativepark.net/sample/" alt="ホーム">
</map>このサンプルではarea要素で指定した画象の左上の250ｘ250がクリック領域になります。
また、img要素がhref属性をもったa要素の内側に存在する場合にismap属性を指定することでサーバーサイトにクリックされた画像の座標を送信するサーバーサイド・イメージマップとして利用できます。
<a href="sample.php"≶<img src="sample.jpg" ismap="ismap" alt=""></a>crossorigin属性を指定することで異なるOrigin(オリジン)からのリソース取得を制御することも可能です。
srcset属性
srcset属性は執筆時点(2014年4月)ではGoogle Chrome34以上でのみ利用可能です。
次のように指定することで、Device Pixel Ratioが2の端末ではimg@2.pngを、それ以外ではimg.pngを読み込み表示を行います。
<img src="img.png" srcset="img@2.png 2x">参考URL
登録日 : 2013年11月29日 最終更新日 : 2014年4月15日