您的图像必须具备 3 个属性！

内容

1. 简介
2. 图片
3. 背景图像
4. 概括

简介

俗话说，一图胜千言。说到性能，这确实需要付出千言万语的代价！
图片通常体积很大，加载需要一段时间。它们还会阻塞渲染，因此必须先完成渲染，页面下方的内容才能加载。

但希望还在！我们可以用一些简单的属性让图片变得懒惰，不影响页面的其余部分！

首先，请确保你的图片尽可能小。我强烈推荐Chrome 团队的Squoosh，它可以帮助你优化图片尺寸。

将它们转换为更现代的格式，例如webp，只需更改文件类型即可节省高达 26% 的文件大小！！Webp现在也得到了相当好的浏览器支持。

图片

这是网站上的当前图片：

<img src="some_image_file.png" />

我们可以使用一些属性来改善此图像的加载，如下所示：

<img src="some_image_file.png" loading="lazy" decoding="async" alt="A Description of the image" />

简单的！！

让我们深入研究这些属性。

加载中

它现在具有广泛的浏览器支持，如果浏览器不支持它，它将被忽略，所以没有理由不添加它！

它的值为eager或lazy。
默认值为 Eager，表示无论用户当前是否能看到图像，浏览器都会立即加载。Lazy
允许浏览器自行决定何时加载图像，即当用户距离内容较近时才加载。这意味着我们不必立即加载整页图像，只需加载那些我们能够立即看到的图像即可。

解码

所有浏览器都支持此功能。
这会提示浏览器希望如何解码图像，是同步解码还是异步解码。无论是否干扰其他内容的播放。

Alt

这不会影响加载性能。但请务必使用它！🙏
添加它只需很少的精力，就能提升您的网站可访问性！
想出这个值的最佳方法是想象一下你正在电话里向朋友描述这张图片，你会怎么做。
这正是 alt 属性对屏幕阅读器的作用，所以请使用它！

背景图像

背景图像的延迟加载有点棘手。

首先，我真的会尝试不使用背景图像，因为它们不太易于访问，所以如果可能的话，请使用普通图像元素。

如果你实在无法使用普通图像，那么你就只能使用 JavaScript 来仅在图像靠近视口时显示它。

这可以通过Intersection Observer来实现， web.dev 网站上有一个很好的例子，如果你实在不能使用图像元素，我会推荐这个例子。

概括

总而言之，这三个属性可以以最小的努力提升你网站的性能！
不存在浏览器支持问题，也没有任何理由不使用它们，所以现在就把它们添加到你的图片中吧！

如果您使用的是图片元素，这些属性也同样有效，只需像平常一样在图片元素上设置它们即可。
以下是使用图片元素根据暗黑模式切换图片的示例。

<picture>
    <source srcset="/images/linkedin-white.webp" media="(prefers-color-scheme: dark)" />
    <img class="linkedin" src="/images/linkedin.webp" alt="LinkedIn Profile" loading="lazy" decoding="async" />
</picture>

如果您使用图像元素并通过srcset属性使用多种尺寸的图像，它们也会起作用。

立即将这 3 个简单属性添加到您的图像中！

快乐建造！