CSS精灵图像的最佳做法 [英] Best practices for CSS sprite image

问题描述

我正在环顾四周寻找一些最佳实践和建议css图像精灵时的提示。
问题：
考虑一个有大量图片的网站：

1. size in one png ？


2. 可接受的精灵图片大小是多少？


3. 在一个精灵图片中有多少图片的建议吗？


4. 是否对如何在sprite图像中放置和对齐图像有什么区别？我只是在 http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340 其中提到（保持图片有组织，它会更可维护），但它是唯一的原因

如果它有帮助：
我使用罗盘sprites实用程序，将一个图像文件夹复制到一个 png 文件并为其创建一个 css 文件。

应该在一个png中分组和放置大小相同的图片吗？

/ strong>

虽然Michael对于按照用法对图像进行分组有一个很好的观点，但是你也可能想要记住，最佳sprite有尽可能少的空格。保存文件请求真棒，但您不想加载一堆未使用的像素。

什么是可接受的精灵图片大小？建议使用不同的sprite图像，而不是一个巨大的文件？！

想象一个网站有一个图标，按钮和其他图形元素。现在图像你把所有这些元素在一个精灵，因为，你知道，低量的请求和所有。

访问者进入页面，开始加载。文本出现，但您仍在等待Megasprite下载。根据文件大小和互联网连接，访问者必须等待潜在的长时间，网站的关键（导航）元素可用之前。

对于一个简单的网站单个精灵会做，但是当事情变得更精细，使用几个精灵可能是有益的。此外，把所有的图像放在一个sprite是一个痛苦的臀大肌，当涉及到维护（虽然自动化帮助很多）。

如何在sprite图片中放置和对齐图片有什么区别？ / p>

不是真的。有一些事情你应该记住，虽然。首先，你想要精灵尽可能紧凑;较少未使用的空间越好。但是，这可能迫使你在CSS中做荒谬的细致定位。如果你愿意为每个元素手动设置背景位置，这没有问题，但没有人会责怪你一点点作弊，并使用更容易使用的位置。

另一件事

您是否考虑过使用SVG精灵？小文件大小，完美平滑和清晰的每个分辨率。 CSS Tricks有很好的文章，这里和此处

I was looking around to find some best practice and hints when building css image sprite. The questions: Consider a site with lots of images:

1. Should I group and put images with approximately same size in one png?
2. What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!
3. Is there any recommendation for number of images in one sprite image ?!
4. Is it make any difference on how to put and align images in the sprite image? I just find a hint at http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340 which mentioned (keep images Organized, it will be more maintainable) but is it the only reason

If it helps: I use compass sprites utility, and it automatically convert a folder of images to one png file and creates a css file for it. The images aligned under each other automatically

解决方案

Should I group and put images with approximately same size in one png?

While Michael has a good point on grouping images by usage, you may also want to keep in mind that the optimal sprites have as little whitespace as possible. Saving file requests is awesome, but you do not want to load a bunch of unused pixels instead.

What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!

Imagine a website with a huuuuge collection of icons, buttons and other graphical elements. Now image you put all those elements in one sprite, because, you know, low amount of requests and all. The sprite is 5MB big.

A visitor enters the page, and loading begins. Text appears, but you are still waiting for Megasprite to download. Depending on the filesize and the internet connection, a visitor has to wait a potentially long time before crucial (navigational) elements of the site are usable.

For a simple site a single sprite will do, but when things get more elaborate, it might be beneficial to use a couple of sprites. Furthermore, putting all your images in one sprite is a pain in the gluteus maximus when it comes to maintenance (although automation helps a lot). All in all, huge sprites are bad sprites.

Is it make any difference on how to put and align images in the sprite image?

Not really. There are a few thing you should keep in mind though. First of all, you want the sprite to be as compact as possible; the less unused space the better. However, that may force you to do ridiculous meticulous positioning in CSS. If you're willing to set background-position for each element by hand that's no problem, but nobody will blame you for cheating a little bit and using positions that are easier to work with.

One more thing

Have you considered using SVG sprites? Small in file size, perfectly smooth and crisp at every resolution. CSS Tricks has excellent articles on it here and here

这篇关于CSS精灵图像的最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！