css - 一张大背景图片还是多张小图片？

Question

作为一名网络开发人员，我必须削减类似于此的布局（Ruben Bristian的示例网站）：

我是否应该为切割多个小图像（如徽标）而烦恼：

一个标签：

等等？或者我应该只用这样的所有元素制作一张大背景图片：

并<a href>为display: block;链接的徽标定位？

单个图像的尺寸小于多个元素的尺寸。其他优点和缺点是什么？

Answer 1

使用单独的图像。

以下是几个原因：

维护：如果/当您想在已有的基础上进行构建时，将来维护起来会容易得多。此外（主观上），背景图像对设计并不重要。如果部分背景被剪裁，它看起来不会损坏。但是，如果徽标变形，它看起来会损坏。

还要记住，正在开发更新、更清晰的显示器。显示标准分辨率背景要容易得多（它已经模糊，因此清晰度不是必需的），并维护两个版本的徽标。一种用于标准显示器，一种用于高清。

语义：如果用户禁用了图像怎么办？当然，这不太可能，但是Google呢？您应该对真实内容进行适当的标记。您的网站需要真实的文本内容，以便 Google 的抓取工具收集有关它的信息。使用 CSS 图像替换技术来构建界面。

关于高清显示器的另一个注意事项： 将较大的图像提供给高清（视网膜）显示器是惯例，并使用 CSS 缩小它们的尺寸，从而有效地增加它们的每英寸点数。如果您只使用一个图像，用户将不得不下载一个相当大的图像。您使用的带宽更多，用户体验更慢。

此外，文本在高清显示器上看起来很糟糕。允许浏览器向用户呈现锐利的文本更有意义。

可访问性：首先，屏幕阅读器不知道您的网站是关于什么的。在这种情况下，这可能不那么相关，但构建和访问网站是最佳实践。如果您想在网站上包含一些较小的文本，某些用户可能无法阅读。通常他们会增加字体大小，但如果你使用图像，他们就无能为力了。

---

我可能夸大了这个答案，但这个建议是善意的。

Answer 2

老实说，我会尝试一些不同的方法。图像的“照片”部分将是一个图像，徽标是另一个图像，并且可能是标题两侧的双条（但可能不是必需的。

我会将照片部分用作 div 上的 bg 图像，其余部分在代码中。

我根本不会将文本作为图像的一部分。尝试使用像Google Web Fonts这样的服务来获得好的字体。

该方法将为您节省大量维护时间，并有助于提高性能。

Answer 3

PROS:

• Total bytes loaded is lower.

• You do not have to worry about how little images are put together to become the total image.

Answer 4

如果您只使用 1 张图像，您会发现保持布局的流动性会容易得多。你不会有填充/对齐问题、渲染问题等。实际上加载时间应该是相同的，对于多个图像可能会更长一点，因为浏览器必须渲染更多的 css，但我想它不会很引人注目。最后，它真的归结为对工作更好的东西。我非常偏向于 1 个干净的图像 :)

Answer 5

我想您必须考虑如何单独使用每个元素，以及它们将来将如何变化。

您可能想要更改徽标、为其设置动画或希望在其他地方重新使用它。背景图像可能会改变，或者成为某种过渡画廊中的多个图像。

如果它永远不会改变（不太可能），那么，是的，将它展平在一个图像中。

我个人会将其作为单独的背景图像。然后也许将徽标和标签放在另一个透明 png 上，并利用 css sprite 在整个站点中重复使用它们。这将使下载徽标/标签所需的请求数量减半，并允许您分别优化每个图像，即复杂的背景照片和更简单的徽标/标签。