Is it valid to set img src="about:blank"?

Question

Background: I need to have an inline element to which I can apply width and height via CSS. AFAIK, img is the only way to have this behavior, currently.

I would rather not have the image point to a transparent pixel GIF on the server. It may be cached, but browsers queue it nevertheless, slowing down overall page speed. Other clients might not be caching at all.

PS No, floating div is not sufficient, it behaves differently from inline elements.

EDIT Sorry, I should have inserted the term "cross browser" somewhere. It must at least be working for FF≥2, IE≥7 and current Safari.

Answer 1

You could use the "data:" URI scheme to embed an image.

Other replaced elements might also work. Setting display to "inline-block" might also be worth looking into.

Answer 2

Can you set:

display:inline-block;
width:50px;
height:10px;

IIRC, images are an "inline block" element, thus they can be rendered inline in text strings, but still have block-like properties.

Answer 3

I guess it will be valid in the W3C validator sense, because the validator does not check whether the link is a resource or not.

However, valid in the broader sense, I would say it is not. An src attribute is required in the IMG tag, and I would say must point to a valid image resource.

I find outis`s "data: URI" idea the best way.

If that doesn't work, a transparent image is your best bet. It's one call, it's a few bytes at best, and will be cached by most clients.