在 Web 页面中，图片是必不可少的元素之一，特别是在现代移动设备普及的情况下，响应式图片的需求愈加迫切。然而，响应式图片加载起来比较耗时，这也会影响用户的体验。因此，在这篇文章中，我们将探讨如何优化响应式图片加载体验的技巧。
响应式图片的加载策略
在讨论优化技巧之前，我们需要了解响应式图片的加载策略。通常情况下，有以下两种策略可供选择：
- 根据终端设备的宽度选择合适的图片。这种做法可以用响应式图片的 srcset 属性实现。该属性为不同视口大小指定不同的图片源，浏览器会根据当前视口的宽度选择最优的图片。例如：
<img src="default.jpg"
srcset="small.jpg 640w,
medium.jpg 1024w,
large.jpg 2048w"
sizes="(max-width: 800px) 100vw, 800px">- 延迟加载图片。这种做法可以使用一些第三方库，例如 LazyLoad，该库提供了可配置的 API 和事件处理程序，允许以异步方式加载图片。
在这里，我们不再讨论这两种方法的优缺点，因为我们假设您已经选择了适合您网站的方法。接下来，我们将介绍如何优化响应式图片的加载体验。
延迟加载图片
我们首先考虑延迟加载图片的优化策略。这种策略的好处是，当页面开始加载时，不会下载过多的图片，这会导致网页加载时间太长。相反，只有在用户到达页面上的图片时，该图片才被下载并显示，这显着减少了页面加载时间。
在本例中，我们使用Image()构造函数创建图像对象，并将图像的src属性设置为data-*属性中的值。然后，当图像加载完成时，我们再将其设为可见。
-- -------------------- ---- -------
---- -------------------- ------------
--------
--------------------------------------------- ---------- -
----- ------ - ----------------------------------------
-------- ----------------- -
----- --- - -----------------------------
-------- -
-------
-
------- - ----
--------------------------------
-
----- ---------- - -
---------- --
----------- ---- --- ----- ----
--
----- ----------- - --- ------------------------------ ------------ -- -
--------------------- -- -
------------------------- -
-------
- ---- -
---------------------------
------------------------------------
-
--
-- ------------
------------------ -- -
-------------------------
---
---
---------这段代码使用了一个交叉观察器（IntersectionObserver）来观察每个标记为“data-src”的图像元素。当图像进入视窗时，我们使用 preloadImage()函数将其加载。我们还删除了图像的 data-src 属性，这样下一次将无法延迟加载。
显式大小的图片
我们进一步优化图片加载的体验的方法是给图片指定显式大小。这样一来，浏览器可以在下载图像之前预留适当的空间。这种技术也可以称为可预测的布局。
例如，我们可以在CSS中添加以下规则：
img {
width: 100%;
height: auto;
display: block;
}由于图片的显示区域已知，浏览器现在可以在下载图像之前为其预留空间。这意味着，即使在相应式设计的情况下，页面元素的排列方式已经更改，图片元素的大小仍然是可预测的。这将增加可访问性并改善视觉体验。例如，您可以避免在页面的最上方显示图像，同样的，我们也可以避免调整整个页面的尺寸导致图像裂开或变形。
图片优化
为了进一步优化图片加载的体验，我们需要优化图片自身以确保它们下载和显示的时间更短。接下来是几个技巧：
压缩图片
可以使用诸如 TinyPNG 或 Compressor.io 这样的工具来压缩图像。这将减少文件大小，使图像更快地加载。
将图像格式转换为 WebP
WebP 是一种新的图像格式，它是由 Google 开发的一种开放源代码格式。WebP 通常可以减少文件大小达到原始文件的 80%，这意味着更快的加载速度。
<picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.png" type="image/png"> <img src="image.png"> </picture>
使用 srcset 属性
使用 srcset 以及 sizes属性，您可以针对不同的宽度及密度设备使用不同的图像。
<img src="small.jpg"
srcset="medium.jpg 1000w,
large.jpg 2000w"
sizes="(max-width: 500px) 100vw,
(max-width: 900px) 50vw,
30vw">结论
通过优化响应式图片的加载，我们可以显著地提高用户体验。为延迟加载，指定明确的大小，使用更好的图像格式以及使用 srcset 和 sizes 属性来选择最佳图像大小。这些技巧都可以轻松实现，但却可以使您的网站的图片加载更快，视觉效果更佳，并为您的用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcdd754471362601740c4d