6日でできる新HTML&CSS入門｜画像タグと属性の使い方

画像を正しく表示できると、Webページの印象は大きく変わる。imgタグと属性の役割を理解して、伝わりやすいビジュアル表現を身につけよう。

Webページを開いたとき、最初に目に入りやすいのは文字よりも画像です。写真、イラスト、アイコン、ロゴ、バナーなどの画像は、ページの雰囲気を伝えたり、内容を分かりやすく補足したりする大切な要素です。

HTMLでは、画像を表示するときにimgタグを使います。imgタグは、HTMLファイルの中に画像そのものを直接書き込むのではなく、画像ファイルの場所を指定して、ブラウザに読み込ませるためのタグです。

画像を表示するには、src属性で画像ファイルの場所を指定します。さらに、alt属性で画像の代わりになる説明文を指定します。alt属性は、画像が表示されなかったときだけでなく、音声読み上げソフトを使う人に画像の内容を伝えるためにも重要です。

画像は見た目の印象を良くするだけでなく、ページの内容理解にも役立ちます。ただし、画像ファイルの置き場所、ファイル名、サイズ、形式、代替テキストなどを意識しないと、画像が表示されなかったり、ページの読み込みが重くなったりすることがあります。

この記事では、imgタグの基本、画像フォルダの配置、src属性とalt属性、width属性とheight属性、title属性、figureとfigcaptionによるキャプション、srcsetやpictureを使ったレスポンシブ対応まで、画像表示の基本を順番に解説していきます。

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

image-tags-attributes ダウンロード

画像はHTMLからファイルを参照して表示する

HTMLで画像を表示するときは、HTMLファイルとは別に画像ファイルを用意します。そして、imgタグのsrc属性で、その画像ファイルの場所を指定します。

たとえば、HTMLファイルと同じ階層にimagesフォルダを作り、その中に画像ファイルを入れておくと、管理しやすくなります。

項目	内容
HTMLファイル	ページの構造を書くファイル
imagesフォルダ	画像ファイルをまとめて入れるフォルダ
画像ファイル	jpg、png、webpなどの画像
src属性	表示したい画像の場所を指定する

画像ファイルをHTMLファイルと同じ場所に大量に置いてしまうと、ファイルが増えたときに管理しにくくなります。そこで、画像はimagesフォルダにまとめておくのが分かりやすい方法です。

たとえば、次のような構成にします。

├─ lesson16_1.html
├─ lesson16_2.html
├─ lesson16_3.html
├─ lesson16_4.html
├─ lesson16_5.html
└─ images/
   ├─ morning-sea.png
   ├─ dog-320.png
   ├─ dog-640.png
   ├─ dog-1280.png
   ├─ mountain.avif
   ├─ mountain.webp
   └─ mountain.jpg

このようにしておくと、HTMLファイルからimagesフォルダ内の画像を相対パスで指定できます。

たとえば、imagesフォルダの中にmorning-sea.pngがある場合、src属性にはimages/morning-sea.pngのように書きます。

図1：HTMLファイルと画像フォルダの関係

この図から分かること

この図から、HTMLで画像を表示するときは、HTMLファイルが画像ファイルを参照していることが分かります。

画像そのものをHTMLの中に書くのではなく、画像ファイルをimagesフォルダなどに保存し、src属性でその場所を指定します。ブラウザはHTMLを読み込みながら、指定された画像ファイルも読み込んでページに表示します。

画像が表示されない場合は、画像ファイルが存在するか、フォルダ名やファイル名が正しいか、src属性で指定したパスが合っているかを確認することが大切です。

imgタグの基本

画像を表示するために使うのがimgタグです。imgタグは、終了タグを持たない単体タグです。

基本的には、src属性とalt属性を指定して使います。

属性	役割	重要度
src	画像ファイルの場所を指定する	必須
alt	画像の代替テキストを指定する	必須級
width	画像の表示幅を指定する	必要に応じて使う
height	画像の表示高さを指定する	必要に応じて使う
title	補足説明を指定する	必要に応じて使う

src属性がないと、ブラウザはどの画像を読み込めばよいのか分かりません。そのため、画像表示にはsrc属性が欠かせません。

alt属性は、画像が表示されないときの代わりの説明文です。また、音声読み上げソフトを利用している人に画像の内容を伝える役割もあります。画像の意味がページ内容に関係している場合は、alt属性に分かりやすい説明を書きます。

画像を表示する最小構成

まずは、imgタグを使って画像を表示する基本形を確認しましょう。

ここでは、imagesフォルダの中にmorning-sea.pngという画像がある想定で作成します。

ファイル名： lesson16_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>写真を表示する</title>
</head>
<body>
  <h1>朝の海の写真</h1>
  <img src="images/morning-sea.png" alt="朝日が差し込む海岸の写真">
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、「朝の海の写真」という見出しの下に、imagesフォルダ内のmorning-sea.pngが表示されます。

表示される内容	説明
見出し	朝の海の写真
画像	images/morning-sea.png
代替テキスト	朝日が差し込む海岸の写真

この例では、src属性にimages/morning-sea.pngを指定しています。これは、HTMLファイルから見てimagesフォルダの中にあるmorning-sea.pngを読み込むという意味です。

alt属性には、画像の内容を説明する文章を入れています。画像が表示されない場合や、音声読み上げ環境では、この説明が画像の代わりになります。

alt属性は画像の意味を伝えるために大切

alt属性は、画像の代わりになるテキストを指定する属性です。画像が読み込めない場合、ブラウザはalt属性の内容を表示することがあります。

また、音声読み上げソフトを使っている人にとって、alt属性は画像の内容を知るための重要な手がかりになります。

画像の種類	alt属性の考え方
内容を説明する写真	写っている内容を簡潔に説明する
操作に関係する画像	操作内容が分かる説明にする
装飾だけの画像	必要に応じて空にすることもある
商品画像	商品名や特徴が伝わる説明にする
グラフや図	図が示している内容を説明する

たとえば、朝の海の写真であれば、alt属性には「朝日が差し込む海岸の写真」のように書くと、画像の内容が伝わります。

一方で、「画像」や「写真」だけでは、何の画像なのか分かりません。alt属性は、画像を見られない人にも内容が伝わるように書くことが大切です。

検索エンジンも画像の内容を理解する手がかりとしてalt属性を利用することがあります。そのため、alt属性はユーザーのためにも、ページの情報整理のためにも重要です。

width属性とheight属性で画像サイズを指定する

画像は、何も指定しない場合、画像ファイル本来の大きさで表示されることがあります。大きな写真をそのまま表示すると、ページ上で大きくなりすぎることがあります。

そこで、width属性やheight属性を使うと、画像の表示サイズを指定できます。

属性	役割
width	画像の表示幅を指定する
height	画像の表示高さを指定する

width属性とheight属性には、ピクセル単位の数値を指定できます。たとえば、widthに240、heightに160を指定すると、幅240ピクセル、高さ160ピクセルで表示する指定になります。

ただし、元画像の縦横比と異なる値を指定すると、画像が横に伸びたり縦につぶれたりすることがあります。画像を自然に表示するには、元の比率を意識することが大切です。

サイズとtitle属性を指定した画像

次の例では、画像の幅と高さを指定し、title属性で補足情報も加えます。

title属性は、ブラウザによっては画像にマウスを重ねたときに補足説明として表示されます。

ファイル名： lesson16_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像サイズを指定する</title>
</head>
<body>
  <h1>小さく表示した風景写真</h1>
  <img src="images/morning-sea.png"
       width="240" height="160"
       alt="幅240ピクセル高さ160ピクセルで表示した朝の海"
       title="朝の海を小さめに表示しています">
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、朝の海の画像が幅240ピクセル、高さ160ピクセルで表示されます。

指定	内容
src	images/morning-sea.png
width	240
height	160
alt	幅240ピクセル高さ160ピクセルで表示した朝の海
title	朝の海を小さめに表示しています

title属性は、補足説明として使えます。ただし、スマートフォンではマウスを重ねる操作がないため、重要な情報をtitle属性だけに頼るのは避けましょう。

大切な説明は本文やキャプションとして書き、title属性はあくまで補助的な情報として使うとよいでしょう。

図2：src属性、alt属性、width属性、height属性の役割

この図から分かること

この図から、imgタグでよく使う属性の役割が分かります。

src属性は、表示する画像ファイルの場所を指定します。alt属性は、画像が表示されないときや読み上げ環境で画像の内容を伝えるために使います。

width属性とheight属性は、画像の表示サイズを指定します。ただし、縦横比を無視して指定すると画像が不自然に伸びたり縮んだりするため、元画像の比率を意識することが大切です。

画像を表示するときは、単にsrc属性だけを指定するのではなく、alt属性もあわせて指定する習慣をつけておくと、より親切なHTMLになります。

figureとfigcaptionで画像に説明を付ける

記事やギャラリーの中では、画像の下に説明文を付けたいことがあります。たとえば、撮影場所、写真の内容、イラストの意味などを補足したい場合です。

このようなときに使えるのがfigureとfigcaptionです。

タグ	役割
figure	画像や図表など、本文から独立したまとまりを表す
figcaption	figure内の画像や図表に説明文を付ける

figureは、画像とその説明文をひとまとまりとして扱うために使います。figcaptionは、figureの中でキャプションを表します。

画像そのものの代替説明はalt属性に書きます。一方、読者に見せる説明文はfigcaptionに書くと考えると分かりやすいです。

キャプション付きの画像を表示する

次の例では、figureとfigcaptionを使って、画像の下に説明文を付けます。

ファイル名： lesson16_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>キャプション付き画像</title>
</head>
<body>
  <h1>旅先で見た朝の海</h1>

  <figure>
    <img src="images/morning-sea.png" alt="朝日が反射する静かな海">
    <figcaption>早朝の海岸で撮影した、朝日が反射する風景写真</figcaption>
  </figure>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、「旅先で見た朝の海」という見出しの下に画像が表示され、その下に説明文が表示されます。

要素	表示される内容
h1	旅先で見た朝の海
img	朝の海の画像
figcaption	早朝の海岸で撮影した、朝日が反射する風景写真

figcaptionを使うと、画像と説明文の関係がHTMLとして分かりやすくなります。

記事本文の中で写真を紹介したいとき、ギャラリーページで作品説明を入れたいとき、図解に補足説明を付けたいときなどに便利です。

画像形式の特徴を知っておく

Webページで使う画像には、いくつかの形式があります。形式によって、得意な用途やファイルサイズ、画質の特徴が異なります。

形式	拡張子	特徴	向いている用途
GIF	.gif	色数が少なく、簡単なアニメーションに対応	小さなアイコン、簡単なアニメーション
JPEG	.jpg、.jpeg	写真に向いており、圧縮率が高い	風景写真、人物写真、商品写真
PNG	.png	透過に対応し、文字や図形がくっきりしやすい	ロゴ、UI素材、図解
SVG	.svg	拡大しても劣化しにくいベクター形式	アイコン、ロゴ、シンプルな図形
WebP	.webp	高圧縮で画質とのバランスがよい	汎用的なWeb画像
AVIF	.avif	高い圧縮性能を持つ新しい形式	対応ブラウザ向けの軽量画像

写真にはJPEG、透過が必要な画像にはPNG、アイコンやロゴにはSVG、軽量化したい画像にはWebPやAVIFが使われることがあります。

画像形式を選ぶときは、見た目の美しさだけでなく、ファイルサイズも意識することが大切です。画像が重すぎると、ページの読み込みが遅くなり、ユーザーが離れてしまう原因になることがあります。

srcsetとsizesで画面幅に合った画像を選ぶ

スマートフォン、タブレット、パソコンでは、画面の大きさや解像度が異なります。すべての環境で大きな画像だけを読み込むと、スマートフォンでは必要以上に重い画像を読み込んでしまうことがあります。

そこで使えるのがsrcset属性とsizes属性です。

属性	役割
srcset	複数の画像候補を指定する
sizes	画像がどのくらいの幅で表示されるかの目安を伝える

srcset属性には、複数の画像ファイルとその幅を指定します。sizes属性には、画面幅に応じて画像がどのくらいの表示幅になるかを指定します。

ブラウザは、これらの情報をもとに、環境に合った画像を選んで読み込みます。

レスポンシブ画像を表示する

次の例では、犬の写真を画面幅に応じて切り替えられるようにします。imagesフォルダの中にdog-320.png、dog-640.png、dog-1280.pngがある想定です。

ファイル名： lesson16_4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>レスポンシブ画像</title>
</head>
<body>
  <h1>公園でくつろぐ犬</h1>

  <img src="images/dog-320.png"
       srcset="images/dog-640.png 640w,
               images/dog-1280.png 1280w"
       sizes="(min-width: 600px) 50vw, 90vw"
       alt="公園の芝生でくつろぐ犬">
</body>
</html>

ブラウザの表示例

ブラウザは、画面幅や表示条件に応じて、dog-640.pngやdog-1280.pngなど、適した画像を自動的に選びます。

指定	内容
src	基本となる画像
srcset	画像候補と画像幅
sizes	表示幅の目安
alt	画像の代替テキスト

src属性には、基本となる画像を指定します。srcset属性には、より大きい画像候補を並べます。

sizes属性の指定により、画面幅が600px以上の場合は表示幅の目安を50vw、それ以外では90vwと伝えています。vwは画面幅を基準にした単位です。

このように指定しておくと、ブラウザが必要に応じて適切な画像を選びやすくなります。

図3：レスポンシブ画像と画像形式の切り替え

この図から分かること

この図から、画像表示では画面サイズやブラウザの対応状況に合わせて画像を選ぶ考え方が分かります。

srcset属性を使うと、画面幅や解像度に応じて、ブラウザが適切なサイズの画像を選びやすくなります。スマートフォンには小さめの画像、パソコンには大きめの画像というように、無駄な読み込みを減らせます。

picture要素を使うと、AVIFやWebPなどの新しい画像形式に対応しているブラウザでは軽量な形式を使い、対応していない場合はJPEGなどに切り替えることができます。

画像はページの印象を大きく左右しますが、重すぎる画像は表示速度に影響します。きれいさと軽さのバランスを考えることが大切です。

pictureとsourceで画像形式を切り替える

ブラウザによっては、新しい画像形式に対応していない場合があります。たとえば、AVIFに対応していない環境では、AVIF画像を表示できないことがあります。

そこで使えるのがpicture要素です。picture要素の中でsourceを使うと、画像形式の候補を複数指定できます。

要素	役割
picture	複数の画像候補をまとめる
source	条件に合う画像候補を指定する
img	最終的に表示する画像、または代替画像を指定する

picture要素では、ブラウザが上から順番にsourceを確認し、対応している形式を選びます。どのsourceにも対応していない場合は、最後のimgが使われます。

pictureでAVIF、WebP、JPEGを切り替える

次の例では、山の写真をAVIF、WebP、JPEGの順で指定します。

imagesフォルダの中にmountain.avif、mountain.webp、mountain.jpgがある想定です。

ファイル名： lesson16_5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像形式を切り替える</title>
</head>
<body>
  <h1>朝霧に包まれた森</h1>

  <picture>
    <source type="image/avif" srcset="images/forest.avif">
    <source type="image/webp" srcset="images/forest.webp">
    <img src="images/forest.jpg" alt="朝霧に包まれた山の風景">
  </picture>
</body>
</html>

ブラウザの表示例

ブラウザがAVIFに対応している場合は、mountain.avifが使われます。AVIFに対応していない場合は、次にWebPが確認されます。WebPにも対応していない場合は、最後に指定したJPEG画像が表示されます。

優先順位	指定	表示される条件
1	forest.avif	AVIFに対応している場合
2	forest.webp	AVIF非対応でWebPに対応している場合
3	forest.jpg	上の形式に対応していない場合

picture要素を使うと、新しい画像形式を活用しながら、対応していない環境にも配慮できます。

最後にimgを入れておくことが大切です。imgは、画像表示の最終的な受け皿になります。alt属性もこのimgに指定して、画像の代替テキストを用意します。

画像ファイル名とパスの確認

画像が表示されないときは、まずファイル名とパスを確認しましょう。

HTMLでは、ファイル名やフォルダ名が1文字違うだけでも画像が読み込めません。大文字と小文字の違いも環境によって影響することがあります。

確認する項目	内容
フォルダ名	imagesというフォルダ名が正しいか
ファイル名	morning-sea.pngなどの名前が正しいか
拡張子	.jpg、.png、.webpなどが合っているか
相対パス	HTMLファイルから見た画像の場所が正しいか
画像の保存場所	指定した場所に画像が実際にあるか

たとえば、画像ファイルがimagesフォルダにあるのに、src属性にmorning-sea.pngだけを書いていると、ブラウザはHTMLファイルと同じ場所から画像を探してしまいます。

この場合は、images/morning-sea.pngのように、フォルダ名を含めて指定する必要があります。

画像が表示されないときは、HTMLの書き方だけでなく、フォルダ構成もあわせて確認することが大切です。

imgタグと関連要素・属性を整理する

画像表示で使う主なタグ、要素、属性を整理しておきましょう。

タグまたは属性	意味や用途	備考
img	画像を表示する	終了タグなし
src	画像ファイルの場所を指定する	必須
alt	代替テキストを指定する	必須級
width	画像の表示幅を指定する	数値で指定できる
height	画像の表示高さを指定する	縦横比に注意する
title	補足説明を指定する	重要情報は本文にも書く
srcset	複数の画像候補を指定する	レスポンシブ画像で使う
sizes	表示幅の目安を指定する	srcsetと組み合わせる
figure	画像と説明をひとまとまりにする	記事やギャラリーで便利
figcaption	画像の説明文を表示する	figure内で使う
picture	条件に応じて画像を切り替える	sourceと組み合わせる
source	画像候補や形式を指定する	picture内で使う

最初にしっかり覚えたいのは、img、src、altです。画像を表示するにはsrc属性が必要で、画像の意味を伝えるにはalt属性が大切です。

そのあとで、width属性やheight属性によるサイズ指定、figureとfigcaptionによるキャプション、srcsetとsizesによるレスポンシブ対応、pictureとsourceによる画像形式の切り替えへと学習を広げると理解しやすくなります。

画像を使うときに意識したいこと

画像は、Webページの印象を大きく変える要素です。適切な画像を使うと、文章だけでは伝わりにくい雰囲気や内容を直感的に伝えられます。

ただし、画像を入れすぎたり、大きすぎる画像をそのまま読み込んだりすると、ページが重くなることがあります。画像は、内容に合ったものを選び、必要に応じてサイズや形式を工夫することが大切です。

意識したい点	理由
alt属性を書く	画像の意味を伝えやすくする
ファイル名を分かりやすくする	管理しやすくなる
imagesフォルダにまとめる	プロジェクト構成が整理される
画像サイズを意識する	ページの読み込みを軽くできる
画像形式を選ぶ	用途に合った画質と軽さを選べる
キャプションを付ける	画像の意図を読者に伝えやすい

HTMLだけでも画像は表示できますが、見た目をさらに整えるにはCSSが必要になります。画像の中央寄せ、余白、角丸、影、横並び配置、レスポンシブな表示調整などは、CSSに関する記事以降で解説します。

まずは、imgタグで画像を表示し、src属性で画像の場所を指定し、alt属性で画像の意味を伝える。この基本をしっかり押さえておくと、Webページに画像を安心して取り入れられるようになります。

6日でできる 新HTML&CSS入門｜画像タグと属性の使い方