作为一名网络开发人员，我必须剪裁类似这样的布局（Ruben Bristian 的示例网站）：
我是否应该剪裁多个像徽标这样的小图像：
标签：
等等？或者我应该只用这样的所有元素制作一张大背景图片：
并使用display: block; 定位<a href> 以获得链接徽标？
单个图像的尺寸小于多个元素的尺寸。其他优点和缺点是什么？
【问题讨论】：
以下是一些原因：
维护： 如果/当您想在已有的基础上进行构建时，将来维护起来会容易得多。此外（主观上），背景图像对设计并不重要。如果部分背景被剪裁，它看起来不会损坏。但是，如果徽标被扭曲，它看起来会损坏。
请记住，更新、更清晰的显示器正在开发中。显示标准分辨率背景要容易得多（它已经模糊，因此清晰度不是必需的），并维护两个版本的徽标。一种用于标准显示器，一种用于高清。
语义：如果用户禁用了图像怎么办？当然，这不太可能，但是 Google 呢？您应该对真实内容进行适当的标记。您的网站需要真实的文本内容，以便 Google 的抓取工具收集有关它的信息。使用 CSS 图像替换技术来构建界面。
关于高清显示器的另一个注意事项： 将较大的图像提供给高清（视网膜）显示器是惯例，并使用 CSS 来缩小它们的尺寸，从而有效地增加它们的每英寸点数。如果您只使用一张图片，用户将不得不下载一个相当大的图片。您使用的带宽更多，用户体验更慢。
此外，文本在高清显示器上看起来可怕。允许浏览器向用户呈现锐利的文本更有意义。
辅助功能：首先，屏幕阅读器不知道您的网站是关于什么的。在这种情况下，这可能不那么相关，但构建和访问网站是最佳实践。如果您想在网站上包含一些较小的文本，某些用户可能无法阅读。通常他们会增加字体大小，但如果你使用图像，他们就无能为力了。
我可能夸大了这个答案，但这个建议是善意的。
【讨论】：
老实说，我会尝试一些不同的方法。图片的“照片”部分是一张图片，徽标是另一张图片，标题两侧的双栏可能是另一张图片（但可能不是必需的。
我会将照片部分用作 div 上的 bg 图像，其余部分在代码中。
我根本不会将文本作为图像的一部分。尝试使用Google Web Fonts 之类的服务来获得好的字体。
该方法将为您节省大量维护时间，并有助于提高性能。
【讨论】：
优点：
加载的总字节数较低。
您不必担心将多少图像拼凑成整体图像。
【讨论】：
如果您只使用 1 张图片，您会发现保持布局的流畅性会容易得多。你不会有填充/对齐问题，渲染问题等。实际上加载时间应该是相同的，对于多个图像可能会更长一点，因为浏览器必须渲染更多的 CSS，但我想它不会很引人注目。最后，它真的归结为对工作更好的东西。我非常偏向于 1 张干净的图片 :)
【讨论】：
我想你必须考虑如何单独使用每个元素，以及它们在未来将如何变化。
您可能想要更改徽标、为其设置动画或希望在其他地方重新使用它。背景图片可能会改变，或者在某种过渡画廊中变成多张图片。
如果它永远不会改变（不太可能），那么，是的，将其展平为单个图像。
我个人会将其作为单独的背景图片。然后也许将徽标和标签放在另一个透明 png 上，并利用 css sprite 在整个站点中重复使用它们。这将使下载标志/标签所需的请求数量减半，并允许您分别优化每个图像，即复杂的背景照片和更简单的标志/标签。
【讨论】：