2026年4月16日
HTML 画像の表示方法：imgタグとは？
ウェブページに写真やイラストを表示するには imgタグ を使います。HTML 画像の表示方法の基本として、まず <img> タグの書き方を覚えましょう。
<img> タグは終了タグが不要な「空要素」です。src 属性に画像ファイルのパスを指定します。
<img src="photo.jpg" alt="プロフィール写真">▶ プレビュー
imgタグの主な属性
| 属性 | 役割 |
|---|---|
src | 画像ファイルのパスまたはURL（必須） |
alt | 画像が表示できないときの代替テキスト（必須） |
width | 画像の幅（px または %） |
height | 画像の高さ（px） |
loading | lazy を指定すると遅延読み込みになる |
⚠️ alt属性は必ず書こう：
画像が読み込めないとき・スクリーンリーダー（視覚障害者向けの読み上げソフト）を使うときに、alt のテキストが読まれます。アクセシビリティとSEOのために必ず書きましょう。
パスの書き方
画像ファイルの場所を指定する「パス」には2種類あります。
相対パス（同じサイト内の画像）
<!-- 同じフォルダ内 -->
<img src="photo.jpg" alt="写真">
<!-- imagesフォルダの中 -->
<img src="images/photo.jpg" alt="写真">
<!-- 1つ上のフォルダ -->
<img src="../images/photo.jpg" alt="写真">絶対パス（外部サイトの画像）
<img src="https://example.com/images/photo.jpg" alt="外部の写真">外部サイトの画像を使うときは、著作権に注意してください。
📖 詳しくはheadタグに書くべき内容で解説しています。
画像のサイズを指定する
<!-- 幅300px、高さは自動 -->
<img src="photo.jpg" alt="写真" width="300">
<!-- 幅と高さを両方指定 -->
<img src="photo.jpg" alt="写真" width="300" height="200">CSSで指定することもできます。
img {
max-width: 100%; /* 親要素の幅を超えない */
height: auto; /* 縦横比を保つ */
}👉 HTMLタグ一覧【よく使う20選】も参考にしてください。
画像をリンクにする
<a> タグで <img> を囲むと、画像をクリックしてリンクに飛べます。
<a href="https://example.com">
<img src="banner.jpg" alt="バナー">
</a>🔥 metaタグの書き方で実践してみましょう。
画像の形式と使い分け
ウェブで使う画像にはいくつかの形式があります。それぞれの特徴を知って、適切に使い分けましょう。
JPEG（ジェイペグ）
写真に向いている形式です。色数が多い画像を小さいファイルサイズで保存できます。ただし、圧縮するたびに画質が少し落ちます。風景写真や人物写真にはJPEGを使いましょう。拡張子は「.jpg」または「.jpeg」です。
PNG（ピング）
イラストやロゴに向いている形式です。透明な背景を扱えるのが特徴です。JPEGより画質が良いですが、ファイルサイズが大きくなりがちです。背景を透明にしたいときや、文字が含まれる画像にはPNGを使いましょう。拡張子は「.png」です。
SVG（エスブイジー）
アイコンやロゴに最適な形式です。拡大しても画質が落ちません。ファイルサイズも小さいです。ただし、写真には向いていません。シンプルな図形やアイコンにはSVGを使いましょう。拡張子は「.svg」です。
WebP（ウェッピー）
Googleが開発した新しい形式です。JPEGやPNGより小さいファイルサイズで同じ画質を実現できます。最近のブラウザはほぼ対応しています。
画像を軽くするコツ
画像が重いとページの表示が遅くなります。来場者がページを開くのを待てずに離脱してしまうこともあります。画像を軽くするコツを紹介します。
コツ1：適切なサイズにリサイズする
スマホで撮った写真は4000px以上の幅があることが多いです。ウェブページで表示するなら、幅800〜1200px程度で十分です。画像編集ソフトやオンラインツールでリサイズしてからアップロードしましょう。
コツ2：圧縮ツールを使う
「TinyPNG」や「Squoosh」などの無料ツールで画像を圧縮できます。見た目はほとんど変わらないのに、ファイルサイズが半分以下になることもあります。
コツ3：必要以上に画像を使わない
画像が多すぎるとページが重くなります。本当に必要な画像だけを使いましょう。装飾目的ならCSSで代用できることも多いです。
alt属性の重要性
imgタグには必ずalt属性を書きましょう。alt属性は画像の説明文です。
alt属性が必要な理由は3つあります。
1つ目：画像が表示されないとき、代わりにalt属性のテキストが表示されます。通信が遅いときや、画像のURLが間違っているときに役立ちます。
2つ目：スクリーンリーダー（目が見えない人が使うソフト）がalt属性を読み上げます。alt属性がないと、画像の内容が伝わりません。
3つ目：検索エンジンがalt属性を読んで、画像の内容を理解します。適切なalt属性を書くと、画像検索で表示されやすくなります。
alt属性の書き方のコツは「画像に何が写っているかを簡潔に書く」ことです。「画像」「写真」のような意味のない説明は避けましょう。「校庭で遊ぶ生徒たち」「文化祭のポスター」のように具体的に書きます。
画像はウェブページを魅力的にする強力な要素です。ただし、使いすぎるとページの読み込みが遅くなります。本当に必要な画像だけを選び、適切なサイズに圧縮してから使いましょう。無料の画像圧縮ツール（TinyPNGやSquooshなど）を使えば、見た目を保ったままファイルサイズを小さくできます。画像の表示が速いサイトは、ユーザーにも検索エンジンにも好まれます。
まとめ
- ✅
<img src="パス" alt="説明">で画像を表示する - ✅
alt属性は必ず書く（アクセシビリティ・SEOのため） - ✅ 相対パスで同じサイト内の画像を指定できる
- ✅ CSSで
max-width: 100%を指定するとレスポンシブになる - ✅
<a>で囲むと画像リンクになる
HTMLの基礎はHTML入門で復習できます。パスの書き方はHTMLのパスの書き方を参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLのパスの書き方 — パスの書き方を復習
- HTMLでアクセシビリティを高める方法 — alt属性とアクセシビリティ
- レスポンシブデザインの作り方 — レスポンシブデザイン
- HTMLのpictureタグ — picture要素の詳細
- Webサイトの表示速度改善 — 画像最適化とパフォーマンス