背景图片是万恶之源

了解为什么要避免在网站上使用背景图片、如何快速找到背景图片以及如何修复此问题

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2024-11-27

背景图片是万恶之源

认识我或听过我演讲的人可能听我谈论过背景图片。对于还不了解的人：我真的非常非常不喜欢背景图片。在这篇文章中，我将快速解释为什么不喜欢背景图片、如何快速找到使用背景图片的页面以及如何修复它们！

为什么背景图片对 Core Web Vitals 不利

加载网页时，每个元素都有其时机和位置。通过一些现代技术，如延迟加载、预加载、异步加载、调度、定义 fetchpriority 等等，我们可以基本上控制所有关键资源。除了背景 图片！ 

看看这个真实案例：

每天，主要在 WordPress 网站中，我都会看到这种模式。所有普通图片都使用了懒加载，而一些图片（在这个例子中是页脚的社交图标）是背景图片。你能猜到会发生什么吗？

<html>
<head>
    <style>
        footer {
            /* a margin of 100 vh wil make the footer off-screen !*/
            margin-top: 100vh;
            >.social {
                >.facebook {background-image: url('img/facebook.jpg');}
                >.instagram {background-image: url('img/instagram.jpg');}
                >.linkedin {background-image: url('img/linkedin.jpg');}
                >.email {background-image: url('img/email.jpg');}
            }
        }
    </style>
</head>
<body>
    <!-- yes this image is lazy loaded, because tiny mistakes happen! -->
    <img loading="lazy" src="img/hero.jpg"></img>
    <footer>
        <div class="social">
            <span class="facebook"></span>            <span class="instagram"></span>            <span class="linkedin"></span>            <span class="email"></divspan        </div>
    </footer>
</body>
</html>

你可能已经猜到了：屏幕外的背景图片在远更重要的 'hero.jpg' 图片 之前被加入下载队列，而后者通常会成为页面上的 Largest Contentful Paint 元素。

lazy lcp with bg img

但这还不是全部！

正如我所说，背景图片是万恶之源！这是因为，除了有时获得奇怪的优先级之外，背景图片缺少普通图片所拥有的酷炕功能！

  • 没有懒加载：背景图片没有 loading 属性
  • 没有异步解码：背景图片没有 decoding 属性
  • 没有 fetchpriority：背景图片没有 fetchpriority 属性
  • 响应式图片源：背景图片的 image-set() 属性没有良好响应式设计所提供的强大功能。
  • 没有 width 和 height 属性。无法设置简单的 width 和 height 属性将迫使你使用需要代码的变通方案（相同复杂度下，更多的代码总是比更少的代码慢！）
  • 没有 alt 文本：虽然这并不

快速找到页面上所有的背景图片

那么我们如何找出网页上是否有背景图片呢？你可以查看网络检查器，按图片过滤，右键点击菜单栏，启用 initiator 列并检查 initiator，但更简单的方法是将这段代码粘贴到开发者控制台中。

只需使用 Ctrl-Shift-I 打开开发者控制台，导航到控制台标签页并粘贴此代码。它将显示页面上所有的背景图片
let bgimg = performance.getEntriesByType('resource')
  .filter(rs => rs.initiatorType == 'css')
  .map(rs => {
  return {
    name: rs.name,
    initiator: rs.initiatorType
  }
}) || [];

(bgimg.length > 0)?
    console.table(bgimg):
    console.log('No background images on this page!');

这将以清晰格式的表格显示所有背景图片的名称和发起者

background img console table

如何避免背景图片

背景图片很容易避免。具体方法取决于图片本身。大致有两种方法。

普通图片的情况

如果我告诉你，你可能都不敢相信，但在我发现背景图片的大多数情况下，图片的背景部分甚至没有任何用途。这些图片只是“需要出现在页面的某个地方”，而 background-image:url() 被滥用于此目的。
如果是这种情况，只需添加一个普通的 image 标签并从样式表中移除背景图片即可。

封面图片的情况：

封面图片是完全覆盖父容器的图片。使用背景图片作为封面图片在某种程度上是有道理的，因为很久以前这曾经是获取封面图片的唯一方式，我猜人们只是坚持他们所知道的。幸运的是，现在有更好的选择。让我们来修复它！
对于封面图片，只需移除样式   background-image: url(hero.jpg);background-size: cover;，然后在同一容器中放置一个普通图片并编辑 CSS 如下所示：

<style>
.img-container {
    position: relative;
    > img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: absolute;
       z-index: 1;
   }
}
<style>

<div class="img-container">
  <img 
       height="500" 
       width="300" 
       decoding="async" 
       loading="lazy" 
       src="hero.jpg"
       srcset="hero-320w.jpg, hero-480w.jpg 1.5x"
       alt="alt text"
       fetchpriority="low"
  >
</div>


CrUX data is 28 days late.

Google provides data 28 days late. CoreDash provides data in real-time. Debug faster.

Get Real-Time Data >>

  • Real-Time Insights
  • Faster Debugging
  • Instant Feedback
背景图片是万恶之源Core Web Vitals 背景图片是万恶之源