多张图片的页面加载时间

Question

我正在尝试找到将许多（例如 100 个）图像加载到网页上的最佳方法。一些图像是用于视差效果的大背景图像，其他图像是立方体上的图像（因此立方体的所有侧面都是由 div 制成的）； 我想知道什么是最好的方法，到目前为止我有一些想法：

方法A 1 懒加载所有图片和背景图片出现时。 2 对较小的图像使用精灵表。 3 压缩所有图片以获得最佳压缩效果，请使用 Gzip。

方法 B（实验性） 1为每个转换为base64的图像创建一个单独的样式表（例如：root{--boxImage1:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABA .....) 2 为 css 创建一个服务工作者，因为它会变得相当大 3 使用压缩来最小化 css 文件。 4 使用gzip从服务器传输。

方法c 将图像以二进制形式存储在数据库中 （我担心这实际上会使它们变慢，因为它会搜索数据库而不是文件系统）。

这些方法中的任何一个都值得做吗？或者我应该使用更简单的方法吗？

Answer 1

我目前正在处理大量用户上传的图片的 PWA，我可以自信地说，使用您的方法 A 为我们的应用加载时间带来了奇迹。

在上传时压缩图片并将其转换为 base64 字符串会大大减小它们的大小，再加上一次延迟加载 5 张图片，应用程序的速度要快得多。

由于您的问题中有 service worker 标签，我还建议您至少预缓存初始批次的图像，以加快主页的加载速度。