img は IMaGe(画像)の略です。src 属性には、GIF形式(*.gif)、JPEG形式(.jpg)、PNG形式(*.png)などの画像ファイルを指定します。
HTML4.01 では、画像を表示できないブラウザや、文字は音声に変換して読めても画像を見ることのできない人のために、<img> タグには alt 属性が必須とされていましたが、HTML5 では必須ではなくなるようです。
必須属性ではありませんが、height と width 属性も極力指定するようにしましょう。これらを指定しないと、ブラウザがページを表示する際に、画像を読み込む度に画面全体のレイアウトが変更されてしまい、ページ表示の体感速度が遅くなってしまいます。
<img src="image/sample.gif" alt="イラスト2" width=100 height=100>
HTML5.1 では、スマホやタブレットなど画面のウィンドウ幅に応じた画像を表示するために、srcset 属性と sizes 属性が追加されました。下記の様に使用することで、ビューポートの横幅(width を指定しない div 要素を表示した際の横幅)が 600ピクセル以下の時には small.jpg を、それ以上の時には large.jpg を表示します。sizes の 100vm は、ビューポートの横幅が 600ピクセルの時に small.jpg を本来の大きさの 100% で、横幅が 800ピクセルの時に large.jpg を本来の大きさの 100% の大きさで表示することを示します。Chrome や Firefox でサポートされていますが、Chrome では別画面に遷移しないと画像が自動的に切り替わらないので注意してください。
<img src="small.jpg" alt="..."> <img src="normal.gif" srcset="small.jpg 600w, large.jpg 800w" sizes="100vw" alt="..."> <img src="large.jpg" alt="..."> <div style="width:600px; background-color:#f99; padding-left:5px;">600px</div> <div style="width:800px; background-color:#99f; padding-left:5px; margin-top:5px;">800px</div>
下記の例では、標準解像度(1x)の場合は small.jpg、解像度2倍(2x)のディスプレイの場合は large.jpg を表示します。
<img src="normal.gif" srcset="small.jpg 1x, large.jpg 2x" sizes="100vw">
sizes にはメディアクエリの条件 (@media を参照)を記述することができます。下記の例では、460px より狭い場合は 200 ピクセルで、さもなくばビューポートの 100% の大きさで表示します。
<img src="normal.gif" srcset="small.jpg 460w, large.jpg 800w" sizes="(min-width:460px) 200px, 100vw">