[技术翻译]预加载响应式图像，从Chrome 73开始实现

本次预计翻译三篇文章如下：

我为什么要创建这个git仓库？通过翻译国外的web相关的技术文章来学习和跟进web发展的新思想和新技术。git仓库地址：https://github.com/yzsunlei/javascript-article-translate

从Chrome 73开始，可以结合link rel = "preload"和响应式图像，来更快地加载图像。

本文使我有机会来讨论我最喜欢的两件事：响应式图像和预加载。作为致力于开发这两块功能的人，我很高兴看到他们一起工作！

响应式概述

假设您正在300像素宽的屏幕上浏览网页，并且该页面请求了一张1500像素宽的图像。该页面就浪费了您大量的网络数据，因为您的屏幕无法使用所有这些额外分辨率进行任何操作。理想情况下，浏览器应该获取图像的一个版本，只是比你的屏幕尺寸稍微宽一些，比如说325个像素。这样可以确保图像高分辨率而又不会浪费网络数据。而且，更好的是，图像将加载得更快。响应式图像使浏览器在不同的设备上能够获取到不同的图像资源。即使不使用图像CDN为每个图像保存多个尺寸，而在srcset属性中指定它们。w值告诉浏览器每个版本的宽度。根据设备，浏览器可以选择适当的一个版本：

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

预加载概述

通过预加载，您可以在HTML中发现关键资源之前，告诉浏览器您要尽快加载的关键资源。这对于不容易发现的资源特别有用，例如样式表中包含的字体，背景图像或从脚本加载的资源。

<link rel="preload" as="image" href="important.png">

响应式图像+预加载=更快的图像加载

响应式图像和预加载在过去几年中已经就可用了，但同时缺少一些内容：无法预加载响应式图像。从Chrome 73开始，浏览器可以在srcset发现img标记之前预加载正确的响应式图像版本！

根据您网站的结构，这可能意味着显着加快图像显示速度！我们在使用JavaScript延迟加载响应图像的网站上进行了测试。预加载使图像加载速度加快了1.2秒。

所有现代浏览器均支持响应图像，而预加载图像仅在基于Chromium的浏览器中受支持。

`imagesrcset`和`imagesizes`

为了预加载响应式图像，最近向<link>元素添加了新属性：imagesrcset和imagesizes。它们与element中使用<link rel="preload">的srcsetand sizes语法一起使用并匹配<img>。

例如，如果您要预加载使用以下命令指定的响应图像：

<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

您可以通过将以下内容添加到HTML的<head>中来做到这一点：

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

这揭开了使用相同的资源选择逻辑的请求，并应用srcset和sizes的序幕。

使用案例

预加载动态注入的响应式图像

假设您要动态加载人物图像作为幻灯片的一部分，并知道将首先显示哪个图像。在这种情况下，您可能要避免在加载有问题的图像之前等待脚本，因为这会延迟用户看到它的时间。

您可以在具有动态加载的图片库的网站上检查此问题：

1.在新标签页中打开此示例网站。
2.按Control+Shift+J（或Command+Option+J在Mac上）按打开DevTools。
3.单击网络选项卡。
4.在“限制”下拉列表中
5.禁用“禁用缓存”复选框。
6.重新加载页面。

该瀑布流显示图像仅在浏览器完成运行脚本后才开始加载，从而给图像最初显示给用户的时间带来了不必要的延迟。

preload在此处使用帮助是因为图像会提前加载，并且在浏览器需要显示图像时可能已经存在。

该瀑布流表明，第一张图像与脚本同时开始加载，避免了不必要的延迟，从而加快了显示图像的速度。

要查看预加载的区别，您可以按照第一个示例中的步骤检查相同的动态加载的图像库，但预加载了第一张图像。

避免该问题的另一种方法是使用基于标记的轮播，并让浏览器的预加载器选择所需的资源。但是，这种方法可能并不总是实用的。（例如，如果您正在复用现有的不基于标记的组件。）

使用图片集预加载背景图片

如果您针对不同的屏幕分辨率使用不同的背景图像，则可以使用以下image-set语法在CSS中指定它们。然后，浏览器可以根据屏幕的DPR选择显示哪一个。

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

上面的语法忽略了以下事实：在基于Chromium和基于WebKit的浏览器中，此功能需要浏览器的前缀。如果您打算使用此功能，则应考虑使用Autoprefixer来自动处理该问题。

CSS背景图片的问题在于，只有在浏览器下载并处理了页面中的所有CSS后，浏览器才会发现它们<head>，这可能是很多CSS…

您可以在带有响应背景图片的示例网站上检查此问题。

在此示例中，直到完全下载CSS后才开始图像下载，从而导致图像显示产生不必要的延迟。

响应式图像预加载提供了一种简单且无漏洞的方法来更快地加载这些图像。

<link rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">

您可以在预加载的响应式背景图像检查前面的示例的效果。

此处，图像和CSS同时开始下载，避免了延迟并加快了图像的加载速度。

预加载响应图像的实践

在理论上预加载您的响应式图像可以加快它们的速度，但是实际上它有什么作用？

为了回答这个问题，我创建了一个演示PWA商店的两个副本：一个不预加载图像，另一个预加载一些图像。由于该站点使用JavaScript懒加载图像，因此可能会受益于预加载初始视口中的图像。

这给了我以下结果：无预加载和图像预加载。从原始数字来看，我们看到“开始渲染”保持不变，“速度指数”略有改善（273毫秒，因为图像到达速度更快，但并没有占用很大的像素区域），但是真正的指标可以捕捉到差异是最后绘制的主题图像指标，提高了1.2秒。