Rails：使用 image_tag 或 css 背景图像显示图像更好吗？答案

【问题标题】：Rails: Is it better to display images with image_tag or css background image?Rails：使用 image_tag 或 css 背景图像显示图像更好吗？
【发布时间】：2012-12-24 23:58:07
【问题描述】：

我有一张图片需要在我们的索引页面上突出显示/立即显示。我想知道是使用 Rails 的 image_tag() 助手更好，还是使用 CSS 的背景图像属性来快速渲染图像。还是有关系？

【问题讨论】：

什么意思？图像不立即显示是否重要？不。在浏览器知道在哪里渲染之前，什么都不会渲染，即使那样，没有明确尺寸的 HTML 图像也会在渲染后重排页面。用户习惯于不会立即出现的图像。你不是吗？

标签： css ruby-on-rails image

【解决方案1】：

如果您在页面的 html 中引用图像，则必须解析页面并下载图像。

如果您在外部样式表中引用图像，则必须解析页面，然后必须下载和解析 CSS，然后需要下载图像。由于到服务器获取图像的往返次数，这将变慢。

如果您的 CSS 是内联的，那么您将返回解析第一页，然后下载图像。

如果您的图片不太大，为了获得最终性能，一个有趣的选择是将您的 CSS 内联到页面中，然后将图片直接嵌入到 CSS 中，避免在页面的初始图片之后进行任何下载HTML。例如

<head>
  <style>
    #foo { background-image: url(data:image/png;base64,iVBORw0K...) 
  </style>
</head>
<body>
  <div id="foo"></div>
</body>

Rails（实际上是 SASS）有帮助器将资产数据内联到 CSS 文件中（搜索资产数据 URL）。我从来没有用它来将 CSS 内联到 HTML 中，但这至少是可能的。

【讨论】：

【解决方案2】：

对于 Rails，这无关紧要。您选择的内容最终将更多地基于该图像应该如何显示。文字背后？作为标题图像？这将指导您使用 image_tag 或 CSS。

【讨论】：

【解决方案3】：

如果图像被视为内容，则应将其呈现为带有适当替代文本的图像标记。如果是装饰，应该是背景图。

【讨论】：