CSS图像的Sprite高度限制？ [英] Sprite height limitation for CSS images?

问题描述

我制作一个sprite，它的高度达到4000px。

I'm making a sprite and its reaching about 4000px in height. Is there a general size for maximum sprite height that is used within the graphics design community?

推荐答案

浏览器必须解压缩（和保持在内存中）整个图像，即使你只使用很少的精灵，即使大多数图像是空白/白色。
对于一个桌面客户端，你只错过了一个机会，通过使用太多的内存是一个好的公民（和浏览器已经吸收了大量的内存）。
对于一些移动客户端（例如，对于超过25k的解压缩后的文件，IPhone）可能更有问题，图像将不被缓存，因此可能更好的是具有2个文件<25k和两个HTTP请求比一个> 25k文件和单个请求从未缓存。

Browsers will have to decompress (and keep in memory) the whole image even if you only use very few sprites in it, and even if most of the image is blank/white. For a desktop client you've only missed an occasion to be a good citizen by using too much memory (and browser are already sucking a lot of memory). For some mobile client (eg. IPhone for files over 25k after degzipping), it can be more problematic, the image won't be cached at all, thus it may be better to have 2 files <25k and two HTTP request than one >25k file and a single request never cached.

最后一个问题，PNG压缩是基于行的，宽图像比高的（虽然在某些情况下太宽可能在理论上是不好的，因为每行只能有一个预测过滤器类型）。

Last problem, PNG compression is line-based, there is less overhead in having wide images than tall ones (though too wide could be theoretically bad in some case, since you can have only one prediction filter type per line).

哦，可能在同一图像中以太多不同的颜色结束，并且错过了适当的调色图像的机会。测试所有这些组合是乏味的，但如果可以，按照主色渐变来分组你的sprite是一个好的启发式（因为渐变/模糊需要许多不同的颜色）。

Oh and also, with too much spriting, you may end with way too much different colors in the same image, and miss the opportunity for decent paletted image. Testing all combinations of this is tedious, but if you can, grouping your sprites by main colors of gradients is a good heuristic (since gradients/blur needs many different colors).

这篇关于CSS图像的Sprite高度限制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！