如何制作精灵
我使用了在线 srpite 服务 http://spritegen.website-performance.org/ 但我想知道如何自己制作它们。
如何保存应该很小的图像，但在我的网站上使用时却显示出正常大小？
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
精灵并不是要使图像本身变小，而是通过将多个图像打包到一个图像中来减小文件大小。
看看雅虎的图标精灵。请注意，他们将所有部分图标垂直堆叠在一张大图像中。然后，他们使用 CSS 来定位背景，使其仅显示精灵图像的一个小窗口，从而只为您提供图标。
最后，由你决定如何安排你的精灵。查看 亚马逊的精灵。
不管怎样，希望这能帮助您更好地了解精灵的概念。
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
来自您链接的网站：
因此，没有什么神奇之处：您只需使用您最喜欢的图形工具将所有图片打包成一个巨大的图像，并将它们作为 CSS 背景插入即可。看看 Google 的这个 CSS Sprite：
From the very site you link:
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google: