外部サイトの画像を表示する際の絶対パスとプロトコルの意味をわかりやすく解説

Webページに外部サイトの画像を表示させたい場合、「絶対パス」と「プロトコル」を正しく理解することが重要です。初心者の方にとって、この概念は少し難しく感じるかもしれません。本記事では、なぜプロトコルを含めた絶対パスが必要なのか、わかりやすく説明します。

絶対パスとは何か

絶対パスとは、画像やファイルが存在する場所をWebブラウザに正確に伝えるための「完全な住所」です。例えば、https://example.com/images/photo.png のように、最初からドメイン名やプロトコル（httpやhttps）を含めて記述する形式です。

これに対して、自サイト内の画像では img/photo.png のように、相対的な場所を示す「相対パス」で十分です。

プロトコルとは何か

プロトコルは、ブラウザとサーバー間で通信するためのルールを示す部分です。URLの冒頭にある http:// や https:// がそれに当たります。

ブラウザはこのプロトコルを見て、どの方法でデータを取得すればよいか判断します。httpsは暗号化通信を行うプロトコルで、httpは暗号化されていない通信です。

なぜ絶対パスが必要なのか

外部サイトの画像を使う場合、ブラウザはどのサーバーにアクセスすればよいか分かりません。相対パスだけでは自サイト内を探してしまうため、画像が表示されません。

そこで、プロトコルを含めた絶対パスを指定することで、ブラウザに「この正確な場所から画像を取ってきて」と指示することができます。

例で理解する

例えば、以下のように書くと外部画像は正しく表示されます：
<img src="https://example.com/images/photo.png">

もし src="images/photo.png" のように書くと、ブラウザは自分のサーバー上にある images フォルダを探してしまい、外部の画像は表示されません。

まとめ

外部サイトの画像を表示する際は、プロトコル（http:// や https://）を含めた絶対パスで指定する必要があります。これにより、ブラウザが正しいサーバーからデータを取得でき、画像を正しく表示することができます。

自サイト内の画像であれば相対パスで十分ですが、他者のサーバーにある画像は必ず絶対パスで指定しましょう。