图像精灵的高度重要吗?
您认为拥有一个图像精灵有什么问题吗? 30px × 27,900px 的
图像几乎 90% 是空白。它只有 9.5kb,但在浏览器中运行这么大的东西似乎有些不对劲。
想法或想法?
Is there any problem you can think of having an image sprite that is
30px × 27,900px
the image is almost 90% white space. its only 9.5kb but something just doesn't seem right about having something this big running in a browser.
Thoughts or ideas?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
仅仅因为它在磁盘上的大小为 9.5Kb,并不意味着它不会在浏览器中占用大量内存,浏览器必须先解压缩图像才能显示。 (最终大小取决于所使用的压缩等)
因此,虽然它显然会花费额外的连接,但我建议如果可能的话将其分解为更小的图像。
Just because it's 9.5Kb on disk, doesn't mean that it won't occupy a large amount of memory in the browser, which has to decompress the image before it can be displayed. (The final size depends on the compression used, etc.)
As such, whilst it'll obviously cost an extra connection I'd recommend breaking this down into smaller images if at all possible.
FWIW,当存在大量偏移时(例如通过将其放置在左侧 10000px 来隐藏
DIV
),浏览器性能似乎不会降低。图像处理通常使用二维数组完成,因此可以非常轻松地访问图像的任何部分,而不需要线性遍历。因此,如果您指示 16x16 像素图标位于 5000、3000,渲染引擎可以很容易地找到这些像素。
当然,两个明显的问题是:
FWIW, Browser performance doesn't seem to degrade when there are massive offsets (such as hiding a
DIV
by putting it 10000px to the left).Image processing is often done with two dimensional arrays, and thus access to any part of the image can be done quite easily and without requiring linear traversal. So if you indicate that an 16x16 pixel icon is located at 5000, 3000 the rendering engine can locate those pixels quite easily.
Of course, the two obvious questions are: