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

时间 2020-02-10

原文原文链接

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

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

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

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

响应式概述

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

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

预加载概述

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

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

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

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

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

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

`imagesrcset`和`imagesizes`

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

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

<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秒。🎉🎉

固然，没有什么比电影胶片比较更能捕捉视觉差别了：

WebPageTest幻灯片比较的屏幕快照显示预加载的图像的显示速度大约要快1.5秒。

幻灯片显示，图像在预加载时到达的速度明显加快，从而极大地改善了用户体验。

预加载和<picture>？

若是您熟悉响应式图像，您可能会想知道“<picture>是什么？”。

Web性能工做组正在讨论添加srcset与和相同的预加载sizes，而不是添加<picture>元素，以解决“艺术方向”(art direction)用例。

为何这个用例被“忽略”了？

尽管也有解决该用例的方案，但仍有许多技术问题须要解决，这意味着这里的解决方案将具备极大的复杂性。最重要的是，彷佛大部分状况下，用例今天均可以解决，即便采用骇人听闻的方式（请参阅下文）。

鉴于此，Web Performance WG决定推出srcset而后看看是否须要一样的picture支持。

若是您确实想用<picture>实现预加载，则可使用如下技术做为解决方法。

鉴于如下状况：

<picture>
    <source src="small_cat.jpg" media="(max-width: 400px)">
    <source src="medium_cat.jpg" media="(max-width: 800px)">
    <img src="huge_cat.jpg">
</picture>

<picture>元素的逻辑（或图像源选择逻辑，要准确），将越过media所述的属性<source>元件，以便，找到相匹配的第一个，并使用附加的资源。

因为响应式预加载没有“顺序”或“首次匹配”的概念，所以须要将断点转换为如下内容：

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

小结

响应式图像预加载为咱们提供了新的使人兴奋的可能性来预加载响应式图像，这在之前只能使用hack方式才能实现的。它是对敏捷开发人员的重要新增功能，使咱们可以确保在须要时尽快将想要显示在用户面前的重要图像加载在那里。

原文连接： https://web.dev/preload-responsive-images/