预加载响应式图像，更快地加载图像

从 Chrome 73 开始，您可以结合 link rel="preload" 和响应式图像来更快地加载图像。这篇文章将让我有机会来讨论我最喜欢的两件事：响应式图像和预加载。作为致力于开发这两块功能的人，我很高兴看到他们一起工作！

假设您正在 300 像素宽的屏幕上浏览网页，并且该页面请求了以下图像：

<img src="image-300w.jpg" alt="A cute cat">

浏览器将下载图像 image-300w.jpg，并在页面上显示它。但是，如果您使用响应式图像，浏览器还可以下载图像 image-600w.jpg 和 image-900w.jpg。这些图像分别适用于 600 像素宽和 900 像素宽的屏幕。

当用户调整浏览器窗口大小时，浏览器将根据窗口的宽度自动选择并显示最合适的图像。这可以节省带宽并提高网页的加载速度。

为了使用响应式图像，您需要在 HTML 代码中添加以下代码：

<picture>
  <source srcset="image-300w.jpg 300w,
                   image-600w.jpg 600w,
                   image-900w.jpg 900w"
                   sizes="(max-width: 300px) 300px,
                          (max-width: 600px) 600px,
                          900px">
  <img src="image-300w.jpg" alt="A cute cat">
</picture>

这段代码告诉浏览器：

• 图像 image-300w.jpg 适用于 300 像素宽的屏幕。
• 图像 image-600w.jpg 适用于 600 像素宽的屏幕。
• 图像 image-900w.jpg 适用于 900 像素宽的屏幕。

如果浏览器的宽度小于或等于 300 像素，浏览器将显示图像 image-300w.jpg。如果浏览器的宽度大于 300 像素但小于或等于 600 像素，浏览器将显示图像 image-600w.jpg。如果浏览器的宽度大于 600 像素，浏览器将显示图像 image-900w.jpg。

为了预加载响应式图像，您可以在 HTML 代码中添加以下代码：

<link rel="preload" href="image-300w.jpg" as="image">
<link rel="preload" href="image-600w.jpg" as="image">
<link rel="preload" href="image-900w.jpg" as="image">

这段代码告诉浏览器预先加载图像 image-300w.jpg、image-600w.jpg 和 image-900w.jpg。这样，当用户调整浏览器窗口大小时，浏览器就可以立即显示最合适的图像。

预加载响应式图像可以显著提高网页的加载速度。在一些测试中，预加载响应式图像可以将网页的加载时间减少一半以上。