在现代 Web 应用程序中，图片不仅是页面内容的重要组成部分，更是影响应用性能和用户体验的关键因素之一。尤其是在 PWA（渐进式 Web 应用）中，优化图片是提升应用性能、缩短加载时间和增强用户体验的重要手段。本文将分享几个具有指导意义的 PWA 图片优化最佳实践。
1. 使用 WebP 格式
WebP 是一种由 Google 推出的图片格式，它压缩率高、画质好、支持有损和无损压缩，并且比 PNG、JPEG 等格式更小。因此，使用 WebP 格式可以使图片更快地加载，提升应用性能。目前大部分主流浏览器都已经支持 WebP，需求也越来越高，了解一下会带来意外的好处。
<picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image/jpeg"> <img src="image.jpg" alt="Example"> </picture>
在这个示例中，使用 picture 元素展示图片，source 元素中指定了 WebP 和 JPEG 两个不同格式的图片，浏览器会自动根据支持的格式选择合适的图片。如以上代码展现图片的时候，会优先选择 srcset 中的 WebP 格式图片，如果浏览器不支持 WebP，则使用 srcset 中的 JPEG 格式图片。
2. 压缩图片
在制作和处理图片时，我们可以通过优化图片大小和压缩率，减少图片文件大小从而提高应用性能。许多在线工具可以用来压缩图片，如 TinyPNG、Kraken.io 等。除了外部工具，也可以使用之前发布的一些 npm 库压缩 PNG、JPEG、WebP 等多种格式的图片。
import tinify from 'tinify';
tinify.key = 'your_tinify_key';
tinify.fromFile('path/to/image').toFile('path/to/image');在这个示例中，我们使用 tinify 库压缩指定路径的图片文件。在试用公共 API 的时候记得要设置秘钥（每个秘钥每个月只有 500 次的免费次数，记得精打细算使用。）
3. 懒加载图片
在 PWA 中，懒加载图片是提升应用性能和降低流量消耗的最佳选择。因为一些图片上的时机可能是非常难以判断和预测的，如果一次性加载所有图片，会增加不必要的网络请求和浪费用户流量。因此，懒加载图片可以只在用户需要时加载，从而降低网页下载时间和大小。
-- -------------------- ---- -------
--------- -----
------
------
----------- ---- --------------
-------
--- -
------- -----
------ -----
----------- ------
-
---------------- -
-------- -----
---------------- -------
------------ -------
------- ------
----------------- -----
-
--------
-------
------
---- ------------------------
---- ------------------------ ------------ ----- ---
------
---- ------------------------
---- ------------------------ ------------ ----- ---
------
---- ------------------------
---- ------------------------ ------------ ----- ---
------
--------
----- ------ - ---------------------------------
-------- ------------- -
---------------------- -- -
-- ---------------------------------- -- ------------------- -
------------------------- -------------------------------- -- ------
------------ - -- -- -
---------------------------------- -- -------
--
-
---
-
--------------------------------- -------------
--------------
---------
-------
-------这个示例中，在 HTML 中使用 data-src 属性指定了图片路径，并将 src 属性重置为空字符串，然后添加了一个 img-placeholder 类似于占位载体的模块等待懒加载。然后，JS 检测窗口是否进入视域，如果进入，则将 data-src 指定的图片路径赋值给 src 属性，加载真实图片并在加载完成后移除 data-src。
4. 缓存图片
在 PWA 中，使用 Service Worker 可以将一些资源缓存在本地，以便离线访问、加速响应等。同样地，在 PWA 中，缓存图片是提升应用性能、减少网络请求和提升用户体验的一种有效方式。
-- -------------------- ---- -------
-------------------------------- ------- -- -
----------------
------------------------------------ -- -
------ --------------
-----------------
-----------------
----------------
---
--
--
---
------------------------------ ------- -- -
------------------------------------------------------------- -- -
------ -------- -- ---------------------
----
---在这个示例中，我们在 Service Worker 中指定了需要缓存的图片 URL，然后在 install 事件中使用 cache.addAll 方法将所有资源缓存到本地，最后在 fetch 事件中检查缓存是否存在，存在返回缓存，否则则发起新的网络请求。
5. 响应式图片
在 PWA 中，使用响应式图片可以优化各种尺寸的设备，提供最佳的图片体验。使用 srcset 属性可以给浏览器提供多个不同的图片，并根据设备屏幕大小选择最合适的图片，同时在同一时间点减少不必要的网络传输量。
<img src="image-small.jpg"
srcset="image-medium.jpg 1000w,
image-large.jpg 2000w"
sizes="(max-width: 768px) 100vw, 50vw" alt="Example">在这个示例中，我们在 img 标签中定义了一个小图片的路径，然后在 srcset 中定义了两个不同尺寸的图片，分别用户大屏幕和中等屏幕。最后，在 sizes 属性中定义了以 768px 为界限的屏幕宽度，根据屏幕的不同大小，自动选择合适的图片。
总结
以上是在 PWA 中优化图片的最佳实践，希望以上内容能对大家学习前端技术，提升应用性能和用户体验有所帮助。在编写 PWA 应用时，合理地使用上述技巧可以为您带来意想不到的好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64633b1e968c7c53b043e7e3