gpt4 book ai didi

html - 社交图标 : To sprite or not to sprite?

转载 作者:搜寻专家 更新时间:2023-10-31 22:47:13 27 4
gpt4 key购买 nike

我目前正在开发 HTML/CSS 模板,我将实现以下社交媒体图标:

http://www.premiumpixels.com/freebies/41-social-media-icons-png/

它们以 41 个单独的 .png 文件的形式出现。我想使用 CSS 类将它们包含到我的模板中,以便于像这样使用:

<i class="icon-twitter"></i>
<i class="icon-facebook"></i>

现在的问题是,我应该将每个图标作为我的 CSS 类中的一个单独文件引用,还是应该将所有 41 个图标合并到一个 sprite 中并调整每个类的背景位置(CSS sprites 技术)?

很明显,使用我的主题的人可能不会在他的网站上使用 41 个社交媒体图标(希望如此)。我会说在一般网站上,一次使用大约 3 或 4 个图标。所以这让我想知道在只使用大约十分之一(41 个中的 4 个)时使用 Sprite 技术是否有意义。

单个文件的文件大小平均约为每个文件 2kb。我创建的 Sprite 大小为 42kb。

这种情况的最佳解决方案是什么?

另外:sprite 中的图标如何分布重要吗?我刚刚制作了 2 列和 21 行图标。它也可能是一列和 41 行,或者 6 列和 7 行。

干杯

最佳答案

你应该将它们全部放入一个 Sprite 中。有一些生成器可以使它也很容易做到。

将它们组合成一个 sprite 将减少 HTTP 请求的数量。

http://spritegen.website-performance.org/

关于html - 社交图标 : To sprite or not to sprite?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15139258/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com