HTML
<img src="image/sample.gif" alt="イラスト２" width=100 height=100>
表示
img は IMaGe(画像)の略です。src 属性には、PNG形式(*.png)、JPEG形式(.jpg)、SVG形式(*.svg)、GIF形式(*.gif) などの画像ファイルを指定します。
アイコンなどのように色数の少ないものは PNG形式、写真などの様に色数の多いものは JPEG形式、拡大しても綺麗に表示したい場合は SVG形式 を使用することが多いです。GIF形式はあまり使用されなくなりましたが、GIFアニメを表示したい場合などで利用されています。
height, width 属性、または CSS で高さと横幅を指定しておかないと、画像を読み込んだ時点で高さと横幅が変動し、画面読み込み状況によって画面レイアウトが変わってしまうため、高さと横幅は画像を読み込む前に指定しておく方が望ましいようです。
<img src="image/sample.gif" alt="イラスト２" 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">
画像データを文字列として直接HTMLに埋め込むこともできます。下記の例では GIF ファイルをBASE64で文字列化し、data: スキーマと MINEタイプ、エンコード情報を付加して、src 属性に指定しています。
<img alt="..." src="data:image/gif;base64,R0lGODlhEgATAPcQAAAAAICAgIAAAICAAA...">
