精灵图像设计/策略
我昨天提出了这个问题： 背景重复平铺在精灵图像内的 bgImage？< /a>
因此，只要不可能重复精灵图像内的背景，
创建精灵时最好的*策略是什么？
我的意思是，选择：
- 我应该尝试将所有图像放入一个精灵中吗？ （包括可以重复的大背景）
- 一个图标精灵。背景是一部分吗？
- 其他
*）当我说最好时，我的意思是最容易访问/可用/性能最高
I made this question yesterday: background repeat tiled bgImage inside an sprite image?
So as long is not posible to repeat backgrounds wich are inside of a sprite image,
What is the best* strategy when creating the sprite?
i mean, choosing:
- should i try to put ALL the images in one sprite? (including big backgrounds that could be repeated)
- One sprite for icons. Backgrounds a part?
- other
*) when i say best i mean with the most accesible/usable/perfomance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我总是创建
三个精灵表。第一个；适用于那些
不重复的图像，例如箭头、按钮等。第二个；适用于那些
重复y-的图像轴。第三个；对于那些
重复x轴的图像。或者
如果设计中没有重复的图像，则不需要其他
spritesheetx 轴 sprite http://imageshack.us/photo/my-images/401/xaxissprites.png/
y 轴精灵 http://imageshack.us/photo/my-images/28/yaxissprites.jpg/
i am always create
three sprite sheets.first; for those images which is
not repeatingat all like arrow, button etc.second; for those images which
repeating y-axis.third; for those images which
repeating x-axis.or
If there is no repeating images in the design then there is no need for other to
sprite sheetssprite for x-axis http://imageshack.us/photo/my-images/401/xaxissprites.png/
sprite for y-axis http://imageshack.us/photo/my-images/28/yaxissprites.jpg/
精灵老了！您可以使用更新的技术。但是当你会使用精灵时。我会为图标制作一个精灵，为其他图像制作一个精灵。
但您也可以使用数据 uri 的/base64 编码来处理图像。这是图像的新技术。以及精灵的更换。有了 sprite，你就有了 http 请求。使用数据 uri，您就没有 http 请求。它让您的网站更快！而网站的速度是更重要的事情。
这里有一篇关于的文章点击这里 在这里您可以创建数据 uri。 此处。但 ie7 不支持数据 uri。对于 ie7，您可以回退到单个图像。
使用数据 uri 并忘记精灵。 Sprites 是 2011 年的技术。Data URI 完全是 2012 年的技术！ :-)
Sprites are old! There are newer techniques that you can use. But when you will used sprites. I would make one sprite for icons and one sprites for other images.
But you can also used data uri's / base64 encoding for images. This is the new technique for image. And the replacement of sprites. With sprites, you have http requests. With data uri's you have no http requests. It make you website faster! And the speed of the website is a more important thing.
Here you have a article about Click here And here you can create the data uri's. Here. But data uri's are not supported in ie7. For ie7 you can make a fallback to single images.
Used the data uri's and forget the sprites. Sprites is a technique in 2011. Data URIs is totally 2012! :-)
在我看来，必须首先为您的用户定义精灵。如果您的用户根据权限看到不同的页面，则必须按权限划分精灵。其次是背景和图标、按钮分组。每个图像文件中都有一个标头。在标题中，它们包含大小、颜色图和任何其他附加信息。标头大多增加文件1KB - 3KB 平均。所以我们可以认为图像越少，数据传输就越少。总而言之，我建议您使用一个精灵。
其他认为是实现此目的的工具。您可以使用精灵表工具来生成精灵并编写 CSS。这些工具生成最小图像尺寸（使用一些算法对精灵进行排序）并根据精灵表上的精灵位置自动生成 CSS 文件。如果您使用的是 Mac，则可以使用 Sprite Master 来实现此目的。
In my opinion, sprite must be defined for your users first. If your users are seeing different pages for their authority, you must divide your sprites by authority. Second is the background and icon, button grouping. Every image file has a header in it. In header, they contain size, colormap and any other additional info. Headers are mostly increases the file 1KB - 3KB average. So we can think that less image, less data transfer. In summary, I suggest you to use one sprite.
Other think is the tools for this. You can use sprite sheet tools for generating your sprites and writing your CSS. These tools are generating minimum image size (using some algorithms to order sprites) and automatically generate CSS file depending on the sprite positions on the sprite sheet. If you are on mac, you can use Sprite Master for this.