Blank .gif with background image to display icons – semantic meaning?

Question

In this article, an interesting technique to embed icons is presented:

<img src="blank.gif" class="chromium">

.chromium {
  background:url(//ssl.google.com/imagepath.png) no-repeat;
  width:250px;
  height:250px;
}

The above 'Google' technique I like to explain to others as a transparent window image with a background image, essentially you're looking through a transparent image to see a background image.

Essentially, a transparent .gif is embedded as inline image. Using a class on the image tag, a background image & dimensions are applied

Now my question is: Why would anyone do something like that?

To my understanding, this implies the semantic meaning of an inline image, but still enables the use of sprites to display icons.

So maybe it could be useful to mark up something like this, where icons are used that are still related to the content, often in more abstract ways:

Still I really don't get it – is there any semantic advantage over using background images for icons without the transparent .gif?

Note that the image tag is missing the alt attribute, but I didn't want to change the quoted code snippet.

Answer 1

No, there is no semantic advantage, that I can see.

The img doesn't have an id to make it unique, nor an alt to describe the content. And the content doesn't convey any meaning whatsoever.

If he had included an alt or an id, then maybe there was something to say for this technique. But even then, it would still have the disadvantage of wasting bandwidth, having to load two image files instead of one.