如果我可以选择将图像直接插入到 html 或 css 中，例如一个包含在图像中的链接，我可以这样做......
<a href="#"><img src="#" alt="" width="" height="" /></a>
或者我可以...
<a id="img" href="#"></a>
#img {background: url('#') no-repeat; height: #; width: #;}
哪个更好，为什么？两者都按要求工作，但加载时间等是否有任何差异，或任何被认为更好的做法？
【问题讨论】：
当图像具有任何上下文含义时，在 HTML 中使用图像会更好...如果它是没有任何上下文含义的装饰图片，则使用 CSS。 CSS 用于展示，HTML 用于内容。
确定图片是使用 HTML 还是 CSS 的最佳提示是： 如果我删除图片，网页内容是否仍然有意义？
HTML 中的图像旨在提供上下文中的视觉含义，并带有有意义的文本后备。应避免使用没有任何内容的 A 元素，因为它的内容与链接有关，对于浏览器和网络爬虫（例如 Google 机器人）。
仅将 CSS 图片用于装饰目的。否则会损害您的搜索引擎排名。始终为图像提供 alt 属性，确定最终访问者看不到任何图像的情况。
【讨论】：
如果图像具有上下文，例如徽标或照片，我建议将其加载为 <img> 确保您提供替代文本以实现可访问性和 SEO 原因。
如果图像在页面范围内没有上下文，那么我认为它的正确位置是在控制设计的 CSS 中定义的。
整个想法是尽可能将您的演示文稿与您的内容分开。图像可以是内容，如果是，则应该在其中。
【讨论】：
一般来说，我尝试在 CSS 中放置尽可能多的图像，但 Doozer 和 Mario 有优点。如果图像对上下文很重要，它可以放在 HTML 中。当文本需要浮动和图像时，我还将使用<img> 标签。
CSS 可以做到<img> 不能做到的一件事是CSS image sprites。这是您将从其中一个或另一个中获得的唯一真正的性能优势。像 youtube.com 这样的性能要求很高的网站会将许多图像组合成一张大的合成图像，以减少 HTTP 流量（从而减少页面加载时间）。例如，这是取自 youtube.com 的精灵。
【讨论】：
遵循语义 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()" />
【讨论】：