精灵 VS 大图
Sprites VS Larger Images
在我的网站上进行一些性能测试时，我注意到主页上的 3 张图片每张图片加载时间为 1 秒。
这些图片是 3 张 1000 x 1000 高清图片，仅在主页上加载。
我正在考虑将这 3 个变成 sprite sheet 以减少网站的加载时间。
你认为这是个好主意吗？我知道 sprite 可以很好地处理小图像，但我从未尝试过使用 3 个 1000 像素的高清图像。
使用 sprite 还是让它们单独加载更好？
网上找了几个类似的问题，没能得出结论。
问得好，sprites解决的问题主要是图片多而且小的时候。因此，不是向服务器发出 100 个请求，而是向服务器发出一个请求。
使用大图像时，您不会从这个概念中获益太多。同样对于较大的图像，最好加载第一张图像并且您可以将其呈现给用户并同时加载其他图像。
第三个选项是渲染一些 20x20 像素 JPG 文件的小缩略图（通常 <~10KB 大小），然后将它们拉伸到与大文件相同的大小。这会导致一些模糊的图像，但图像上的内容是可以理解的。现在，当加载较大的图像时，您将替换较小的图像。这需要额外的 JavaScript 执行。
在我的网站上进行一些性能测试时，我注意到主页上的 3 张图片每张图片加载时间为 1 秒。
这些图片是 3 张 1000 x 1000 高清图片，仅在主页上加载。
我正在考虑将这 3 个变成 sprite sheet 以减少网站的加载时间。
你认为这是个好主意吗？我知道 sprite 可以很好地处理小图像，但我从未尝试过使用 3 个 1000 像素的高清图像。
使用 sprite 还是让它们单独加载更好？
网上找了几个类似的问题，没能得出结论。
问得好，sprites解决的问题主要是图片多而且小的时候。因此，不是向服务器发出 100 个请求，而是向服务器发出一个请求。
使用大图像时，您不会从这个概念中获益太多。同样对于较大的图像，最好加载第一张图像并且您可以将其呈现给用户并同时加载其他图像。
第三个选项是渲染一些 20x20 像素 JPG 文件的小缩略图（通常 <~10KB 大小），然后将它们拉伸到与大文件相同的大小。这会导致一些模糊的图像，但图像上的内容是可以理解的。现在，当加载较大的图像时，您将替换较小的图像。这需要额外的 JavaScript 执行。