HTMLのimgタグとは？属性・使い方・ブラウザー互換性と活用例
imgタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。画像を表示。内容を伝える alt、寸法の width・height を設定します。装飾画像は alt="" にします。
<img> は、画像を表示。内容を伝える alt、寸法の width・height を設定します。装飾画像は alt="" にします。この記事では「図の意味と寸法を伝える」場面を例に、HTMLの書き方、属性、対応状況、実装時の注意点を確認します。
imgタグの役割と選び方
どんな場面で使うか
画像ファイルは連載のZIPにあります。ページ冒頭の主要画像へlazyを付けると表示が遅れる場合があります。情報画像には内容に合うalt、装飾画像には空のaltを設定します。
開始タグ・終了タグと配置
<img> は空要素です。終了タグ </img> や内側の本文は書きません。 HTMLの見た目を変えるときは、意味を持つタグの選択とCSSの指定を分けて考えます。
imgタグの属性
主に使う属性
src：読み込むリソースのURL。存在するファイルへの正しいパスを指定します。alt：画像や画像リンクの代替テキスト。情報の意味を伝え、装飾画像なら空文字にします。width：幅。多くの画像・動画要素では数値で寸法を指定し、CSSの表示サイズとは区別します。height：高さ。幅との比率を適切にして読み込み前の領域も確保します。loading：遅延読み込みの指定。lazy・eagerを用途に応じて使い、最初に必要な画像を不必要に遅らせません。decoding：画像のデコード方法に関するヒント。asyncなどの指定は表示を保証する命令ではありません。srcset：画像候補と幅・解像度の組。ブラウザーが表示条件に合う候補を選びます。sizes：画像の表示幅の見込み。幅記述子付きsrcsetと組み合わせ、実際のCSSレイアウトに合わせます。crossorigin：オリジンをまたぐ取得時のCORS設定。anonymousなどを使い、配信元側の許可と合わせます。referrerpolicy：リソース取得や移動時に送る参照元情報の方針。例は no-referrer です。
共通属性と指定時の注意
id：文書内で一意な識別子。ラベル、ページ内リンク、JavaScriptからの参照に使います。class：CSSやJavaScriptで複数の要素をまとめて選びます。見た目の指定だけでは要素の意味は変わりません。lang：その内容の言語。日本語ならjaを指定します。data-*：アプリ独自の値を保持します。秘密情報を置く場所ではありません。
属性一覧は実用上の主要項目です。歴史的な属性や実験的な拡張まで採用を推奨するものではありません。詳細な定義は末尾の仕様とMDNを確認してください。
活用事例：図の意味と寸法を伝える
HTMLのコード例
<img src="./workshop.svg" alt="HTMLからCSS、JavaScriptへ進む学習順" width="640" height="480" loading="lazy">試す手順と確認する結果
HTML入門で作った index.html をコピーして練習用にします。文書設定の例は head、表示する内容の例は body の適切な位置に配置してください。表・フォーム・ルビなどの例は、必要な親要素ごと使います。 保存後に再読み込みし、「図の意味と寸法を伝える」という目的に合う構造になったかを開発者ツールのElementsで確認します。ソースとDOMが違う場合は、不正な入れ子によるブラウザーの補正がないか調べます。
例中の example.com は説明用のドメインです。外部ファイルや送信先がある例では、実在する自分のファイル・処理へ置き換えます。HTMLのタグを置くだけで、サーバー処理やファイルが自動生成されることはありません。
imgタグのブラウザー互換性
要素本体の対応開始バージョン
2026年9月21日確認のMDN Browser Compatibility Dataを基にした情報です。以下はデスクトップ版の要素本体の対応開始版で、属性・API・メディア形式まで含めて完全動作を保証する表ではありません。
- Chrome：1以降
- Edge：12以降
- Firefox：1以降
- Safari：1以降
「補足条件あり」「部分対応」の場合は、出典の該当ブラウザーの注記を確認してください。iOS版Safari・Android版Chromeなどは別の実装・配信条件もあるため、下の互換性資料のモバイル欄を確認し、利用対象の実機でも試します。
属性ごとの対応差
要素が使えても、追加された属性は使えない場合があります。以下は今回扱う属性のうち、互換性データに独立した項目があるものです。省略された属性が非対応という意味ではありません。
src：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。alt：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 3以降。width：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 3以降。height：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 3以降。loading：Chrome 77以降 ／ Edge 共通エンジンのデータを参照（下の出典で確認） ／ Firefox 75以降 ／ Safari 15.4以降。decoding：Chrome 65以降 ／ Edge 共通エンジンのデータを参照（下の出典で確認） ／ Firefox 63以降 ／ Safari 11.1以降。srcset：Chrome 34以降 ／ Edge 12以降 ／ Firefox 38以降 ／ Safari 8以降。sizes：Chrome 38以降 ／ Edge 12以降 ／ Firefox 38以降 ／ Safari 9.1以降。crossorigin：Chrome 13以降 ／ Edge 12以降 ／ Firefox 8以降 ／ Safari 6以降。referrerpolicy：Chrome 51以降 ／ Edge 共通エンジンのデータを参照（下の出典で確認） ／ Firefox 50以降 ／ Safari 14以降。
実装前後のチェック
意味・操作・表示を確認する
- 目的が「図の意味と寸法を伝える」に合っているか、タグ名ではなく内容の意味から判断する。
- 属性は対象要素で定義されているものを使い、同名でも別の要素の意味を持ち込まない。
- リンクやフォームを含む場合は、Tab・Enter・Spaceなど標準の操作で利用できるか確認する。
- 320px程度の画面幅や文字拡大時にも、内容や操作部分が欠けないか確認する。
- 新しい属性やAPIを使う場合は、要素本体とは別に対応状況を確認する。
関連する要素と次の学習
<picture>の使い方<source>の使い方<video>の使い方<audio>の使い方<track>の使い方<iframe>の使い方- HTMLタグの全体一覧
- CSSプロパティの実例集
- 最初のHTMLを作る手順
参考資料と更新方針
互換性情報は確認時点の記録です。データはMDN Browser Compatibility Data（CC0-1.0）を参照しています。ブラウザーの更新や仕様変更があるため、新規導入時にはリンク先の最新情報も確認してください。