HTMLで画像を挿入する方法！imgタグ完全ガイド

基本の画像挿入： タグの書き方

HTMLで画像を表示するには、<img>タグを使います。 このタグは終了タグ（</img>）が不要な“空要素”です。

<img src="画像のURL" alt="画像の説明文" width="幅" height="高さ">

▼ポイント

• src：画像のパス（場所）を指定します
• alt：画像が表示されなかった時に代わりに表示されるテキスト（SEOやアクセシビリティにも重要）
• widthとheight：画像の幅と高さを指定します

src：パス（画像の場所）の指定方法

画像のパスの指定方法には相対パスと絶対パスがあります。
どちらの方法で指定しても問題ありません。

相対パス：HTMLファイルと同じフォルダ内に画像がある場合

<img src="img/cat.jpg">

絶対パス：外部サイトの画像やサーバー上のURLを指定する場合

<img src="https://example.com/img/cat.jpg">

alt：alt属性の役割とメリット

alt属性は必須ではありませんが、画像が表示されない場合の代替テキストとしてだけでなく、検索エンジン最適化（SEO）や視覚障害者のためのアクセシビリティにも重要な役割を果たします。商品やサービスの特徴を簡潔に説明する文を積極的に設定しましょう。
特に、商品名や特徴的なキーワードを含めることで、検索エンジンに評価されやすくなり、SEO対策にも効果的です。

<img src="cat.jpg" alt="白い猫の写真">

▼メリット

• 画像が読み込めなかったときにテキストを表示
• 音声読み上げ機能で内容を伝える
• 検索エンジンが画像の内容を理解できる（SEOに効果）

width、height：画像のサイズ調整

画像の大きさはwidth（幅）とheight（高さ）属性で調整できます。　
こちらもalt属性と同じく必須ではありませんが、設定しておくことでサイト読み込み時のレイアウト崩れを防ぐことができます。

<img src="cat.jpg" width="150" height="150">

単位を省略した場合は「ピクセル（px）」扱いになります。
width のみ指定すれば縦横比を保って表示することも可能です。

スマホ・PC両対応（レスポンシブ）の基本

昨今ではスマホ閲覧が主流となっており、画像の大きさが崩れないようにレスポンシブ対応も大事になってきました。
その中でも今回は二つの対応方法をご紹介します。

親要素の幅に合わせて自動調整する方法

img {
  max-width: 100%;
  height: auto;
}

このCSSコードでは、画像の幅を親要素の幅に合わせて最大100%に設定し、高さは自動的に調整するようにしています。これにより、画像が画面サイズに応じて適切にリサイズされ、歪むことなく表示されます。
画像が画面幅より小さくなっても一緒に縮小するため、小さい画面で画像が画面からはみ出す、と言った事象を防ぐことも出来ますし、PCで見た時に不必要に大きくなることもありません。

pictureタグとsourceタグを使用する方法

<picture>
  <!-- 幅800px以上の画面（PCなど）では "image-large.jpg" を表示する -->
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <!-- 幅799px以下の画面（スマホなど）では "image-small.jpg" を表示する -->
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <!-- 上の条件に当てはまらない場合や、<source>が使えない環境のためのデフォルト画像 -->
  <img src="image-default.jpg" alt="レスポンシブ画像" class="img_responsive">
</picture>

<picture>タグと<source>タグを使用して、異なるデバイスや画面幅に応じて異なる画像を表示することもできます。
このコードは、画面の幅が800ピクセル以上の場合はimage-large.jpgを表示し、799ピクセル以下の場合はimage-small.jpgを表示します。これにより、デバイスに最適な画像を提供することができます。

▼ポイント

• <picture>要素は画面サイズに応じて表示する画像を切り替えたいときに使います。
• <source>要素で「どの画像をどの画面サイズで使うか」を指定します。
• <img> は「どの条件にも当てはまらなかったとき」や「古いブラウザ向けの代替画像」として表示されます。
• ※ <source>タグ自体には alt 属性は使えません。class も<source>には意味がないため、すべて にまとめて指定します。

よくあるトラブルと解決法

まとめ

画像をきれいに表示できると、ホームページやブログの印象が大きくアップします。
タグの基本、alt属性、サイズ調整、レスポンシブ対応を押さえれば、初心者でも安心です。
トラブルがあってもパスやスペルを一つずつ確認すればOK。画像の工夫はSEOや見やすさ向上にもつながります。
まずはサンプルを試して、自分のサイトに活かしてみましょう。

▼画像挿入のチェックリスト

• imgタグの書き方は正しいか？
• src属性のパスは合っているか？
• alt属性に画像の内容説明を入れているか？
• サイズ指定やスタイルで見た目を調整しているか？
• スマホで見ても崩れていないか？
• 画像のファイルサイズは大きすぎないか？

▼画像の中央寄せ方法を詳しく知りたい方はこちら

CSSで画像を中央配置する3つの簡単テクニック

▼HTMLの基本タグ一覧はこちらから

【初心者向け】HTMLの基本タグ一覧と使い方！コピペOKのサンプル付き