您可以预加载自适应图片,以便系统加载您的图片
大大加快了速度
从 srcset
获取,然后再呈现 img
标记。
自适应图片概览
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
假设您在宽度为 300 像素的屏幕上浏览网页,而该网页 用于请求宽度为 1500 像素的图片。该网页浪费了你的大量移动设备 因为你的屏幕在这么高的分辨率下无法执行任何操作 理想情况下,浏览器会抓取一个版本 大于您的屏幕尺寸,例如 325 像素。这样可以确保 高分辨率图片,而不会浪费数据,并可让图片更快地加载。
自适应图片
让浏览器针对不同的设备提取不同的图片资源。如果您
使用图片 CDN,为每个 CDN 保存多个维度
并在 srcset
属性中进行指定。w
值用于告知
浏览器显示每个版本的宽度,以便针对 浏览器选择适合的版本
任何设备:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
预加载概览
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
借助预加载,您可以让浏览器 您需要尽快加载的关键资源 。这对于不容易使用 例如,样式表、背景图片或 从脚本加载的资源
<link rel="preload" as="image" href="important.png">
imagesrcset
和imagesizes
<link>
元素使用 imagesrcset
和 imagesizes
属性
预加载自适应图片。搭配使用
<link rel="preload">
,其中 srcset
和 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
。
使用场景
以下是预加载自适应图片的一些用例。
预加载动态注入的自适应图片
假设您正在将主打图片动态加载为幻灯片的一部分, 您知道首先显示哪张图片在这种情况下,您可能需要 显示该图片,而不是等到幻灯片演示脚本 加载它。
您可以在具有动态加载图库的网站上检查此问题:
- 打开此幻灯片演示演示 打开新的标签页
- 按
Control+Shift+J
(在 Mac 上,按Command+Option+J
)打开开发者工具。 - 点击网络标签页。
- 在 Throttling 下拉列表中,选择 Fast 3G。
- 取消选中停用缓存复选框。
- 重新加载页面。
在此处使用 preload
可让图片提前开始加载,
在浏览器需要显示时可以显示。
要了解预加载的不同之处,请检查 但预加载了第一张图片 执行第一个示例中的步骤
使用 image-set 预加载背景图片
如果您为不同屏幕密度准备了不同的背景图片,
使用 image-set
语法在 CSS 中指定这些内容。然后,浏览器
根据屏幕内容选择
DPR。
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
CSS 背景图片的问题在于浏览器
下载并处理网页的 <head>
中的所有 CSS 之后。
您可以在具有 自适应背景图片。
<ph type="x-smartling-placeholder">自适应图片预加载功能可让您更快速地加载这些图片。
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
省去 href
属性可确保
支持对 <link>
元素上的 imagesrcset
,但支持 中的 image-set
CSS 下载正确的来源。不过,这些预加载不会为他们带来任何好处
这种情况。
您可以检查上一个示例在使用预加载的自适应设备时的行为 自适应背景预加载演示中的背景图片。
<ph type="x-smartling-placeholder">预加载自适应图片的实际效果
从理论上讲,预加载自适应图片可以提高加载速度,但这有什么好处 该怎么办?
为了回答这个问题,我为一家演示版 PWA 商店创建了两个副本: 不会预加载图片的应用 以及预加载了其中一些组件的应用。 由于网站使用 JavaScript 延迟加载图片 预加载初始视口中显示的视口。
。 <ph type="x-smartling-placeholder">预加载和 <picture>
网络性能工作组正在讨论为
srcset
和 sizes
,但不包括 <picture>
元素,用于处理“艺术指导”
应用场景。
预加载 <picture>
仍有许多技术问题需要解决,
但在此期间,您可以尝试以下临时解决方法:
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_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)">
预加载和 type
<picture>
元素还支持与第一个 type
匹配,让您可以
提供不同的图片格式,以便浏览器可以选择第一种图片格式
支持的存储类型预加载不支持此用例。
对于使用类型匹配的网站,我们建议不要进行预加载,而改用
预加载扫描器会从
<picture>
和 <source>
元素。无论如何,这也是最佳做法
尤其是在使用提取优先级帮助您确定优先级时
相应图片。
对 Largest Contentful Paint (LCP) 的影响
由于图片可以是 Largest Contentful Paint (LCP) 候选项, 预加载这些代码可以提高您网站的 LCP。
无论您预加载的图片是否为自适应图片,预加载都可以 当图片资源在初始标记载荷中不可发现时,效果最佳。 同时,对在客户端上呈现标记的网站还有助于改进 LCP 与从服务器发送完整标记的网站相比。