HTML <img> タグ

定義と使用法

<img> タグは HTML ページに画像を埋め込むために使用されます。

技術的には、実際には画像をウェブページに挿入することはなく、画像をウェブページにリンクしています。<img> タグは画像を参照するためのコンテナを作成します。

<img> タグには2つの必須属性があります：

  • src - 画像のパスを指定します
  • alt - 画像が表示できない理由が何であれ、画像の代替テキストを指定します

注意：また、常に画像の幅と高さを指定する必要があります。幅と高さが指定されていない場合、画像の読み込み中にページがフラッシュする可能性があります。

ヒント：画像を別のドキュメントにリンクする場合、以下のようにします。 <img> タグがネストされています <a> タグ内（以下の例を参照してください）。

も参照してください：

HTML 教程：HTML イメージ

HTML DOM リファレンスマニュアル：Image オブジェクト

CSS 教程：画像のスタイルの設定

関連リンク：画像の正しい使用方法

インスタンス

例 1

以下の例では、CodeW3C.comのエンジニアが上海花港で撮影した郁金香の写真をページに挿入しています：

<img src="tulip.jpg" alt="上海花港 - 郁金香" />

実際に試してみる

上海鲜花港 - 郁金香

例 2

画像を挿入するもう一つの例：

<img src="dancer.png" alt="舞者" width="500" height="749">

実際に試してみる

ヒント：ページの下部にさらに例を提供しています。

属性

属性 値 説明
alt テキスト 画像の代替テキストを指定します。
crossorigin
  • anonymous
  • use-credentials
 許可されたクロスオリジンアクセスの第三者サイトからの画像とキャンバス（canvas）を一緒に使用することができます。
height ピクセル 画像の高さを指定します。
ismap ismap 画像をサーバーサイドの画像マッピングとして定義します。
loading
  • eager
  • lazy
 ブラウザが画像を即座にロードするか、あるいは特定の条件を満たすまでロードを遅らせるかを指定します。
longdesc URL 画像の詳細な説明に指向する URL を指定します。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 画像を取得する際に使用する参照情報を指定します。
sizes サイズ 異なるページレイアウトの画像サイズを指定します。
src URL 画像のパスを指定します。
srcset URL-list 異なる状況で使用する画像ファイルリストを指定します。
usemap #mapname 画像をクライアント側のイメージマップとして定義します。
width ピクセル 画像の幅を指定します。

グローバル属性

<img> タグは、以下のイベント属性をサポートしています： HTMLでのグローバル属性。

イベント属性

<img> タグは、以下のイベント属性をサポートしています： HTMLでのイベント属性。

さらに多くの例

例 3

画像のアライメント（CSSを使用）：

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

実際に試してみる

例 4

画像に枠線を追加（CSSを使用）：

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

実際に試してみる

例 5

画像に左右外側マージンを追加（CSSを使用）：

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

実際に試してみる

例 6

画像に上下外側マージンを追加（CSSを使用）：

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

実際に試してみる

例 7

他のフォルダーや他のウェブサイトから画像を挿入する方法：

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

実際に試してみる

例8

画像にリンクを追加する方法

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

実際に試してみる

例9

クリック可能なエリアを持つ画像マッピングの作成方法について説明します。各エリアは超リンクです：

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

実際に試してみる

関連する読み物 - 画像の正しい使用方法

HTML と XHTML の最も注目すべき特徴の1つは、ドキュメントのテキストに画像を含めることができることです。画像は、ドキュメントの内在オブジェクト（内連画像）として、またはダウンロード可能な独立したドキュメント、またはドキュメントの背景として使用できます。

ドキュメントの内容に画像（静止画またはアニメーション効果のあるアイコン、写真、説明、絵画など）を合理に含めることで、ドキュメントがより生き生きとし、より魅力的になり、プロフェッショナルで情報が豊富で簡単に閲覧できるようになります。また、特定の画像を超リンクの視覚的なガイドとして使用することもできます。

しかし、画像を過度に使用すると、ドキュメントが破碎して混乱し、読みにくくなります。ユーザーがページをダウンロードし、表示する際には、多くの不必要な待ち時間が増加します。

以下の記事を読んで、Web 上の主な2つの画像形式：GIF と JPEG、および画像の正しい使用方法を学びましょう：

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値で表示します <img> 要素：

img {
  display: inline-block;
}

実際に試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート