将 IMG 元素用于标题徽标或背景图像是不是更好，为啥？ [复制]

Posted 2023-03-05

【中文标题】将 IMG 元素用于标题徽标或背景图像是不是更好，为啥？ [复制]

【英文标题】：Is it better to use an IMG element for a header logo or a background image, why? [duplicate]将 IMG 元素用于标题徽标或背景图像是否更好，为什么？ [复制]

【发布时间】：2019-03-24 20:27:53

【问题描述】：

我经常看到像 *** 这样的网站，例如将他们的徽标嵌入为背景图像，并为屏幕阅读器的文本添加 span 标签。

<a href="https://***.com" class="-logo js-gps-track">
                    <span class="-img _glyph">Stack Overflow</span>
                </a>

为什么这样做而不是带有替代文本的 img 元素？ 有什么语义上的原因吗？一些可访问性的原因？搜索引擎优化的原因？

它不适用于在图片未加载时为后备文本设置样式。您可以设置替代文本的样式...

这不是为了提高性能 - 因为使用 img，您可以使用 srcset 和 size 来提供替代的较小图像，而 CSS 唯一接近 srcset 和 sizes 所做的规范尚未得到很好的支持。

我认为它有意义的唯一一次是当 spritesheet 用于站点时（例如堆栈溢出。）

如果是为了防止人们“窃取”徽标，那似乎很愚蠢，因为简单的 google 搜索会告诉某人如何获取背景图片的 url。如果这是推理，它仍然看起来很愚蠢，因为您可以在图像本身上使用pointer-events:none;，并将包装链接设置为display:inline-block;，它仍然是一个可点击的链接，没有人能够右键单击并另存为。

我只是想了解这样做是否有好处。

我四处搜索，但并没有真正找到任何有用的信息来回答为什么要这样做。

有人将此标记为与以下内容的重复： When to use IMG vs. CSS background-image? 他们不是同一个问题。这是您在网络上看到的特定做法和模式，其背后的原因可能不同。

【参考方案1】：

为什么这样做而不是带有替代文本的 img 元素？有什么语义上的原因吗？一些可访问性的原因？搜索引擎优化的原因？

当您想要使用 CSS 媒体查询并根据屏幕分辨率显示不同的徽标大小时，它非常有用。

关于可访问性，这可能是允许用户在禁用图像时查看替代文本的原因。

【讨论】：

关于备用图像的要点。

我想我会添加虽然技术上使用图片元素可以让你做同样的事情。

【参考方案2】：

看着它，我会说这是支持 SEO 的一种方法。正如您所指出的，有多种方法可以实现这一点，所以我愿意说这是他们的首选方法。