背景图片是大敌

了解为什么应该避免在网站上使用背景图片，如何快速找到背景图片以及如何修复这个问题

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 元素。

但这还不是全部！

正如我所说，背景图片是大敌！这是因为，除了它们有时获得的奇怪优先级之外，背景图片缺少普通图片所拥有的实用功能！

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

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

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

只需使用 Ctrl-Shift-I 打开开发者控制台，导航到 console 选项卡并粘贴这段代码。它会显示页面上所有的背景图片
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!');

这将显示一个格式整齐的表格，包含所有背景图片的名称和 initiator

如何避免使用背景图片

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

普通图片的情况

你可能不相信，但在我发现的大多数背景图片案例中，图片的背景部分甚至没有任何用途。这些图片只是“需要出现在页面的某个位置”，而 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>


Lab data is not enough.

I analyze your field data to find the edge cases failing your user experience.

Analyze My Data >>

  • Real User Data
  • Edge Case Detection
  • UX Focused
背景图片是大敌 Core Web Vitals 背景图片是大敌