自适应图片预加载介绍-一一网

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

前言

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

什么是图片自适应

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

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

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

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属性

参考

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Subscribe-Me Lite管理访问漏洞

万字长文带你了解最常用的开源 Squid 代理服务器｜2021 年中总结

SpringCloud入门（7）Bus

Ipswitch IMail服务器多个缓冲区溢出服务拒绝漏洞

多款Adobe产品权限许可和访问控制漏洞

排查dubbo接口重复注销问题，我发现了一个巧妙的设计

自适应图片预加载介绍

前言

什么是图片自适应

什么是图片预加载

自适应图片预加载

参考