個人ブログ

インフラ、アプリケーションまわり

<img src="">属性によるリクエストについて

画像を表示するとき、属性を指定することにより、記述したパスに該当する画像ファイルがページ上に存在する。

この時、画像に関しては別途、HTTPリクエストが送られ、画像が表示される。

HTMLファイルとしては、同一ファイル内に記述されているのだが、リクエストは画像ごとに別々でリクエストが送信される。

リクエストが送信される過程としては、WebブラウザがHTMLを解析する中でimgタグを認識し、srcタグで指定されたパスでリクエストが送信される。

パスは、絶対パスでも相対パスでも動作する。

ただし、相対パスで指定する場合、http(s)://〜のホスト部ドメイン部分は明示的に省略しなければいけない。

リクエストを切り分けることで生じる事象

例えば、画像ファイルの指定パスを誤って記述した場合。

この場合にも、HTML部分についてはブラウザに正常表示され、画像の部分だけ、ステータスコード404が返却され表示されないということになる。

また、alt属性を指定していると、画像の取得に失敗した場合に代替テキストが表示される。(ただしこの場合においても、画像ファイルを取得するリクエストのステータスコードは404である。

画像の送信を含む際のHTTP通信の接続について

HTTP通信では、リクエストのたびに接続を確率し、レスポンスが返却されれば接続を切ることを繰り返している。

たとえば、画像ファイルを多く含むWebページの場合、上記を繰り返すため、非常に冗長に思えるかもしれない。

しかし、HTTP1.1においては、リクエストヘッダに下記が付与されることによって、レスポンスを返した後に接続を維持し、次のリクエストを送るときは、保持している接続をそのまま再利用することができるようになっている。

Connection: keep-alive

これによって、画像ファイルにおけるやりとりが頻発しても、1つの接続内で行うことができるようになっている。