使用响应图像减少页面加载时间_极简慕枫

图像对于网站上的用户体验很重要，而向小型设备的转变意味着开发人员面临新的挑战，无论屏幕大小如何，都能确保快速加载图像。

图像可以构成商店页面重量的最大部分，智能手机或平板电脑用户可能会因加载速度慢而变得容易受挫。当页面需要很长时间才能加载时，客户会放弃，而Compuware的研究表明，对于页面加载延迟，已经放弃了检查 - 这是收入损失的明显迹象。

减少这些页面加载延迟可以显着提高商家的转化率并建立品牌信任度。通过允许较小的图像加载到较小的屏幕上，您可以创建主题，从而增加商家的转化次数并改善客户的用户体验。杭州网页定制

本文将向您展示如何使用响应式图像来优化自定义主题，以便在任何大小的屏幕上快速加载。

为什么图像对客户和客户很重要

在许多其他情况下，图像加载时间已经证明对移动用户的体验有重大影响。Etsy的一个团队发现，当他们向一个页面添加160KB的图像时，移动设备的跳出率提高了12％。HTTP档案的一项  研究表明，图像占据了平均网页的绝大部分。

引入响应式图像以减轻较小尺寸屏幕上的加载时间，并且使用srcset在现代浏览器中本机支持，这允许明确指定可用图像。

主题开发人员考虑将图像响应策略视为一种面向未来的形式也很重要，因为商家需要支持不断增长的各种屏幕尺寸，分辨率和密度。

为减少商家的努力并允许更多地控制图像在不同屏幕尺寸上的显示方式，Shopify 今年早些时候在Unite推出了新的图像属性。主题开发人员现在可以根据不同的属性创建不同的规则image object。

已经引入的新属性是image.height，image.width和image.aspect_ratio。这些属性可与常规浏览器图像属性srcset一起使用，以根据显示的屏幕大小加载特定大小的图像。对该srcset属性非常有用的是它允许您定义浏览器可以在其间选择的一组图像。

这意味着可以在较小的屏幕上加载较小版本的图像，从而减少浏览器加载页面所花费的时间。

Shopify用于为图像指定大小的“旧”方法是命名图像过滤器。例如，grande对于图像，将显示最高600 x 600像素的图像，并将large以最高480 x 480像素显示图像。虽然这些URL参数仍然有效，并且可以在现有主题上使用，但它们已被弃用。数字参数可以为图像的宽度和高度指定精确的像素尺寸。

通过在自定义主题上创建一组数字参数，根据您认为图像在不同大小的屏幕上的显示方式，您可以建立响应更快的系统。一旦图像加载到屏幕上，浏览器将根据您设置的数字参数范围自动调整图像大小。

这意味着您无需上传不同大小的图像的多个版本，因为图像会自动调整大小。现在，主题开发人员可以针对主题的最佳图像大小做出更深思熟虑的决策

这意味着您无需上传不同大小的图像的多个版本，因为图像会自动调整大小。

上传图像后，主题将根据预定义的规则选择要显示的图像，以便优化速度和美学。效果是主题开发人员可以为客户提供更强大的服务，商家可以添加大图像而不必担心影响移动性能。

杭州网页定制

图像响应如何工作 - 使用叙事的一个例子

第一Shopify内置的主题，使以这种方式使用响应图像的叙事，在今年4月发布。主页上的高分辨率全屏图像对于从事Narrative工作的开发人员来说是一个巨大的优先事项，但这也需要在较小规模上有意义。

在较小的屏幕上进行响应更快的英雄幻灯片放映意味着要设置一系列不同宽度的选项。加载图像时，浏览器将选择正确的宽度，具体取决于屏幕大小和可用范围。您可以在下面的第4行看到开发团队选择的图像宽度范围：

在这种情况下，我们可以看到最小540像素的图像尺寸范围，最大图像宽度为2048像素。有九种不同的选择，可容纳多种屏幕尺寸。无论上下文如何，这都可确保显示最佳版本的图像。值得注意的是，最大图像尺寸为4472像素x 4472像素。

我们还可以在上面的代码片段的顶部两行看到Lazysizes插件与该src属性结合使用。这个插件的作用是临时预加载一个小图像作为占位符，而正确的图像是加载。这样可以减少幻灯片显示时显示空白区域的任何时间。

Lazysizes还负责像素密度。许多现代手机（如具有视网膜屏幕的手机）的像素密度大于1。这意味着屏幕尺寸名义上可能是500像素宽，但如果像素密度为2，则加载的最佳图像将是1,000像素宽。

当Narrative的主页加载时，使用上述配置，浏览器将执行以下操作：

1. 为幻灯片放映预加载低分辨率图像，几乎像占位符一样。

2. 检查设备/屏幕宽度。

3. 加载data-widths列表中引用的与屏幕大小最匹配的图像。

我们可以通过增加响应式屏幕大小并监控正在加载的文件来测试Narrative是否使用Chrome的开发工具加载正确的图像大小。

当我们在右侧的Dev Tools控制台中查看活动时，我们可以在上面的动画中看到这一点。在这里，我在网络选项卡中，并按图像过滤，以便我只看到正在加载的页面上的图像。

当页面在开头加载时，最小的图像由lazysizes显示，然后加载该屏幕大小的特定图像大小。

随着屏幕尺寸的增加，加载了更大的图像，您可以看到它们到达控制台的底部。Google的文档提供了有关在Google Dev Tools中使用网络分析参考的更多详细信息。

您可能也喜欢： 构建叙事：Shopify的故事新主题。

向前推进响应式图像

现在这些新属性可用，主题开发人员可以使用它们来生成响应其现有主题的图像。随着Narrative的推出，Shopify的主题开发人员现在使用这些工具来更新我们自己的主题，例如Debut，Brooklyn等。

例如，Debut以前在博客页面上以345像素宽的固定大小显示图像：

现在，我们可以根据图像容器的大小设置浏览器将选择的一系列不同大小：

同样，您可以看到lazysizes插件在加载正确图像之前预先加载较小的图像，具体取决于屏幕的大小。

审核图像

当您在自定义主题中构建响应时，首先应审核主题以查看响应式图像的有效位置，并避免过度复杂。在未显示非常大的图像的页面上，您可以保留图像的固定尺寸。

一个例子可能是图片不是很大的购物车页面。只有在您看到大型图像时才需要响应式图像，例如幻灯片。在图像响应的位置和时间做出明智的决策将有助于您开发最简化的主题。

杭州网页定制

进一步学习

对于那些有兴趣学习更多关于使用响应式图像的人来说，这里有一个很好的资源列表：对于那些感兴趣的人。

• 我们自己的博客详细介绍了Liquid最近的其他一些更新。

• W3学校提供了更多使用srcset的背景知识。

• Kissmetrics博客概述了有关加载时间的一些问题。

• 另一篇深刻的文章描述了响应式图像的挑战。

保持敏感

我们在上面看到的示例显示了Shopify主题如何实现响应式图像。在您自己的自定义主题上实施类似的方法将改善最终客户的用户体验，无论他们使用哪种类型的设备。

Liquid的新增功能将为您提供更好的商店，但它不是“一刀切”的解决方案。通过仔细查看每个页面并考虑图像应如何在较小的屏幕上显示，您可以开发自己的响应式图像策略。

杭州网页定制