用于 Web 开发的 Sprite 表

发布于 2024-09-29 04:44:51 字数 189 浏览 8 评论 0原文

我目前正在开发一个新网站。我只了解了几页，它们都使用 s。我正在考虑这个问题，并决定考虑对所有按钮图像等使用精灵表，然后只使用 CSS 来渲染适当的图像。我想看看大家对此有何看法。值得付出努力吗？它如何影响 SEO，特别是 s 的 ALT。还有什么我应该注意的吗？

提前致谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一口甜 2024-10-06 04:44:51

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

通过包含带有 alt 属性的普通图像标签，您将使图像可用于 google 图片搜索等。但是，这不是我非常重视的因素。

重要的是，如果有人使用屏幕阅读器查看您的网站或只是查看 HTML，则可以通过图像标签和 alt 属性成功传达内容。如果您将 div 与 CSS 一起使用，您将失去这种效果，并且有些人可能会错过内容。

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

虽然将其他图像放入真实图像标签中的效果应该会稍差一些，但如果您在图像上正确设置缓存标头，则效果可能会非常小。

编辑：
快速搜索发现了这个：
http://www.google.com/support /forum/p/Webmasters/thread?tid=75fa18ce5e671f5b&hl=en

这似乎通过将文本放置在 div 中然后使用精灵隐藏文本来减轻 Alt 属性的影响：

Google 使用的方法，链接内的相关文本，对爬虫、关闭图像的人、屏幕阅读器等可见。

<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>

如果性能可能是一个问题，那么可能值得走这条路，但我确实更喜欢更具语义的 img 标签，如果它们是内容的一部分。

In my opinion, images which are part of content should use image tags, and everything else can use background images/CSS sprites.

By including a normal image tag with an alt attribute, you will make the image available for things like google image search. But, this is not a factor I weigh very heavily.

The important part is that if someone looks at your site with a screen reader or simply views the HTML, the content will be successfully conveyed with an image tag and alt attribute. If you use divs with CSS you will lose this effect, and some people might miss the content.

But, when it comes to non repeating background images, buttons, and other style oriented images, I do recommend using CSS Sprites to improve performance.

While putting the other images in real image tags should preform slightly worse, this can be very minimal if you set the caching headers properly on the images.

Edit:
A quick search found this:
http://www.google.com/support/forum/p/Webmasters/thread?tid=75fa18ce5e671f5b&hl=en

Which seems to mitigate the Alt attribute by placing text in the div and then using sprites to hide the text:

The approach Google uses, relevant text inside link, visible for crawlers, people who have images turned off, screen readers, etc.

<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>

If performance is likely to be an issue it might be worth going that route but I do prefer the more semantic img tags if they are part of the content.

回复收藏 0 原文