我们可以轻松地做两件事来提高我们网页上的图像性能：
1. 延迟加载图像：基本上，延迟加载图像意味着仅当我们需要在视图中显示它时才对该 img 发出请求。
让我们举一个例子，我们有一长串垂直图像：
<img src="cat1.png" />
<img src="cat2.png" />
<!-- many cats here -->
<img src="cat25.png" />默认情况下，页面将请求所有这些，即使只有第一个在初始视图中。这将使我们的页面加载速度变慢。
但是，如果我们添加 loading=”lazy”，浏览器将仅在用户向下滚动到该特定图像时请求 img。我们只在需要时加载图像。
<img src="cat1.png" loading="lazy"/>
<img src="cat2.png" loading="lazy"/>
<!-- many cats here -->
<img src="cat25.png" loading="lazy"/>loading 属性的第二个接受值是 loading=”eager”。但与默认相同；因为没有声明 loading 属性。
2.预加载关键大英雄图片：我们可以使用链接rel=preload提前请求大图片：
<link rel="preload" as="image" href="donut.jpg">