HTMLのimgタグ（画像タグ）はWebページ上に画像を表示するために使用される要素です。
<img src="画像ファイルのURL" alt="画像の代替テキスト" />
参考 HTMLの基本構文ルール
このページではimgタグの基本と、知っておくべき重要な要素（alt属性/src属性など）を１からわかりやすく初心者向けに解説します。
Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。
HTML：imgタグとは（画像タグとは）
HTMLのimgタグは、Webページ上に画像を表示するために使用される要素です。基本的な構文ルールは以下の通り。
<img src="画像ファイルのURL" alt="画像の代替テキスト" />
imgタグは、HTMLで「空要素」と呼ばれるタグのひとつで、開始タグと終了タグが不要です。空要素は、要素自体がコンテンツを持たず、属性を介して情報を提供するために使用されます。
参考 HTML：属性とは？
ちなみにHTML5では空要素の末尾にスラッシュ（/）を付けることは任意です。したがって、以下のような記述も正しいとされています。
<img src="画像ファイルのURL" alt="画像の代替テキスト">
HTMLのimgタグを利用したサンプルコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML imgタグのサンプルコード</title> </head> <body> <h1>HTML imgタグのサンプルコード</h1> <p>以下はimgタグを使って画像を表示する例です。</p> <img src="example.jpg" alt="美しい夕焼けの風景" /> </body> </html>
このサンプルコードでは、example.jpgという画像ファイルをページ上に表示しています。もし画像が表示できない場合、代わりにalt属性で指定された「美しい夕焼けの風景」というテキストが表示されます。
imgタグ：alt属性とは
alt属性は、HTMLのimgタグにおいて画像の代替テキスト（alternative text）を提供するために使用されます。画像が何らかの理由で表示できない場合や、スクリーンリーダーを使用する視覚障害者にとって、画像の内容を理解するために役立ちます。
<img src="画像ファイルのURL" alt="画像の代替テキスト" />
alt属性で指定したテキストは、ネットワークの問題や画像ファイルの削除・ブロックなどの理由で画像が表示できない場合にも表示されます。これにより、ユーザーは画像が何を表しているか推測することができ、コンテンツの理解に役立ちます。
alt属性の注意点
alt属性を利用する際には以下の点に注意する必要があります。
とりあえず初心者のうちは、alt属性が「画像の意味をユーザとコンピュータに伝えることを目的としている」点を理解できればOKです。
imgタグ：src属性とは
src属性は、HTMLのimgタグにおいて、画像ファイルのURL（リンク）を指定するために使用されます。これにより、ブラウザは指定されたURLから画像を取得して、Webページ上に表示します。
画像はWebページのデザインや情報伝達の面で重要な役割を果たし、ユーザーの理解やエンゲージメントを向上させることができます。src属性を正しく指定することで、ウェブページに適切な画像が表示され、その利点を享受することができます。
<img src="画像ファイルのURL" alt="画像の代替テキスト" />
画像ファイルのURLには、相対パスまたは絶対パスを使用することができます。
src属性の注意点
src属性を利用する際には以下の点に注意しましょう。
特に画像サイズが大きすぎることによるパフォーマンスの劣化はSEO的にも良くありません。（Googleはページの読み込み速度もページランクの重要な要素として認識しています。）
改めてHTMLのimgタグ（alt属性/src属性）を利用したサンプルコードを以下にお示しします。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML imgタグのサンプルコード</title> </head> <body> <h1>HTML imgタグのサンプルコード</h1> <p>以下はimgタグを使って画像を表示する例です。</p> <img src="https://it-biz.online/wp-content/uploads/2019/10/c4eee7ee476bedfb43ba4d7ec1d9051f-3.png" alt="ビズドットオンラインのブログタイトル" /> </body> </html>
src属性に指定するURLはサイト内部の画像ファイルを指定するのが原則です。
外部サイトの画像ファイルを指定することも技術的には可能ですが、外部サイトの画像ファイルを指定するには問題点があります。
どうしても外部サイトの画像を表示したい、というシーンは筆者の経験上であったことはありません。基本的には外部サイトの画像を表示するという行為はNGであると理解しておきましょう。
HTML―画像の大きさを変える
imgタグを利用して画像のサイズを変更するには、width属性とheight属性を使って、表示する画像の幅と高さを指定します。
<img src="example.jpg" alt="美しい夕焼けの風景" width="300" height="200" />
imgタグ：width属性/height属性
width属性とheight属性は、HTMLのimgタグで画像の表示サイズを指定するために使用されます。width属性は画像の幅を、height属性は画像の高さをそれぞれ指定します。
1.width属性を利用した例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>width属性のサンプルコード</title> </head> <body> <h1>width属性のサンプルコード</h1> <p>以下はimgタグでwidth属性を使って画像の幅を変更する例です。</p> <img src="https://it-biz.online/wp-content/uploads/2019/10/c4eee7ee476bedfb43ba4d7ec1d9051f-3.png" alt="widthテスト" width="300" /> </body> </html>
このサンプルコードでは、width属性に300を指定して、画像の表示幅を300ピクセルに設定しています。高さは自動的にアスペクト比に応じて調整されます。
2.height属性を利用した例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>height属性のサンプルコード</title> </head> <body> <h1>height属性のサンプルコード</h1> <p>以下はimgタグでheight属性を使って画像の高さを変更する例です。</p> <img src="https://it-biz.online/wp-content/uploads/2019/10/c4eee7ee476bedfb43ba4d7ec1d9051f-3.png" alt="heightテスト" height="200" /> </body> </html>
このサンプルコードでは、height属性に200を指定して、画像の表示高さを200ピクセルに設定しています。幅は自動的にアスペクト比に応じて調整されます。
width属性とheight属性を同時に指定することもできますが、画像が元のアスペクト比を保たずに伸縮される可能性があるため注意が必要です。アスペクト比を維持しながらサイズを変更する場合は、後述のようにCSSを利用する方法がおすすめです。
CSSを利用した画像サイズの変更
固定のピクセル値でサイズを指定すると、画像が元のアスペクト比を保たずに伸縮される可能性があります。アスペクト比を維持しながら画像のサイズを変更するには、以下のようにCSSを利用する方法がおすすめです。
参考 CSSとは？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画像サイズ変更のサンプルコード（CSSを利用）</title>
<style>
img.responsive {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>画像サイズ変更のサンプルコード（CSSを利用）</h1>
<p>以下はimgタグを使って画像のサイズを変更する例です。アスペクト比を維持しながら画像の幅を100%に設定しています。</p>
<img class="https://it-biz.online/wp-content/uploads/2019/10/c4eee7ee476bedfb43ba4d7ec1d9051f-3.png" src="example.jpg" alt="美しい夕焼けの風景" />
</body>
</html>
この例では、<style>タグ内にCSSを記述し、img.responsiveセレクタに対して、幅を100%に設定し、高さを自動（auto）に設定しています。
これにより、画像はアスペクト比を維持しながら表示領域に合わせてリサイズされます。imgタグにclass="responsive"を追加して、CSSのスタイルを適用しています。
Webエンジニア向け→完全無料のHTML/CSSロードマップ
Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSSです。
以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSSを学習するためのロードマップ（全30記事）を整理しています。
以下のページの内容をマスターすればHTMLとCSSの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。
