この記事は、HTMLを学び始めた初心者の方はもちろん、なんとなくimgタグを使ってきた中級者の方にも向けた内容です。画像表示の「正しい基本」から、SEO・表示速度・デザイン性まで踏み込んで解説します。
読み終える頃には、単に画像を表示できるだけでなく、
基礎を固めながら、実務レベルの知識まで一気に整理していきましょう。
かすがHTMLの書き方を初心者の方向けにわかりやすく解説している以下の記事もぜひチェックしてみてくださいね！
- imgタグの基本構造と正しい書き方
title・loadingなど応用属性の実務的な使い方- CSSを使った画像デザインの応用テクニック（配置・角丸・影・枠線・モノクロ）
- JPEG・PNG・WebPなど画像形式の適切な選び方
HTMLのimgタグとは？
Webページに画像があるだけで、情報の伝わりやすさや印象は大きく変わります。
文章だけでは理解しにくい内容も、適切な画像が加わることで一気に直感的になります。その画像表示を担うのが、HTMLのimgタグです。
HTMLのimgタグは、Webページ上に画像ファイルを表示するための専用タグです。
テキストを表示するpタグやh1タグとは異なり、imgタグ自体は「空要素」と呼ばれ、開始タグのみで構成されます。
<!--開始タグのみで終了タグは不要-->
<img src="image.jpg">
そのため、画像の表示に必要な情報は属性として指定する点が大きな特徴です。
imgタグを使うことで、写真・イラスト・図解・アイコンなど、さまざまな画像コンテンツをページ内に組み込めます。
視覚的な補足情報を提供できるため、ユーザーの理解度向上や滞在時間の改善にもつながります。結果として、SEO評価に好影響を与えるケースも少なくありません。
また、imgタグは単に画像を表示するだけでなく、
- 代替テキストの設定
- 表示サイズの指定
- 読み込み制御
など、多くの調整が可能です。
これらを正しく使いこなすことで、アクセシビリティや表示速度といった実務で重要な要素にも対応できます。
基礎を曖昧にしたまま使うと、表示崩れや評価低下の原因になるため、最初にしっかり理解しておくことが重要です。
imgタグの基本的な使い方
imgタグは一見シンプルですが、指定する属性によって「正しく表示されるか」「SEOやアクセシビリティに配慮できているか」が大きく変わります。
ここからは、実務で必ず押さえておきたい基本属性を順番に確認していきます。仕組みを理解すれば、画像表示に対する不安は確実に減っていくはずです。
src属性：画像ファイルのパスを指定
src属性は、表示したい画像ファイルの場所を指定するための必須属性です。
この指定が誤っていると、ブラウザ上には画像が表示されません。
<img src="image.jpg">
src属性には、絶対パスまたは相対パスのどちらかを指定します。どちらを使うかは、サイト構成や運用環境によって適切に判断する必要があります。
絶対パスとは？
絶対パスは、https://から始まる完全なURLで画像の場所を指定する方法です。外部サイトの画像や、CDN上の画像を読み込む際によく利用されます。
<img src="https://example.com/images/sample.jpg">
URLが明確なため、参照先が分かりやすい反面、ドメイン変更時には修正が必要になる点に注意が必要です。
相対パスとは？
相対パスは、現在のHTMLファイルから見た位置関係で画像の場所を指定します。サイト内画像を扱う場合はこちらが一般的です。
HTMLファイルと同じ場所に画像がある場合
HTMLファイルと同じ場所に画像がある場合は、ファイル名のみで画像を表示できます。
また、ファイルの現在位置を表す「./」を頭につけても表示できます。これは省略可能です。
<!--以下2つのコードはどちらも同じく「sample.jpg」が表示されます-->
<img src="sample.jpg">
<img src="./sample.jpg">
HTMLファイルと同じ階層の「img」フォルダの中に画像がある場合
同じ階層のフォルダの中を指定する場合は「/」（スラッシュ）で区切ります。
フォルダの中にさらにフォルダがある場合も続けて「/」（スラッシュ）で区切ります。
<!--以下2つのコードはどちらも同じ結果になります-->
<img src="img/sample.jpg">
<img src="./img/sample.jpg">
<!--フォルダの中にさらにフォルダがある場合-->
<img src="img/icons/icon.jpg">
親階層を参照したい場合
サイトの規模が大きいと、現在のファイル位置より親の階層を指定する場合も出てきます。
1つ上の階層を参照する場合は「../」とドット2つとスラッシュで区切ります。2つ上の階層を参照する場合は「../../」になります。
<!--1つ上の階層を参照したい場合-->
<img src="../img/sample.jpg">
<!--2つ上の階層を参照したい場合-->
<img src="../../img/sample.jpg">
ルート階層を参照したい場合
ルート階層とはパソコンやサーバーにおける最上位の階層です。
ルート階層を参照する場合は頭に「/」スラッシュをつけます。どの階層から参照しても必ずルートを参照するため、階層が深い場合に便利です。
<!--ルートの「img」フォルダの中の「sample.jpg」を表示します-->
<img src="/img/sample.jpg">
絶対パス・相対パスは適切に使い分ける
基本的には、自サイト内の画像は相対パス、外部リソースは絶対パスという使い分けが無難です。用途に合わない指定をすると、画像が表示されない原因になるため注意しましょう。
alt属性：画像の代替テキストを指定
alt属性は、画像が表示されない場合に代わりに表示されるテキストです。また、検索エンジンやスクリーンリーダーが画像内容を理解するための重要な情報でもあります。
<img src="product.jpg" alt="ノートパソコンの商品写真">
SEO対策の観点でも、alt属性は軽視できません。画像検索からの流入や、ページ全体の評価にも影響を与えます。
alt属性のテキストは短く簡潔にする
alt属性には、画像の内容を端的に表す文章を設定します。長文やキーワードの詰め込みは逆効果になる場合があるため、「何が写っているか」が伝わる表現を意識しましょう。
画像の内容を端的に表している良い例：
<img src="laptop.jpg" alt="ノートパソコン">
<img src="coffee.jpg" alt="カフェで提供されるコーヒー">
- 画像を見なくても「何の画像か」がすぐ分かる
- 余計な修飾語やキーワードを含めていない
- スクリーンリーダー・SEOの両面で適切
悪い例①：情報が多すぎる・不自然
<img src="laptop.jpg" alt="最新の高性能ノートパソコンで仕事効率が上がるおすすめのパソコン画像です">
- alt属性が説明文や広告文になっている
- 冗長で、読み上げ時にユーザーの負担になる
悪い例②：キーワードの詰め込み
<img src="laptop.jpg" alt="ノートパソコン PC laptop おすすめ 人気 安い 高性能">
- SEOを意識しすぎたキーワード羅列
- 検索エンジンにもユーザーにも評価されにくい
悪い例③：内容が分からない
<img src="laptop.jpg" alt="image">
<img src="laptop.jpg" alt="写真1">
- 画像の内容が全く伝わらない
- alt属性としての役割を果たしていない
alt属性は「画像を文章で説明する場所」ではなく、画像の意味を短く伝える補足情報です。
「もし画像が表示されなかったら、どんな一言があれば理解できるか？」を基準にすると、自然なaltテキストになります。
装飾目的の画像はalt属性を空にする
意味を持たない装飾用画像の場合、alt属性は空にします。
<img src="decoration.png" alt="">
これにより、スクリーンリーダーが不要な情報を読み上げるのを防げます。
height属性・width属性：画像の高さと幅を指定
width属性とheight属性を使うと、画像の表示サイズを指定できます。特に重要なのは、レイアウトの安定性です。
サイズを明示しておくことで、画像読み込み前でも表示領域が確保され、ページのガタつきを防げます。
単位を指定しない場合はpx（ピクセル）単位になる
<img src="photo.jpg" alt="風景写真" height="300" width="400">
パーセントでも指定できる
<img src="photo.jpg" alt="風景写真" width="80%">
画像の縦横比を保つ際のポイント
画像は縦横比が崩れてしまうと歪んだ見た目になってしまいます。以下の左がその例です。
See the Pen 「html img」配置を指定（中央・右寄せ） by kasuga (@kntkfmgf-the-vuer) on CodePen.
画像の縦横比を保つためには以下のポイントを意識しましょう。
- サイズを指定する際は高さか幅どちらかだけを指定する
- 両方指定する場合は、必ず元の画像の縦横比を保つ
- 縦横比は保っていても、元の画像のサイズより大きいサイズは指定しない
imgタグの応用的な使い方
imgタグは基本属性を理解するだけでも十分に活用できますが、さらに一歩踏み込むことで「ユーザー体験」や「表示速度」にも配慮した実装が可能になります。
特に現場では、表示パフォーマンスや補足情報の扱いが重要視される場面が多くあります。
ここでは、実務で役立つ応用的な属性について解説します。
title属性：画像のツールチップを表示する
title属性を指定すると、画像にマウスカーソルを重ねた際にツールチップ（補足テキスト）を表示できます。
<img src="icon.png" alt="検索アイコン" title="サイト内を検索します">
title属性は補足的な説明を加えたい場合に便利です。ただし、SEO上の重要度はalt属性ほど高くありません。あくまでユーザー向けの補助情報として活用するのが適切です。
また、スマートフォンではホバー操作が存在しないため、title属性の内容が表示されないケースもあります。そのため、重要な情報をtitle属性のみに依存するのは避けましょう。
loading属性：画像の遅延読み込みを指定する
loading属性は、画像の読み込みタイミングを制御できる比較的新しい属性です。主にページ表示速度の最適化に役立ちます。
<img src="large-photo.jpg" alt="風景写真" loading="lazy">
loading="lazy"を指定すると、画面内に表示される直前まで画像の読み込みを遅らせます。これにより、初期表示の速度向上にもつながります。
特に画像が多いブログ記事やECサイトでは効果が大きく、SEOの観点でも無視できないポイントです。
一方で、ファーストビューに表示される重要画像には使用しない方がよい場合もあります。最初に見せたい画像まで遅延させてしまうと、ユーザー体験を損ねる可能性があるためです。
loading属性で指定できる値
| 値 | 説明 | 主な用途 |
|---|---|---|
| lazy | 遅延読み込み | 記事内の画像・下部コンテンツ |
| eager | 即時読み込み | ファーストビュー画像 |
| auto | ブラウザ任せ | 基本的に不要 |
実務では「基本はlazy、重要画像はeager（または未指定）」という使い分けが一般的です。
imgタグは単なる画像表示タグではありません。適切な属性を組み合わせることで、アクセシビリティ・表示速度・利便性の向上を同時に実現できます。基本を押さえたうえで、こうした応用テクニックも取り入れていくと、より完成度の高いWebページに仕上がります。
現場で使えるimgタグのCSSでの応用事例
imgタグはHTML属性だけでなく、CSSと組み合わせることで表現の幅が大きく広がります。
デザイン性を高めるだけでなく、ユーザーの視線誘導やブランドイメージの演出にも直結する重要な要素です。
ここでは、実務でよく使われる画像スタイリングの具体例を紹介します。
配置を指定（中央・右寄せ）
画像はデフォルトで左寄せで配置されます。配置を指定したい場合は、CSSを使えば中央・右寄せにコントロールできます。
See the Pen 「html img」配置を指定（中央・右寄せ） by kasuga (@kntkfmgf-the-vuer) on CodePen.
画像を角丸にする
やわらかい印象を与えたい場合、角丸は定番の装飾です。
See the Pen 「html img」配置を指定（中央・右寄せ） by kasuga (@kntkfmgf-the-vuer) on CodePen.
完全な円形にしたい場合は、正方形画像に対して以下のように指定します。プロフィール画像などでよく使われるテクニックです。
See the Pen 「html img」画像を円にする by kasuga (@kntkfmgf-the-vuer) on CodePen.
少し難易度は上がりますがポイントは以下です。
- 画像に同じ高さと幅を指定する
border-radius:50%を指定するobject-fit:cover;ではみ出す部分をトリミングする
object-fitが気になる方は以下の記事で詳しく解説しています。
画像に影をつける
影を加えることで、立体感や視認性を高められます。
See the Pen 「html img」画像を円にする by kasuga (@kntkfmgf-the-vuer) on CodePen.
リンク画像にマウスオーバーで影をつけることで、リッチなアクションを演出することもできます。
左の画像はデフォルトで影があり、マウスオーバーで影が消えて押し込んだような動きになります。右の画像はその逆です。
See the Pen 「html img」画像に影をつける by kasuga (@kntkfmgf-the-vuer) on CodePen.
影の強さや広がりを調整することで、高級感のあるデザインにも応用できます。使いすぎると逆に古い印象になるため、バランスが重要です。
画像に枠線をつける
画像を強調したい場合や、背景と区別したい場合に有効です。
See the Pen 「html img」マウスオーバーで画像に影をつける by kasuga (@kntkfmgf-the-vuer) on CodePen.
今回使用している画像は背景に白の部分が多く、白背景の中に配置されると画像の境界線が曖昧になってしまいます。
元々の画像自体に枠線をつけることで解決できますが、ユーザーがどんな画像をアップするかわからないCMSで画像の視認性を保つ場合にとても有効です。
画像をモノクロにする
CSSのfilterプロパティを使えば、画像をモノクロにすることも可能です。
See the Pen 「html img」画像に枠線をつける by kasuga (@kntkfmgf-the-vuer) on CodePen.
リンク画像をホバー時にカラーへ戻す演出もよく使われます。
See the Pen 「html img」ホバー時にカラーへ戻す by kasuga (@kntkfmgf-the-vuer) on CodePen.
ポートフォリオサイトなどで視覚的なインパクトを出したいときに効果的です。
CSSを活用することで、imgタグは単なる画像表示要素から「デザインを構成する重要パーツ」へと変わります。見た目の美しさと使いやすさを両立させることが、結果的にユーザー満足度やSEO評価の向上につながります。
imgタグで画像を読み込む際の注意点
画像はWebサイトの印象を大きく左右する重要な要素ですが、扱い方を誤ると表示速度の低下やSEO評価のマイナス要因になりかねません。
特に近年はCore Web Vitalsの重要性が高まっており、画像最適化は避けて通れないテーマです。
ここでは、実務で必ず意識したいポイントを整理します。
画像ファイルサイズは極力抑える
高画質な画像は魅力的ですが、ファイルサイズが大きすぎるとページ表示速度が遅くなります。表示速度の低下は、直帰率の上昇やSEO評価の悪化につながる可能性があります。
目安として、Web用画像は用途にもよりますができるだけ数百KB以内に抑えるのが理想です。アップロード前に画像圧縮ツールを使う、不要なメタデータを削除するなどの工夫が効果的です。
また、実際に表示するサイズよりも極端に大きな画像を読み込むのは避けましょう。必要以上に大きな解像度は、ユーザーにとってメリットがありません。
適切なファイル形式で表示する
画像形式の選択も重要なポイントです。用途に応じて最適な形式を選びます。
| ファイル形式 | 説明 |
|---|---|
| JPEG（.jpg） | 写真向き。ファイルサイズを抑えやすい |
| PNG（.png） | 透過画像やロゴ向き |
| WebP（.webp） | 高圧縮・高品質。現在は多くのブラウザで対応 |
近年はWebPの採用が一般的になりつつあります。対応ブラウザを考慮しながら導入すれば、表示速度改善に大きく貢献します。
画像内容に合わない形式を選ぶと、無駄に容量が増えたり画質が劣化したりします。見た目とパフォーマンスの両立を意識しましょう。
画像のファイル名は簡潔にして日本語は使用しない
意外と見落とされがちなのが、画像ファイル名です。特にCMSでは日本語のファイル名は自動で書き換えられてしまい、後で探したい場合に困難になる場合があります。
ですので、画像のファイル名に日本語は避けて英語でファイル名つけるようにしましょう。
良い例
sample.jpg
避けたい例
サンプル画像.jpg
日本語ファイル名は文字コードの問題でURLが長くなったり、エンコードされた文字列になったりすることがあります。トラブル防止のためにも、英数字とハイフンを基本に命名するのが安全です。
画像は「ただ表示できれば良い」というものではありません。表示速度・SEO・管理のしやすさまで考慮して初めて、実務レベルの実装といえます。細かな配慮の積み重ねが、サイト全体の品質向上につながります。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
HTMLのimgタグまとめ
ここまで、HTMLのimgタグの基礎から応用、実務での注意点まで解説してきました。最後に、重要ポイントを整理して振り返りましょう。復習として読み返すことで、理解がより確実になります。
■ src属性のポイント
- 画像のパスを指定する属性
- 指定方法は「絶対パス」と「相対パス」の2種類
- 自サイト内は相対パス、外部リソースは絶対パスが一般的
- パスの記述ミスは画像が表示されない原因になる
■ alt属性の重要性
- 画像が表示されない場合の代替テキスト
- 検索エンジンやスクリーンリーダーが内容を理解するために使用
- 短く簡潔に「何が写っているか」を表現する
- キーワードの詰め込みは逆効果
- 装飾目的の画像は
alt=""とする
■ サイズ指定（width・height）
- レイアウト崩れ防止のために指定するのが望ましい
- 元画像のアスペクト比を維持する
- Core Web Vitals対策にもつながる
title：ホバー時の補足説明（重要情報には依存しない）loading="lazy"：遅延読み込みで表示速度改善- ファーストビュー画像は遅延させない配慮が必要
marginで中央寄せborder-radiusで角丸box-shadowで影borderで枠線filter: grayscale()でモノクロ演出
デザインとユーザー体験を両立させることが重要です。
- ファイルサイズはできるだけ軽量化する
- 用途に応じた形式を選ぶ（JPEG / PNG / WebP）
- ファイル名は英数字で簡潔に
- 不要に大きな解像度の画像を読み込まない
imgタグは単純な画像表示タグに見えますが、SEO・アクセシビリティ・表示速度・デザイン性すべてに関わる重要な要素です。正しく使えば、ページの分かりやすさと評価を同時に高められます。
特に意識したいのは次の3点です。
- alt属性を適切に設定する
- 表示速度を意識して最適化する
- CSSと組み合わせてユーザー体験を高める
これらを実践すれば、実務でも通用するimgタグの使い方が身につきます。基礎を確実に押さえつつ、応用にも挑戦していきましょう。
