htmlタグ｜img（イメージ・画像）

ホームページ（ウェブサイト）制作において、テキストだけでは伝わりにくい事業の魅力やサービスの内容を、視覚的に分かりやすくユーザーへ伝えるために画像は非常に重要な役割を持っています。この画像ファイルをページ内に表示させるために使用されるのが、HTMLの「img」タグです。

「img」タグは、他の多くのタグのように開始タグと終了タグでテキストを囲むのではなく、タグの中に画像ファイルの場所（URL）を指定する「src」属性を記述することで機能する単独の要素です。単純に画像を画面に出力するだけであればこの「src」属性だけで表示は可能ですが、現在のWeb標準においてはそれだけでは不十分です。

画像を適切に扱うことはSEO（検索エンジン最適化）や表示速度の改善に直結します。検索エンジンのクローラーはテキストを読み取ることは得意ですが、画像の中に何が写っているのかを視覚的に完全に理解することはまだ難しいため、テキストによる補足が必要になります。また、画像ファイルはテキストに比べてデータ容量が大きく、適切な設定を行わないとページの読み込み速度（ページスピード）を著しく低下させる原因になります。ページの表示が遅い状態はユーザーに強いストレスを与え、直帰率の上昇につながります。

事業用のホームページ（ウェブサイト）において、ユーザーが快適に閲覧できる環境を整え、検索エンジンからの適切な評価を獲得するためには、「img」タグに付随する様々な属性を正しく設定することが求められます。本ページでは、画像を表示する基本的な記述方法から、集客に強いサイトを構築するための高度な画像の最適化手法について詳しく解説します。

img（イメージ・画像）

<img src=”” alt=”” />

ホームページ制作（ウェブサイト制作）の際に使用する<img>タグについてのご説明です。

ホームページを制作する時<img>（イメージ）タグを使用することで、「埋込みイメージ」としてホームページ（ウェブサイト）内のページに画像を設置することができます。

<img> 埋込みイメージ、画像を表示

Image。イメージ。ウェブページ内に画像を表示します。ホームページ制作でよく使用するタグで、サーバーに画像をアップロード後、その画像のURLパスを元にこの<img>タグでページに画像を呼び出す形になっています。

<img>タグ使用の際には、画像ファイルがある場所へのパスと、画像が表示できない場合の代替テキストの指定（alt属性）は必須になっています。

かつては見た目を調整する属性が多く存在しましたが、現代のWeb標準仕様では、画像の構造と意味を伝えること、そしてページの表示速度（Core Web Vitals）を最適化することに役割が特化しています。SEO評価とユーザー体験を向上させるための、最新の仕様に基づいたimgタグの適切な記述方法について解説します。

必須・基本属性

画像を読み込み、検索エンジンや音声読み上げソフトに対して画像の意味を正確に伝えるための、現代の仕様において最も重要な属性群です。

src（ソース）属性

画像ファイルの場所（URL）を指定します。src="画像のURL" と記述します。相対パス、絶対パスのどちらでも指定可能です。現代ではJPEG、PNG、GIFだけでなく、より圧縮率が高く高速に表示できるWebP（ウェッピー）形式や、ベクターデータのSVG形式の画像ファイルが広く利用されています。

alt（オルト）属性

画像が表示できなかった際の代替テキストや、音声読み上げソフト用のテキストを指定します。alt="画像の説明" のように記述します。SEOやアクセシビリティの観点からimgタグへの指定は必須です。
より専門的には、意味を持たない単なる装飾目的の画像の場合は、あえて alt=""（空の値）を指定することで、スクリーンリーダーが読み飛ばすように設定するのが正しい仕様です。

width（幅）とheight（高さ）属性によるCLS対策

画像の幅と高さを指定します。現代の仕様では必ず記述することが強く推奨されています。
かつては「%（パーセント）」での指定も可能でしたが、現在のHTML5仕様では「数値のみ（ピクセル値、pxの記述は不要）」を指定します（例：width="800" height="600"）。これを指定しておくことで、ブラウザが画像を読み込む前にレイアウトの枠（アスペクト比）を計算・確保し、画像読み込み後にページがガクッとずれる現象（CLS：Cumulative Layout Shift）を防ぎます。実際の画面サイズに合わせたレスポンシブな伸縮は、CSS側で width: 100%; height: auto; などと指定して制御します。

表示速度（パフォーマンス）を最適化する属性

スマートフォン閲覧が主流となった現在、通信量を抑え、画面を素早く表示するための属性設定が事業用ホームページの成果に直結します。

loading（ローディング）属性

画像の読み込みタイミングを制御します。

lazy（レイジー）

ユーザーの画面（スクロール）に近づくまで画像の読み込みを遅延させます。ファーストビュー（ページを開いて最初に表示される領域）「以外」のすべての画像に loading="lazy" を付与することが現在のSEOの標準です。

eager（イーガー）

ページ表示と同時に即座に読み込みます（初期値）。ファーストビューにある重要なメイン画像などに適用します。

auto

ブラウザの判断に任せます。

decoding（デコーディング）属性

ブラウザが画像データを解読（デコード）する処理の優先度を制御します。

async（アシンク）

画像のデコードを非同期で行い、他のコンテンツ（テキストなど）の表示を妨げないようにします。ファーストビュー以外の画像に decoding="async" を指定すると、ページ全体の体感表示速度が向上します。

sync

同期的にデコードします。

auto

ブラウザの判断に任せます。

画像の非同期デコードと遅延読み込み

画像の非同期デコード decoding=”async”で、画像を読み込む時に他のコンテンツの読み込みを妨げることを防ぐことができます。また、loading=”lazy”で、画像の遅延読み込みを実装できます。これらにより、ページのファーストビュー（画面内に表示される領域）速度を向上させることができます。

画像の非同期デコード「decoding=”async”」と遅延読み込み「loading=”lazy”」

srcset（ソースセット）属性とsizes（サイジズ）属性

レスポンシブデザインにおいて、スマートフォンの小さな画面にパソコン用の巨大な画像を読み込ませないために使用します。画面の幅に応じて、複数の画像ファイル（大・中・小など）の中から最適なサイズのものをブラウザに選ばせて読み込ませるための、現代の高度な最適化手法です。

usemap（ユーズマップ）属性 画像マップとの連携

画像の一部にリンク領域を設定する際、定義したmapタグの名称を指定して紐付けます。usemap="#マップ名" のように、「#（ハッシュ）」から始まる値を記述します。

現代のHTML仕様で廃止・非推奨となったデザイン属性

かつてはimgタグ内に記述してレイアウトを整えていましたが、現在は「構造（HTML）」と「装飾（CSS）」を完全に分離するため、以下の属性はすべて廃止されています。これらはすべて外部CSSファイルで指定します。

align（アライン）属性

テキストとの位置関係（top、middle、bottom、left、right）を指定してテキストの回り込みなどを制御していましたが、廃止されています。画像の回り込みや配置は、CSSの float や flexbox、vertical-align プロパティを使用して構築します。

border（ボーダー）属性

画像の境界線（枠線）を指定する属性でした。かつてはリンクを貼った画像に青い枠線が自動的につくのを防ぐために border="0" と記述する文化がありましたが、現在は廃止されています。枠線を消す、またはデザインとして枠線をつける処理は、CSSの border プロパティで行います。

hspace（エイチスペース）とvspace（ブイスペース）属性

画像の左右の余白（hspace）や上下の余白（vspace）を指定する属性でしたが、廃止されています。画像の周囲の余白は、すべてCSSの margin または padding プロパティを使用して指定します。

読み方　イメージ

alt属性とSEO

画像の代替テキストを指定するalt属性は、<img>タグにおいて必須指定項目です。かつ、SEOの基本になります。alt属性は画像が表示できない場合の代替テキストを指定しますが、同時に画像がどのようなキーワードにマッチした画像なのかを示す属性のため、ページのテーマに沿った画像が設置されていることを検索エンジンに示す属性になります。ウェブサイト、ページの検索エンジン最適化の必須項目と言えるでしょう。

単に画像を配置するだけでなく、検索エンジンや様々な環境のユーザーに画像の意味を伝える設定や、ページ表示時のレイアウト崩れを防ぐための設定が重要です。ここでは、現代のホームページ（ウェブサイト）制作において必ず設定すべき「img」タグの各属性について解説します。

代替テキスト（alt属性）による情報伝達

「img」タグを使用する上で最も重要なのが「alt」属性の指定です。これは通信環境の問題などで画像が表示されなかった場合の代替テキストとして機能するだけでなく、音声読み上げソフト（スクリーンリーダー）を利用するユーザーに対して画像の内容を音声で伝えるという大きな役割を持っています。さらに、検索エンジンに対しても画像の意味を的確に伝達できるため、画像検索からの流入を獲得する上でも非常に有効な手段となります。

width・height属性によるレイアウトシフトの防止

画像の幅を示す「width」属性と、高さを示す「height」属性も、適切な数値をあらかじめ設定することが推奨されます。これらを指定しておくことで、ブラウザは画像データの読み込みが完了する前にその表示領域（スペース）を確保することができます。これにより、ページの読み込み途中で画像が遅れて出現し、読んでいたテキストが急に下に押し出される現象（CLS：Cumulative Layout Shift）を防ぎ、ユーザーに快適な閲覧体験を提供できます。これは検索エンジンの重要な評価基準の一つにもなっています。

<img src=”” alt=”” />

画像の品質と表示速度・SEOの関係

画像をホームページに配置するとき、見た目の美しさとページの読み込み速度のバランスをとることが求められます。検索エンジンからの評価を高め、ユーザーに快適に閲覧してもらうためのポイントを見ていきます。

きれいな写真とページ表示速度のバランス

高画質な写真を使用すると、見た目は良くなりますが、データ容量が重くなりページの表示速度が低下する恐れがあります。表示速度の低下は、ユーザーの離脱を招くだけでなく、検索順位にも悪影響を及ぼすかもしれません。画質を保ちながら適切に画像を圧縮し、ホームページ全体のパフォーマンスを向上させる方法については、以下のページをご覧ください。
きれいな写真と検索順位の関係 画像の重さと表示速度

Web用画像の解像度とピクセル数

一眼レフカメラや最新のスマートフォンで撮影した写真は非常に解像度が高く、そのままホームページにアップロードするには適していません。Web上で表示するためには、適切なピクセル数と解像度（dpi）に調整する作業が必要です。デバイスごとの適切なサイズ感や、画像を最適化する基準について詳しく知りたい場合は、こちらの記事が役立ちます。
Web用画像の解像度とピクセル数 スマホや一眼レフの写真

SNS連携とホームページの運用設計

事業の集客において、ホームページとSNSを連動させることは非常に効果的です。また、画像を頻繁に差し替えるような運用を行う場合、あらかじめ修正しやすいようにページを設計しておく必要があります。

OGP画像の最適なサイズとセーフエリア

ホームページのコンテンツがX（旧Twitter）やFacebookなどのSNSでシェアされた際、魅力的なアイキャッチ画像を表示させるにはOGPの設定が必要です。各SNSで画像が見切れないようにするためのセーフエリアの考え方や、推奨される最適な画像サイズについては、以下のページで詳しく解説しています。
OGP設定時の最適な画像サイズとセーフエリア

画像変更や運用・修正のしやすさを考慮した設計

事業環境の変化に合わせて、ホームページの画像やテキストは定期的に更新していくことになります。最初から修正のしやすさを考慮してHTMLやCSSを設計しておくことで、将来的な運用コストを大幅に抑えることができます。メンテナンス性の高いサイト構築について興味がある場合は、こちらをご確認ください。
ホームページ修正のしやすさを考えた設計

画像に関連するマークアップと用語知識

imgタグの基礎を理解した後は、より専門的にはどのようなタグを組み合わせて使うのか、またWeb制作の現場で使われる専門用語についても知っておくと便利です。

figureタグを使った画像のマークアップ

画像を掲載する際、imgタグだけでなくfigureタグやfigcaptionタグを組み合わせてマークアップすることで、画像にキャプション（説明文）を関連付けることができます。検索エンジンに対して、その画像が何を表しているのかを正確に伝えるための方法論として、以下の記事を参考にしてください。
HTMLのfigureタグとfigcaptionタグの使い方

Web制作における画像の専門用語

JPEG、PNG、WebPなどのファイル形式の違いや、トリミング、リサイズといった画像処理に関する言葉など、ホームページ制作において頻繁に登場する画像の専門用語をまとめています。これからホームページを自作したり、制作会社とやり取りしたりする際に役立ててください。
画像に関するWeb制作・ホームページ制作用語集

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ制作・SEOの1ポイント

ホームページ制作で、テキストの次に重要なコンテンツはおそらく画像でしょう。ただし画像の設置はSEOにもプラスに働くものの、サーバー負荷が増えたり、alt無指定などのSEOの省略をしてしまいがちな項目です。逆に言えば、画像を軽量化したり、きちんとalt属性やキャプションを設定することで、SEOにプラスに働きます。画像を差し替えたときなどはalt設定を忘れがちですが、SEOを考えるのであれば、ページのSEOスコアや画像検索対策のためにもしっかりと設定を確認する必要があります。

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法