Ali*_*ahi 11 html css image css-sprites css3
在构建css图像精灵时,我正在寻找一些最佳实践和提示.问题:考虑一个包含大量图像的网站:
png吗？如果它有帮助:我使用罗盘精灵实用程序,它会自动将图像文件夹转换为一个png文件并css为其创建一个文件.图像自动对齐
小智 7
我应该在一个png中对大小相同的图像进行分组和放置吗？
虽然Michael对使用图像进行分组有一个很好的观点,但您可能还需要记住,最佳精灵尽可能少的空白.保存文件请求非常棒,但您不希望加载一堆未使用的像素.
什么是可接受的精灵图像大小？是否建议制作不同的精灵图像,而不是一个巨大的文件？!
想象一个带有huuuuge图标,按钮和其他图形元素集合的网站.现在,您将所有这些元素放在一个精灵中,因为您知道,请求数量少,而且全部都是.精灵是5MB大.
访问者进入页面,开始加载.文本出现,但您仍在等待Megasprite下载.根据文件大小和互联网连接,访问者必须等待很长时间才能使站点的关键(导航)元素可用.
对于一个简单的站点,单个精灵会做,但是当事情变得更精细时,使用几个精灵可能是有益的.此外,在维护时将所有图像放在一个精灵中是臀肌的一种痛苦(尽管自动化有很大帮助).总而言之,巨大的精灵是糟糕的精灵.
如何在精灵图像中放置和对齐图像会有什么不同吗？
并不是的.但是你应该记住一些事情.首先,您希望精灵尽可能紧凑; 较少使用的空间越好.但是,这可能会迫使你在CSS中做一些荒谬的细致定位.如果你愿意手动设置每个元素的背景位置没有问题,但没有人会责怪你作弊一点并使用更容易使用的位置.
还有一件事
你考虑过使用SVG精灵吗？文件大小小,每个分辨率都非常流畅和清晰.CSS Tricks在这里和这里都有很好的文章
对于问题1：
根据我在大型移动服务提供商网站上工作的经验，将图像分组在一起当然是一个好主意，但可能更好地按它们所属项目的组件或部分而不是大小进行逻辑分组。因此，我会将制作边框（边、圆角等）或背景图像的精灵分组在一起。
这将使它们在开发过程中更容易找到和维护。
另一方面，如果您正在制作游戏并且已经创建了所有图像（例如 64 个动画角色图像），您不妨将它们全部粘贴到一个文件中。
希望这可以帮助。
迈克尔
| 归档时间： |
|
| 查看次数： |
4029 次 |
| 最近记录： |