img要素とは？初心者が押さえる基本と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

img要素とは？初心者が押さえる基本と使い方ガイド

ウェブページで写真（関連記事：写真ACを三ヵ月やったリアルな感想【写真を投稿するだけで簡単副収入】）やイラストを表示したいときに欠かせないのが img要素です。「img要素」という言葉は、HTML の中で画像を表示するためのタグを指します。ここでは、初心者にも分かるように、基本的な使い方と大切なポイントを整理します。

ポイント1: src属性で画像の場所を指す img要素の基本は src 属性です。ここに画像ファイルの URL やパスを指定します。正しく指定しないと画像は表示されません。絵のファイル名やサーバー上の場所を確認しましょう。

次に、alt属性 についてです。alt は「代替テキスト」と呼ばれ、画像が表示されないときに代わりに文字で内容を伝えます。視覚に頼れない人にも情報を届けるため、必ず意味のある alt テキストを用意しましょう。画像が装飾目的の場合は alt="" のように空にして読み上げを避けるのも選択肢です。

画像の大きさを決めるには width と height を使います。これらはピクセル単位です。未指定のときは元の画像サイズになります。現場では CSS でサイズを調整することが多いですが、HTML の width/height もページのレイアウトを安定させるのに役立ちます。

img要素の主な属性と意味

以下の表は、よく使う属性とその役割をまとめたものです。実務でも役立ちます。

<th>属性

説明
src	表示する画像ファイルの場所を指定します。必須です。
alt	画像の内容を文字で説明します。スクリーンリーダー対策と SEO の基本。
width	表示幅をピクセル単位で指定します。未指定時は元のサイズ。
height	表示高をピクセル単位で指定します。未指定時は元のサイズ。
loading	画像の読み込み方法を指定します。lazy にするとスクロール時に読み込み、初期表示を軽くできます。
decoding	ブラウザが画像をデコードする方式を決定します。auto / sync / async のいずれかです。

使い方のコツ alt は必ず設定しましょう。装飾用の画像には alt="" を付けると読み上げの情報量を減らせます。意味のある画像には内容を的確に伝えるテキストを設定します。

SEO の視点からは、画像ファイル名にも意味のある名前をつけると効果がありますが、本文中の alt テキストが最も重要です。さらに読み込み速度を改善するには lazy loading を活用するのがおすすめです。

実務での活用例と注意点

商品ページの場合は src に商品画像のパス、 alt に商品名と特徴を短く入れます。たとえば「ミニペンケースレッド」です。デザイン上の装飾画像には alt を空にし、意味のある画像には的確な説明を入れると良いでしょう。

複数の画像を並べるときは width/height を揃えると見た目が整います。遅延読み込みを設定すると初期表示のデータ量が減り、ページの表示が速くなります。

アクセシビリティとレスポンシブの基本

画像が情報を補完する場合は alt テキストを適切に設定します。装飾的な画像の場合は alt を空にして、スクリーンリーダーの読み上げを邪魔しないようにします。レスポンシブ対応の基本は、CSS で幅を 100% にし height を auto にする考え方ですが、ここでは説明を割愛しても、HTML だけでも役立つ基本を押さえましょう。

最後に、img 要素はウェブページの視覚的要素を作るための重要な道具です。使い方を正しく学べば、読みやすさ・アクセシビリティ・SEO のすべてを向上させることができます。

img要素の同意語

img要素: HTMLで画像を表示する要素。タグを指す正式名称です。
HTML画像要素: HTMLの中で画像を表示する要素のこと。タグ名はimgで、画像を文書内に挿入します。
画像要素: 画像を表示する要素の総称。具体的にはimg要素を指すことが多い表現です。
imgタグ: HTMLのimg要素を指す、日常的で口語的な呼び方です。
HTMLのimgタグ: HTMLで画像を挿入する要素を表す言い方です。
HTML画像タグ: HTMLにおける画像を表示するタグのことを指します。
イメージ要素: image element の直訳表現。技術文章や教材で使われることがあります。
イメージタグ: image tag の日本語表現。説明文で使われることが多いです。
画像挿入要素: 画像を文書に挿入するための要素を指す表現。img 要素を指すことが一般的です。
画像表示要素: 画像を表示する目的の要素という意味の表現です。
HTML画像挿入要素: HTML で画像を挿入する img 要素を指す別称です。
画像表示タグ: 画像を表示するためのタグを指すカジュアルな表現です。

img要素の対義語・反対語

テキスト要素: img要素の対義語として、画像を表示せずに文字情報を表示する要素です。代表例は p、span、strong、em などのテキスト系要素です。閲覧者に情報を伝えるとき、画像を使わず文章で表現する場面で使います。
動画要素: 画像ではなく動画を表示・再生する要素です。対になる形として、静止画像の img 要素と違うメディア（映像）を扱います。
CSS背景画像: HTML の img 要素ではなく、CSS の background-image で背景として画像を表示します。装飾的な目的やレイアウト調整に使われ、意味的には img の対義的な使い方です。
SVG要素: ラスター画像の代わりにベクター画像を描画する要素です。拡大しても画質が崩れにくい点が img とは異なります。
canvas要素: JavaScript で自分で絵を描く領域。画像をそのまま表示するのではなく、描画して生成する点が img 要素と異なります。
picture要素: 複数のソースを条件付きで切り替える画像の伝送手段。img 要素と組み合わせて使いますが、画像の選択・最適化を柔軟に行う点で対比的です。
データURI画像: データURL（Data URL）として画像データを直に埋め込む方法。src に URL を指定する普通の img とは違い、ソースコード内に画像データを直接含める点が異なります。