HTML: 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 transarent 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

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 2

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 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.

Answer 4

Use a <span> tag with a   in it - totally valid - then set it's width and height in CSS, also apply display: block;

Using an empty <span> tag means it will be ignored by screen readers and it won't show up as a broken image when styles are disabled.

It'll also not use up any more bandwidth.

:-D