html - 带有背景图像的空白 .gif 以显示图标——语义？

Question

在this文章中介绍了一种有趣的嵌入图标的技术:

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

本质上，一个透明的 .gif 被嵌入为内联图像。在图像标签上使用类，应用背景图像和尺寸

现在我的问题是:为什么会有人做那样的事情？

根据我的理解，这暗示了内联图像的语义，但仍然可以使用 sprite 来显示图标。

所以标记这样的东西可能会有用，其中使用的图标仍然与内容相关，通常以更抽象的方式:

仍然我真的不明白 - 与使用没有透明 .gif 的图标背景图像相比，有什么语义优势吗？

请注意，图片标签缺少 alt 属性，但我不想更改引用的代码片段。

Answer 1

不，我看不出语义上的优势。

img 没有 id 来使其唯一，也没有 alt 来描述内容。而且内容不传达任何意义。

如果他包含了一个 alt 或一个 id，那么这个技术也许有话要说。但即便如此，它仍然有浪费带宽的缺点，必须加载两个图像文件而不是一个。