关于CSS spritesheet的问题(有些关于缓存)

时间:2011-04-04 17:50:21

标签: css image caching sprite css-sprites

1)首先,我应该以某种方式在我的spritesheet中订购图像吗?(例如从最大到最小的图像,或者页面顶部出现在页面底部的图像?)

2)假设我有一张包含图像之前和之后的css spritesheet。就像图像显示了一头牛,但是当图像悬停时,它显示出一头带翅膀的牛。那时不使用css spritesheet符合我的最佳利益吗? css是否一次加载我的spritesheet中的所有图片?

3)spcuesheet在缓存方面是否更好?不相关,但浏览器缓存什么需要什么?我的意思是,如果只是在单页浏览之后,也许它不值得。

4)最后,我想开一个论坛。我对论坛还不了解,但我计划尽快开始。我想的是只有40个图像的默认设置,人们只能选择它们作为自己的头像。我是否应该为这些图像制作一个spritesheet(如果可能的话)?

我知道这是很多问题,所以请回答你所知道的任何问题。谢谢!

3 个答案:

答案 0 :(得分:2)

'spritesheet'只是一张大图。所以......

1)无所谓。

2)同样,它只是一个图像。如果不是所有用户都想要激活'之后'功能,那么你可以为他们节省一些带宽,使得后来成为一个单独的精灵。如果大多数人都想使用after功能,那么你可以通过使它成为一个精灵来节省带宽。 (虽然请注意,如果我们说的是非常大的图像,那么你想要坚持一个精灵的数量就会有实际限制。例如,没有人会等到下载1mb文件。)

3)同样,精灵只是一个图像。它具有与任何图像相同的缓存优点/缺点。

4)与1精灵相比,服务器上的40次点击很多。因此,仅仅基于此,精灵将是有用的。但是如果你很少在一个页面上获得超过10个左右的那些头像,那么精灵就会有害,因为它正在加载这么大的文件。

答案 1 :(得分:1)

就图像的排序而言,我有一个精灵文件用于我正在处理的网站,其中包含添加了版本号的各种浏览器徽标。因此,文件中的视觉信息会有很多重复。

我很惊讶地发现重复的方向可能对保存为PNG时我可以为图像实现的文件大小产生很大影响。当我在列中有类似的徽标时,文件大约为120 KB;当我把它们排成行时,它出现在41 KB。

一旦项目现场直播,我将发布实际图片。在精灵文件中重复这样的类似图像可能是非常罕见的;通常你的图像会有所不同,或者你只是反复使用相同的图像。 (实际上,我可能最终会重构我的精灵,以便不同的位在他们自己的文件中。)但我没有意识到这些所谓的相似图像可以编码在两个大小不同的文件中,纯粹基于几何排列图像文件中的元素。

答案 2 :(得分:0)

1)不确定,但我认为这不重要,如果有的话。

2)最好的方法是使用CSS图像翻转。

3)Spritesheets更适合缓存,因为它只是一个图像,而不是Web服务器必须连接,发送图像,断开连接,再次发送,发送另一个图像,断开连接等...

4)我只会使用单张图片。在那种情况下,没有理由使用spritesheet。