読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

img src="" で無駄リクエストが飛ぶ問題

Web HTML

どうなるかっていうのと、どうすればいいかっていうのをメモ。

古いAndroidの特定端末で起こったりするのですが、
このバグ、最近のブラウザではもう解消されてるのかしら?

コメントで頂きましたが、依然として起きるみたいです・・。

srcが空だと

以下のケース。

<img src="">

この場合、srcは勝手にそのページのルートへアクセスしてしまって、無駄なリクエストが発生していまいます。(いかなる状況でもそうなるわけではないみたいやけど)

それを回避するには

調べてみた限り、以下の3パターンが多かったです。

//:0

<img src="//:0">

これはすごいなーと思いました。

参考:html - What's the valid way to include an image with no src? - Stack Overflow

ただコレ、一部のAndroidで無理くり画像を読み込もうとするやつがいて・・。
後からsrcを差し替えても、最初のいわゆる「壊れたブランク画像みたいな表示」が焼け付いて、
後から差し替えた画像のまわりに謎の枠が現れたりするケースがあります。

about:blank

<img src="about:blank">

こんなのでもいいんですね。
そう、Chromeでお馴染みの、です。
INVALIDなHTMLになるからイヤ勢が割とおる模様。

1x1pxのgifbase64エンコードしたもの

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

上のが透明、下のが真っ黒。

なにとはいいませんが、URLライクな文字列がsrcタグに指定されてた場合に、独自の解釈でパスを置換するようなフレームワークがありまして。

そういうケースでは、上記2パターンが通用しないです。
そんな場合は諦めて、なるべく軽い画像を使おう、と。

まあ、いっぺんやってみてあかんかったら対応する、でいいやね。