自适应图片预加载介绍

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

前言

自适应图片的预加载为我们提供了新的性能优化思路，它是自适应图片和资源预加载的一个补充，可以使得图片资源在适应不同设备的同时，更快地被显示。

什么是图片自适应

响应式图片是一种在不同的屏幕尺寸和分辨率的设备上都能良好工作的图片，它能自动调节自身大小来适应设备的变化，同时，它也是响应式网页开发的基础之一。

使用响应式图片有什么好处呢？吃个栗子，假如我们使用笔记本或其他大尺寸屏幕设备浏览网页时，页面请求了一张1920 × 2880的图片，这在桌面端可以很好地显示出来，但是如果这个网页没有作响应式图片优化，那么当我们使用手机等移动端设备浏览时，页面仍然请求这张大图片，但是我们的设备因为自身屏幕大小无法完全显示这张图片，不仅图片加载慢而且还浪费流量。使用响应式图片优化后，设备会根据自身的分辨率去请求切合自身大小的图片。我们可以通过img标签的srcset属性去指定不同分辨率下的资源地址：

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

HTMLImageElement.srcset - Web API 接口参考 | MDN (mozilla.org)

srcset 的值是一个字符串，用来指定一个或多个图像候选地址，以 ,分割，每个候选地址将在特定条件下得以使用。候选地址包含图片 URL 和一个可选的宽度描述符和像素密度描述符，该候选地址用来在特定条件下替代原始地址成为 src 的属性。

w是宽度描述符，1w表示1px宽度。例如，450w表示450px宽的图像。宽度必须是正的、非零的整数，并且必须与要显示的图片实际宽度一致。

什么是图片预加载

这里指的是网页第一次加载时图片资源的预加载，以往图片等资源的加载是当解析到相应的标签时再去请求，可以通过<link rel="preload" ...>来预加载那些接下来文档解析要用到的资源，以此提高页面的加载速度。

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

as属性用来指定预加载的资源类型，常见的资源有：

audio: 音频文件
document: html文件，例如<iframe>中引用的url
fetch: 通过fetch或XHR请求访问的资源，例如ArrayBuffer或JSON文件。
font: 字体资源
image: 图片资源
script: js资源
style: css资源
track: WebVTT资源.
worker: web worker脚本
video: 视频资源，不过目前没有任何浏览器支持。

自适应图片预加载

就是上面2种功能的结合，上面2种功能在过去几年中已经得到了各大浏览器的支持，但是对于自适应图片资源的预加载却被忽略了，也就是说对于有多种分辨率选择的图片，我们把它定义到<img src="" srcset="..."/>中，浏览器仍然是解析到了这个标签采取请求资源。但是从Chrome73开始，我们可以通过<link>来预加载自适应图片。

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

在使用<link rel="preload">预加载图片的基础上，添加imagesrcset属性

参考

HTMLImageElement.srcset - Web API 接口参考 | MDN (mozilla.org)
<link>：外部资源链接元素 - HTML（超文本标记语言） | MDN (mozilla.org)
Link types: preload - HTML: HyperText Markup Language | MDN (mozilla.org)

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。