【问题标题】:One big background image or multiple small images?一张大背景图片还是多张小图片?
【发布时间】:2013-07-25 06:08:48
【问题描述】:

作为一名网络开发人员,我必须剪裁类似这样的布局(Ruben Bristian 的示例网站):

我是否应该剪裁多个像徽标这样的小图像:

标签:

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

并使用display: block; 定位<a href> 以获得链接徽标?

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

【问题讨论】:

  • 如果对您有帮助,别忘了将答案标记为正确 :)

标签: css html


【解决方案1】:

使用单独的图片。

以下是一些原因:

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

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

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

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

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

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


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

【讨论】:

    【解决方案2】:

    老实说,我会尝试一些不同的方法。图片的“照片”部分是一张图片,徽标是另一张图片,标题两侧的双栏可能是另一张图片(但可能不是必需的。

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

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

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

    【讨论】:

      【解决方案3】:

      优点:

      • 加载的总字节数较低。

      • 您不必担心将多少图像拼凑成整体图像。

      【讨论】:

        【解决方案4】:

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

        【讨论】:

          【解决方案5】:

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

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

          如果它永远不会改变(不太可能),那么,是的,将其展平为单个图像。

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

          【讨论】:

            猜你喜欢
            • 2016-09-07
            • 1970-01-01
            • 2017-03-12
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2023-04-08
            相关资源
            最近更新 更多