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

Question

作为一名 Web 开发人员，我必须剪下类似于此的布局(示例网站 Ruben Bristian ):

我是否应该费心切割多个像 Logo 这样的小图像:

标签:

等等？或者我应该只制作一张包含所有元素的大背景图片，如下所示:

并定位<a href>与 display: block;链接 Logo ？

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

Answer 1

使用单独的图像。

这里有几个原因:

维护:如果/当您想在已有的基础上进行构建时，将来维护起来会容易得多。此外(主观上)，背景图像对设计并不重要。如果剪掉部分背景，它看起来不会破损。但是，如果 Logo 变形，它看起来会破损。

另请记住，更新、更清晰的显示器正在开发中。显示标准分辨率背景(它已经很模糊，所以清晰度不是必需的)和维护两个版本的 Logo 要容易得多。一种用于标准显示器，一种用于高清。

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

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

此外，文本在高清显示器上看起来可怕。允许浏览器向用户呈现清晰的文本更有意义。

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

---

我可能把这个答案夸大了，但这个建议是出于好意。