多个图像的页面加载时间
Page load time for multiple images
我正在尝试找到将许多（比如 100 张）图像加载到网页上的最佳方法。有些图像是用于视差效果的大背景图像，其他图像是立方体上的图像（因此立方体的所有面都由 div 制成）；
我想知道什么是最好的方法，到目前为止我有一些想法：
方法一
1 出现时延迟加载所有图像和背景图像。
2 为较小的图像使用 sprite sheet。
3 压缩所有图像以获得最佳压缩效果，使用 Gzip。
方法 B（实验）
1 创建一个单独的样式 sheet，其中包含转换为 base64 的每个图像的变量（例如：root{--boxImage1:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABA.. ...）
2 为 css 创建一个服务工作者，因为它会变得相当大
3 使用压缩压缩 css 文件。
4 使用gzip 从服务器传输。
方法c
将图像以二进制形式存储在数据库中
（我担心这实际上会使它们变慢，因为它会搜索数据库而不是文件系统）。
这些方法中是否有任何值得做的，或者有没有我应该使用的更简单的方法？
我目前正在处理大量用户上传图片的 PWA，我可以自信地说，使用您的方法 A 对我们的应用加载时间产生了奇迹。
在上传时压缩图像并将它们转换为 base64 字符串大大减小了它们的大小，并结合一次延迟加载 5 张图像，应用程序速度更快。
由于您的问题中有 service worker 标签，我还建议至少预缓存初始批次的图像，以便更快地加载您的主页。
我正在尝试找到将许多（比如 100 张）图像加载到网页上的最佳方法。有些图像是用于视差效果的大背景图像，其他图像是立方体上的图像（因此立方体的所有面都由 div 制成）； 我想知道什么是最好的方法，到目前为止我有一些想法：
方法一 1 出现时延迟加载所有图像和背景图像。 2 为较小的图像使用 sprite sheet。 3 压缩所有图像以获得最佳压缩效果，使用 Gzip。
方法 B（实验） 1 创建一个单独的样式 sheet，其中包含转换为 base64 的每个图像的变量（例如：root{--boxImage1:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABA.. ...） 2 为 css 创建一个服务工作者，因为它会变得相当大 3 使用压缩压缩 css 文件。 4 使用gzip 从服务器传输。
方法c 将图像以二进制形式存储在数据库中 （我担心这实际上会使它们变慢，因为它会搜索数据库而不是文件系统）。
这些方法中是否有任何值得做的，或者有没有我应该使用的更简单的方法？
我目前正在处理大量用户上传图片的 PWA，我可以自信地说，使用您的方法 A 对我们的应用加载时间产生了奇迹。
在上传时压缩图像并将它们转换为 base64 字符串大大减小了它们的大小，并结合一次延迟加载 5 张图像，应用程序速度更快。
由于您的问题中有 service worker 标签，我还建议至少预缓存初始批次的图像，以便更快地加载您的主页。