为什么要使用sprite sheet而不是单个图像？ [英] Why use a sprite sheet rather than individual images?
问题描述
我在一些网站上注意到的一件事是，他们使用一个包含大量小图像的BIIIIIIIG图像，然后使用CSS background-position 定义每个图像的坐标
不使用大精灵表格
- 需要加载大图片才能只显示一个小图片
- 如果一个图片改变（或者生成）每个图片都有一个类，
- 需要一个
< div>具有适当的样式（display：inline-block; width：32px; height：32px; background-image：url（'spritesheet.png'）;）
现在我不记得了。
使用大精灵表的好处
- ...还没有。
事实上，在这里接近亲的唯一的事情是，当我将工作表剪切成单独的图像，结果文件夹占用磁盘上的3Mb （由于每个文件小于100字节，我的分配大小为4k）。实际的文件本身小于工作表和CSS大小的一半，因此 即使有HTTP请求的开销，也可以节省大量空间。
>基本上，我的问题是：任何人都有任何专业人士使用大张单张图片。
目的是减少HTTP请求。
最近我有一个网站有很多透明渐变（白色到反式，灰色到反式）和一些黑色和白色透明图像。通过把它们全部放在一个sprite和减少png的颜色到8我可以得到sprite比原始图像文件大小更小（只是...约0.5％节省）。通过将HTTP请求数从10减少到1，尽管意味着网站加载速度更快（如果测量从第一个连接到所有数据传输的时间）。
我同意，有可能混乱的事情，最终得到一个更大的精灵超过需要，特别是如果你不使用PNG压缩。
注意这之后两年 - 如果你使用SSL，你应该看看SPDY（我注意到在另外两年将提到HTTP 2.0的SPDY！）。 SPDY否定精灵的好处。
One thing I have noticed on some sites is that they use one BIIIIIIIG image containing lots of little images, then use CSS background-position to define the coordinates of each image, rather than use individual images.
Here's where I'm at:
Cons for using big sprite sheet
- Need to load a large image to just display even one small image
- Need to write (or generate) a long stylesheet with a class for each image
- Cluttering CSS with lots of class definitions may impact performance
- If one image changes (or another is added), cache problems may be encountered both on the image and the CSS associated with it
- Requires a
<div>with proper styling (display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');) which adds yet another class to the mix. - Many more that I can't remember now I'm typing them.
Pros for using big sprite sheet
- ... Erm... none yet.
In fact the only thing that comes close to a pro here is that when I cut up the sheet into individual images the resulting folder took up 3Mb on disk (due to each file being <100 bytes and my allocation size being 4k). The actual files themselves come out less than half the size of the sheet and CSS, so even with the overhead of an HTTP request there is a significant space saving.
Basically, my question is: Does anyone have ANY pros for using a big sheet over individual images?
The aim is to reduce HTTP requests. In addition, sometimes the compressed sprite will weigh less than the original images.
Recently I had a website with a lot of transparent gradients (white to trans, grey to trans) and some black and white on transparent images. By putting them all in a sprite and reducing the colors in the png to 8 I could get the sprite to be smaller in filesize than the original images (just... it was about a 0.5% saving). By reducing the number of HTTP requests from 10 to 1 though meant the site loaded faster (if measuring time from first connection to all data transferred).
In that case, a measurable increase was found.
I agree though that it's possible to mess things up and to end up with a larger sprite than needed, especially if you aren't using PNG compression.
Note two years after posting this – if you are using SSL, you should look into SPDY (my note in a further two years will mention HTTP 2.0 instead of SPDY!). SPDY negates the benefits of spriting.
这篇关于为什么要使用sprite sheet而不是单个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
