CSS精灵对SEO不利吗？

如今，通常用<img>标签完成的工作现在是通过诸如<div>CSS的背景图片来完成的，该图片使用CSS“ sprite”和偏移量设置。

我想知道他对SEO有什么样的影响，因为实际上我们失去了该alt属性（由Google编制索引），并停留在“ title”属性（据我所知未编入索引）。

这是一个明显的劣势吗？

出于这个原因，仅将CSS Sprites用于装饰元素 - <img>用于特定于页面的元素，将Sprites用于与所呈现的内容无关的装饰元素。

如果您需要用于导航项的按钮图像，则将该图像添加为导航链接的背景而不是像这样的标记更为有意义：

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

（即，只要图像的内容比页面上的文本内容多余，或者图像的内容最好描述为“装饰”）

作为将站点模板元素分离为精灵的额外好处，您以后可以通过更改样式表来更改站点的“外观”，而不必覆盖旧的设计图像文件或重写所有HTML标记。

您可以将<img>标签与CSS精灵一起使用：

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png 可以是压缩为<50个字节的1x1透明像素。

样式：

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

这样，您可以从Sprite获得性能优化-并保留alt标签。

该alt标签被高估了。我认为有太多人会竭力确保alt自己的页面上有标签。我不相信没有一个人会伤害您。只需确保您有一个img，就alt为它分配了一个标签。

我相信加载时间和网站性能对SEO的总体影响要大于alt标签，并且对于每个图像请求或HTTP请求，网站都将变慢。CSS Sprite的目的是帮助最大程度地减少这些请求并加快页面加载时间。

我倾向于将精灵用作装饰性图标，它们与整个页面无关，因此对于SEO而言，这种情况很好。您拥有的所有相同尺寸且不会影响页面含义的图像集都是CSS Sprite的理想选择。