在现代 Web 开发中，响应式设计已经成为了一个必要的技术。响应式设计使得我们的网站可以在不同的设备上展现出不同的布局和样式，这对于提高用户的体验非常有帮助。但是，响应式设计的图片优化是一个不容忽视的问题，因为在不同设备上加载不同大小的图片必然会影响网站的性能。针对这个问题，我们可以采用以下的策略来为响应式设计的图片进行优化。
策略一：根据设备加载适当大小的图片
首先，我们应该根据设备的屏幕分辨率来加载适当大小的图片。这可以通过使用 srcset 和 sizes 属性来实现。
<img src="small.jpg"
srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"
sizes="(max-width: 768px) 100vw, 50vw">在这个示例中，我们使用了三张图片，分别是适用于小屏幕设备的 small.jpg、中等屏幕设备的 medium.jpg 和大型屏幕设备的 large.jpg。其中，srcset 属性指定了每张图片的大小比例，也就是说 medium.jpg 的大小是 small.jpg 的 2 倍，large.jpg 的大小是 small.jpg 的 3 倍。而 sizes 属性则指定了图片在不同设备上的显示 size。
策略二：采用 WebP 图片格式
WebP 是谷歌推出的一种新的图片格式，它采用先进的压缩算法，可以将 JPEG 和 PNG 格式的图片压缩成更小的尺寸，从而提升网站的加载速度。
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="A flower">
</picture>在这个例子中，我们使用了 <picture> 和 <source> 标签来实现 WebP 图片的加载。先声明一个 type="image/webp" 的 <source> 标签，它会告诉浏览器该图片是 WebP 格式的。这样，如果浏览器支持 WebP，它就会加载 image.webp，否则它就会加载 image.jpg。这样，我们只需提供一种图片格式，就可以满足不同设备的需求，从而提升网站性能。
策略三：使用延迟加载
延迟加载是一种将图片的加载推迟到它们滚动到视口之内的技术。这种技术可以帮助我们缩短网站的加载时间，从而提升用户的等待体验。这里我们可以使用 Intersection Observer API 来实现：
-- -------------------- ---- -------
----- -------- - --- ------------------------------ --------- -- -
----------------------- -- -
-- ---------------------- -
----- --------- - -------------
------------- - ----------------------
-----------------------------------
------------------------------
-
---
---
----- ------ - -----------------------------------
---------------------- -- -
------------------------
---这段代码中，我们先定义了一个 IntersectionObserver 对象来观察我们网页中的图片。然后，我们使用 document.querySelectorAll(".lazy") 来选中所有需要延迟加载的图片，然后给它们添加上我们的 IntersectionObserver。当图片进入到视口中时，它们的 data-src 属性就会被替换成 src 属性，从而实现图片的加载。
结论
通过以上三种策略，我们可以为响应式设计的图片进行优化，从而提升网站的性能和用户体验。在实际项目中，我们应该结合自己网站的实际情况来选择最适合自己的图片优化策略。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a76a9d91dce0dc881e82f