我正在尝试找到将许多（例如100张）图像加载到网页上的最佳方法。一些图像是具有视差效果的大背景图像，其他图像是立方体上的图像（因此，立方体的所有侧面均由div制成）；我想知道什么是最好的方法，到目前为止，我有一些想法：
方法A1延迟加载所有出现的图像和背景图像。2对较小的图像使用精灵表。3压缩所有图像以获得最佳压缩效果，请使用Gzip。
方法B（实验）1为每个转换为base64的图像创建一个单独的样式表，并带有变量（例如：root {-boxImage1：url（“ data：image / jpeg; base64，/ 9j / 4AAQSkZJRgABA .....）2为CSS创建服务人员，因为它会变得很大3使用压缩来最小化css文件。4使用gzip从服务器传输。
方法c将图像作为二进制文件存储在数据库中（我担心这实际上会使它们变慢，因为它将搜索数据库而不是文件系统）。
这些方法中是否有值得做的，或者有没有一种我应该使用的更简单的方法？
我目前正在使用大量用户上传的图像进行PWA，我可以自信地说，使用您的方法A确实使我们的应用程序加载时间感到惊奇。
压缩上传时压缩的图像并将其转换为base64字符串会大大减小其大小，并与一次加载5张图像的延迟加载相结合，应用程序要快得多。
由于您的问题中有服务人员标签，所以我建议您至少预先缓存第一批图像，以更快地加载主页。