在直接的html或css中定义图像会更好吗？

如果我有选择地插入图片直接进入HTML或CSS，例如说，包裹图像中的链接，我可以做要么...在直接的html或css中定义图像会更好吗？

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

或者我可以做...

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

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

哪个更好，为什么？两者都是按照想要的方式工作，但是加载时间等方面是否有区别，或者是否有更好的实践？

来源

2011-10-06 pv1

在HTML中使用的图像是更好，当图像有任何环境中的意义...如果它是一个没有任何背景意义的装饰画，然后用CSS。 CSS用于表示，HTML用于内容。

最好的提示，为您确定是否使用HTML和CSS的画面： 如果我删除的图片，将网页内容还有意义？

在HTML的图像是指在上下文中提供视觉意义，具有有意义的文本回退。应该避免使用没有任何内容的A元素，因为它的内容与链接，浏览器和网络爬虫（例如谷歌机器人）有关系。

使用CSS图片只用于装饰目的。否则，它可能会损害您的搜索引擎排名。总是为图像提供alt属性，以确定最终访问者无法看到任何图像。

来源

2011-10-06 18:42:00

@JohnKurlak更棒的是，谷歌的观点是什么？他们现在可以检测隐藏文本并对其进行惩罚：http://www.google.com/support/webmasters/bin/answer.py?answer=66353 –

@Doozer现在，这些黑客最好避免。如果它对用户没有用处，请不要这样做。 – 2011-10-06 18:56:07

感谢这是我需要知道的。 – pv1

如果图片包含上下文（如徽标或照片），我会建议将其加载为<img>请确保您为可访问性和SEO原因提供了替代文本。

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

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

来源

2011-10-06 18:39:39

我同意，换句话说，如果图像是内容使用IMG，如果图像是网站使用CSS布局/图形设计的一部分。 – stivlo

@stivlo在关于图片内容添加了一行内容，谢谢。 –

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

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

enter image description here

来源

2011-10-06 18:50:02 Jeff

精灵绝对是他们不工作的一个领域，你是对的。通常精灵都是专注于设计的，所以它们无论如何都属于CSS。 –

@DoozerBlake的确如此。例如，我不记得在文章开始时看到用于照片库或图片的精灵。 – Jeff

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

更具体的例子：如果你正在使用你的形象旁边的一个文本链接图标，使用背景图像：

Print icon with text

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

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

如果你的形象是按钮本身，在没有文字方面，请使用<img>元素以及适当的alt属性，如果图片不可用，该元素将替代图片。

print button

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

来源

2011-10-06 18:58:29 gilly3

在直接的html或css中定义图像会更好吗？

回答

相关问题