CSS 精灵的最快图像布局

Fastest image layout for CSS sprites

我很清楚使用 CSS 精灵图而不是过多的小图片单独请求的好处。我想知道的是大图像的特定布局是否比另一个更快。例如,假设我有 6 张足球运动员的照片。我想使用 CSS 精灵。就使用 CSS 精灵获得最大可能的好处而言,以下四个版本中哪个版本最快?

** 版本 1 **

** 版本 2 **

** 版本 3 **

** 版本 4 **

我刚才测试过,性能方面的差异可以忽略不计。所以你可以做最适合你的事情。

文件的大小差异很小,css中的背景偏移对速度没有影响。如果您想要性能,请确保正确缓存它们并对其进行压缩。

我建议您根据您喜欢的响应样式对其进行测试,因为这往往会有点不稳定。