用直接html或css定义图像会更好吗？

Question

如果我可以选择将图像直接插入到html或css中，例如说包含在图像中的链接我可以做...

<a href="#"><img src="#" alt="" width="" height="" /></a>

或者我可以......

<a id="img" href="#"></a>

#img {background: url('#') no-repeat; height: #; width: #;}

哪个更好，为什么？两者都按照需要工作，但加载时间等有什么不同，或者任何更好的实践？

Answer 1

当图像具有任何上下文含义时，在HTML中使用图像会更好......如果它是没有任何上下文含义的装饰图片，则使用CSS。 CSS用于表示，HTML用于内容。

确定是否为图片使用HTML或CSS的最佳提示是： 如果我删除图片，网页内容仍然有意义吗？

HTML中的图像旨在提供上下文中的视觉含义，并带有有意义的文本后退。应避免使用没有任何内容的A元素，因为其内容与链接有关系，适用于浏览器和网络爬虫（例如Google僵尸程序）。

仅出于装饰目的使用CSS图像 。否则会损害您的搜索引擎排名。始终为图片提供 alt 属性，确定最终访问者无法看到任何图片的内容。

Answer 2

如果图片有上下文，例如徽标或照片，我建议您将其加载为<img>确保您提供替代可用性和搜索引擎优化的替代文字。

如果图像在页面范围内没有上下文，那么我认为它的正确位置是在控制设计的CSS中定义的。

整个想法是尽可能地将您的演示文稿与您的内容分开。图像可以是内容，如果是，则应该在其中。

Answer 3

一般来说，我尝试尽可能多地在CSS中放置图像，但Doozer和Mario有很好的分数。如果图像对上下文很重要，它可以放在HTML中。当文本需要浮动和图像时，我还将使用<img>标记。

CSS可以做的一件事<img>不能CSS image sprites。这是您从一个或另一个中获得的唯一真正的性能优势。像youtube.com这样渴望性能的网站会将许多图像合并为一个大型合成图像，以减少HTTP流量（从而减少页面加载时间）。例如，这是一个来自youtube.com的精灵。

Answer 4

遵循语义HTML原则。如果图像是内容，即缩略图，照片或按钮，请使用<img>元素。如果它更像是页面设计的一部分，那么背景图像可能更合适。

更具体的示例：如果您将图像用作文本链接旁边的图标，请使用背景图片：

<span class="printIcon" onclick="window.print()">Print</a>

.printIcon { background: url(...) no-repeat; padding-left: 20px }

如果您的图片是按钮本身，没有文字方面，请使用具有适当alt属性的<img>元素，如果图像不可用，则可以替换图像。

<img src="printButton.png" alt="Print" onclick="window.print()" />