代码之家 › 专栏 › 技术社区 › Aaron Hathaway

网页开发用雪碧纸

css-sprites css html php

6

Aaron Hathaway · 技术社区 · 15 年前

我现在在一个新的网站上工作。我只有几页那么深,它们都用 <img>s <图片 . 还有什么我应该知道的吗?

2 回复 | 直到 15 年前

1

6

Andy Groff 15 年前

在我看来,作为内容一部分的图像应该使用图像标记,其他一切都可以使用背景图像/CSS精灵。

通过包含一个带有alt属性的普通图像标记,您将使该图像可用于google图像搜索之类的事情。但是,这不是我很重的一个因素。

但是,当涉及到不重复的背景图像、按钮和其他面向样式的图像时,我确实建议使用CSS精灵来提高性能。

虽然将其他图像放在真实的图像标记中的效果会稍差一些,但如果在图像上正确设置缓存头,这可能非常小。

编辑: http://www.google.com/support/forum/p/Webmasters/thread?tid=75fa18ce5e671f5b&hl=en

这似乎通过在div中放置文本,然后使用sprites隐藏文本来减轻Alt属性的影响:

谷歌使用的方法是,链接内的相关文本,对爬虫程序、关闭图像的人、屏幕阅读器等可见。

<a href="..." style="position:relative; display:block; overflow:hidden; width:100px; height:100px">
relevant text here
<span style="position:absolute; top:0px; left:0px; width:100px; height:100px; background-image:url('sprite.jpg'); background-position:0px; -100px;"></span>
</a>

2

1

user490227 user490227 15 年前

精灵是绝对值得努力的。它们节省了加载时间,增加了响应,还利用了缓存的优势,所有这些都可以结合起来显著减少加载时间。

从搜索引擎优化的角度来看,应该没有负面影响。你没有应用任何外来的方法(读:flash)来阻止爬虫,一切都保持W3标准,所以一切都应该是好的。一定要通过W3验证程序来运行它,以确保其他一切都是干净的。

如果谷歌这么做的话,一定会很好,对吧?