imgタグ

タグ img は画像を作成します。画像へのパスは 属性 src に記述します。終了タグは不要です。

属性

属性	説明
src	画像へのパスを指定します。 必須属性です。
alt	画像が見つからない場合（例：パスが間違っている場合）に 画像の代わりに表示される代替テキスト。 必須属性です。 これがないとバリデーター（HTMLやCSSの 正確性をチェックするプログラム）がエラーを出力します。
width	画像の幅。ピクセル単位（この場合単位は指定しません） または親要素に対するパーセンテージで指定します。
height	画像の高さ。ピクセル単位（この場合単位は指定しません） または親要素に対するパーセンテージで指定します。

注意点

画像に幅も高さも指定しない場合、画像は実際のサイズで 表示されます。高さだけを指定した場合、画像は指定された高さになり、 幅は画像の縦横比が崩れないように自動調整されます。

幅だけを指定した場合も同様に、画像は縦横比を保つように 高さが自動調整されます。

幅と高さの両方を指定した場合、画像の縦横比が 崩れる可能性があります（崩れないかもしれません、運次第です）。 幅や高さ（またはその両方）が実際のサイズより大きい場合、 画像は拡大表示されますが、画質は劣化します。

画像の幅と高さはCSSではなく属性で指定することを お勧めします。これにより、ブラウザは画像を取得した後に 各画像のサイズを計算する必要がなくなり、 画像の読み込みがより速くなります。

必要がない場合、画像の実際のサイズを小さく設定することは お勧めしません。例えば、画像の実際のサイズが 1000 × 1000 ピクセルであるのに、 幅を 100px に設定した場合、画面上では 100 ピクセルで表示されますが、ファイルサイズは 1000ピクセル分のままであり、その結果読み込みに かなり時間がかかります。

例

サイトに画像を追加し、 属性 height と width を 設定しません。画像は実際のサイズで表示されます：

:

例

属性 width を使って画像に幅を追加してみましょう。 この場合、高さは画像の縦横比を保つように 自動調整されるはずです：

:

例

今度は属性 height を使って画像に高さを 追加してみましょう。この場合、幅は画像の縦横比を 保つように自動調整されます：

:

例

画像に同時に高さと幅を追加してみましょう。 この場合、画像の縦横比は崩れるはずです （必ずしもそうとは限りませんが、今回の例では 高さと幅は縦横比が崩れるように選ばれています）：

:

例

画像へのパスを間違えて設定してみましょう （簡単にするために空にします）。画像の代わりに 属性 alt の内容が表示されます （一見普通のテキストに見えますが、コピーしてみてください - 何もコピーできません、画像として扱われます）：

:

関連項目