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

如果我可以选择直接在html或css中插入图像，比如说在图像中包装一个链接，我可以这样做

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

或者我可以

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

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

#img{background:url（'#'）不重复；高度：#；宽度：#}

---

哪一个更好，为什么？这两种方法都可以正常工作，但加载时间等方面有什么不同，或者有什么更好的做法吗？

如果图像有上下文，例如徽标或照片，我建议将其加载为

确保您提供的alt文本也是出于可访问性和SEO原因

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

---

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

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

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

HTML中的图像意味着在上下文中提供视觉意义，并返回有意义的文本。应该避免使用没有任何内容的A元素，因为对于浏览器和web爬虫（比如googlebot），其内容将与链接有关系

---

仅将CSS图像用于装饰目的。否则它会损害你的搜索引擎排名。始终为图像提供一个alt属性，确定最终访问者看不到任何图像时的设想。

一般来说，我尝试在CSS中放置尽可能多的图像，但Doozer和Mario有很多优点。如果图像对上下文很重要，它可以放在HTML中。我还将使用

遵循语义HTML的原则。如果图像是内容，即缩略图、照片或按钮，请使用

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

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

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

打印
.printIcon{background:url（…）不重复；左填充：20px}

如果您的图像是按钮本身，没有文本方面，请使用

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

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

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


我同意，换句话说，如果图像是内容，请使用img，如果图像是网站布局/图形设计的一部分，请使用css。@stivlo添加了一行，将图像视为内容，谢谢。@JohnKurlak更好，谷歌的看法是什么？他们现在可以发现并惩罚隐藏的文本：@Doozer-Right，现在最好避免这些黑客攻击。如果它对用户没有用处，就不要这样做。谢谢。这是我需要知道的。不总是这样。请参阅谷歌的马特·卡茨的回复：。SEOmoz燕麦片公司也推荐：雪碧绝对是他们不工作的地方，你说得对。通常精灵都是以设计为中心的，所以无论如何它们都属于CSS。@DoozerBlake这是真的。例如，我记不起曾经见过照片库中使用的精灵或文章开头的图片。