HTMLの <img> タグにおける src 属性（sourceの略）は、画像のソースファイルの位置を指定するために使用されます。これは画像ファイルのURLをブラウザに伝え、その場所から画像を読み込み、ウェブページに表示するためのものです。
src 属性の使用法
src 属性は必須であり、この属性がないとブラウザは画像を表示できません。src には絶対URLまたは相対URLを指定することができます。
- 絶対URL: フルパスを使用してウェブ上の特定の場所を指します。例えば、他のウェブサイト上にホストされている画像へのリンクです。
<img src="http://www.example.com/images/picture.jpg" alt="説明テキスト">- 相対URL: 現在のファイルからの相対的なパスを使用します。例えば、同じサーバ上の異なるディレクトリにある画像へのリンクです。
<img src="/images/picture.jpg" alt="説明テキスト">または、現在のディレクトリ内の画像へのリンクです。
<img src="picture.jpg" alt="説明テキスト">さらには、親ディレクトリにある画像へのリンクです。
<img src="../picture.jpg" alt="説明テキスト">src 属性のベストプラクティス
- 正確なパス:
src属性に指定するパスは正確でなければなりません。間違ったパスが指定されていると、画像は壊れた画像アイコンとして表示されます。 - アクセス可能なリソース:
srcで指定された画像ファイルは公開されていてアクセス可能でなければなりません。権限が制限されているリソースは表示されません。 - 最適化された画像: 画像はウェブ用に最適化されている必要があります。つまり、ファイルサイズはできるだけ小さく、画質はできるだけ高く保たれている必要があります。
- セキュリティ: 絶対URLを使用して他のドメインからリソースを読み込む場合は、セキュリティ上の問題（ホットリンキングなど）に注意する必要があります。
src 属性は画像を表示するための中心的な属性であり、その正確性と最適化はウェブページのパフォーマンスとユーザー体験に直接的な影響を与えます。