我们中的许多人已经使用CSS background-image属性切割牙齿来做各种各样的事情。对许多人来说，这就像一位老朋友，但我们应该考虑告别。

真正的问题不是CSS background-image属性本身。相反，它被用于它不应该的地方，例如主CTA英雄图像或UI图像。

使用不当，background-image可以是反模式。有合法的用例background-image吗？当然。

但是，使用CSS background-image属性有一些严重的缺点，更重要的是，我们现在有更好的方法在我们的浏览器中实现图像。

我们不要谈论跳舞仓鼠背景的日子

因此，让我们直接进入并讨论使用CSS background-image属性的缺点，然后我们可以使用它。

以下是使用CSS background-image属性可能不好的几个原因：

链接1.对SEO不利

Google不会抓取或索引CSS background-image属性中的图片。没什么大不了的？好吧，请查看Google图片搜索Moz .com文章中如何排名的引用：

…在Google中执行的所有搜索中，有三分之一用于图像，12.5％的SERP显示Image Pack结果…

让它沉入其中。在Google中执行的三分之一或33％的搜索都是针对图像的。如果图像与页面主题或客户的业务完全相关（如果不是，则可能应该是这样），您绝对希望被编入索引。

如果你使用的background-image话就错过了，你也不能alt=""对图像进行描述，以便为Google提供图像的描述和 背景。

链接2.可访问性不佳

该CSS background-image属性是不好的辅助功能。屏幕阅读器会忽略background-image完全。

看一看的辅助关注：

浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要，因为屏幕阅读器不会宣布它的存在，因此不向用户传达任何信息。

即使屏幕阅读器没有完全忽略图像，也没有alt=""可以为图像或上下文提供有用描述的文本。

专业提示：如果你真的想要一个屏幕阅读器跳过一个图像（也许它只是一个设计元素），只需要一个空的alt标签，例如:( 属性alt=""的使用role="presentation"不是最佳的，因为它违反了ARIA的第一条规则）。

链接3.性能不佳

该background-image物业怎么可能对表现不利？因为通常只有一个图像用于background-image属性，而不管设备屏幕宽度或分辨率如何。

我们理想的是能够使用响应式图像，以便浏览器可以根据设备的屏幕宽度或分辨率加载不同大小的图像。

这在移动设备或低带宽连接以及缩放图像所需的处理能力方面产生巨大差异。退房的验尸：应用图像优化了细节的文章。

在典型的站点上，图像到目前为止是发送数据的最大块。我们应该优化它们。

虽然您可以通过CSS@media查询来实现这一点，但如果您需要更改图像或重命名图像或对其进行版本化，它最终会变得非常粘。 background-image

它变得棘手的原因是图像嵌入在CSS中，这通常由不在客户端控制下的构建过程构建。

因为它很难，人们通常只是在它上面并且为所有设备屏幕尺寸和分辨率提供一个版本的图像。

虽然有诸如bgset这样的JavaScript库可以提供帮助，但为什么还要添加更多JavaScript来解决存在许多其他缺点的问题？

添加使用像webp这样的下一代表单作为渐进增强的愿望，事情变得非常棘手background-image。

链接4. CMS和CDN的不良

该CSS background-image属性也并不是很大，当涉及到内容管理系统和内容分发网络（CDN的）。

假设我的网站上有一个英雄形象，我<div>通过图像设置实现background-image，然后我的网站起飞！

来自世界各地的人们正在访问我的网站，我想使用  CDN以最佳方式向他们提供这些资源。

如果我在我的CSS中嵌入了图像URL，我将不得不进行全局搜索并替换所有图像，以将其URL从本地URL切换到我的CDN  URL。

如果您使用CSS变量为所有图像URL开头，那么对您有好处！但是大多数人都没有，并且每当你想要改变你的图像时必须构建和部署一个新的CSS资产包似乎……过度。但它或者是动态生成内联CSS ……但是不要去那里。

让你的CMS处理URL前缀要容易得多，但是如果你通过CSS 做这件事就会变得很糟糕background-image，因此需要生成内联样式和其他恶作剧。

将图像URL放在CSS中总是感觉像“现在硬编码”给我。

链接那么什么时候好呢？

所以我们一直在谈论缺点，但什么时候使用CSS background-image属性真的很好？

它可能看起来很明显，但如果你有一个案例，你实际上有一个图像作为一个纯粹的装饰图像背景…这是什么时候使用background-image！

当您有实际的背景图像时，最好使用背景图像

如果你正在做的，可以考虑使用图像设置（）一起background-image，以减轻上述性能问题。

这并不是说房产本身就是坏事，而是因为它已经被迫做了事情，它可能不是最好的选择。

链接使用<PICTURE>代替！

我认为人们使用的一大原因background-image是因为CSS background-size: cover;属性。它可以让你确保一个图像“井盖”它在美观的方式连接到的东西。

物件贴合属性是为了节省一天！

如果您将语义HTML元素<picture>与object-fit属性一起使用，您将获得相同的好处，background-size: cover;但您还可以获得：

• SEO友好的图像
• 无障碍友好图像（只需使用该alt=""属性）
• 适用于CMS生成的图像链接和  CDN
• 与伟大的作品srcset优化图像
• 可以<source>用于下一代图像格式.webp

这真的不难做，而且好处很多！该object-fit属性告诉图像或视频它应该如何适合父容器。你只需改变这个：

显然，在这两种情况下，您可能都不会使用内联样式，但希望您可以看到，如果我们抛弃background-image属性并使用像和那样的实际语义HTML元素，我们会有多灵活的方法。<picture><img>

然后，我们可以轻松地添加响应大小的图像srcset。我们还可以轻松添加下一代图像格式，例如.webp浏览器也可以选择<source>。

然后，我们还可以利用Chrome和其他浏览器中的本机图像延迟加载等功能。

以下是执行所有操作的最终代码块：