为什么不将作为页面内容的较大图像精灵化？
在对图像使用 CSS 精灵时，典型的经验法则是，您应该只对较小的图像（如图标）执行此操作，并且实际的图像内容应始终通过
我阅读的原因之一是允许使用 alt 文本，以便在语法上更加正确并且易于屏幕阅读器访问。然而，当这是一个问题时，您是否不能轻松地使用单个微小的透明图像，并将所有语法糖放在呈现真实视觉内容的精灵之上？
The typical rule of thumb when it comes to using CSS sprites for images is that you should only do it for smaller images (like icons) and that actual image content should always be represented through <img> elements. My question is: why? Aren't the advantages of spriting worthwhile for content images as well?
One reason I have read is to enable the use of alt text, to be more syntactically correct and accessible to screen-readers. However, when that is a concern, couldn't you just as easily use a single tiny transparent image with all the syntactical sugar atop a sprite that presents the real visual content?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您可以，但是：
内容图像不像图标等 UI 类型图像那样容易被重复使用。想象一个报纸网站：如果他们在每个故事中使用的每个内容图像都是精灵的一部分，那么该精灵将很快变得巨大，甚至会被只看一个故事的用户下载。
网站内容通常由不懂 CSS 的人来维护。期望内容编辑者编辑主精灵图像文件，重新保存为 JPG，然后弹出一些 CSS 只是为了将图像放在页面上，这是有点不合理的。
如果你精灵很多大图像文件，精灵文件将会变得非常大。当用户第一次访问该页面时，下载可能会花费令人无法接受的长时间，或者可能会占用用户太多的带宽，而最终只能看到精灵中的一个图像。
显然，这些都是概括——在特定情况下，精灵化更大/更多内容的图像可能是完全有意义的。
在将
![]()
You could, but:
Content images don’t tend to be re-used as much as UI-type images like icons. Imagine a newspaper site: if every content image they used in every story was part of a sprite, that sprite would very quickly get huge, and would be downloaded even by users who only looked at one story.
Website content is generally expected to be maintained by people who don’t know CSS. It’s a bit unreasonable to expect content editors to edit a master sprite image file, re-save out to a JPG, and pop in some CSS just to put an image on a page.
If you sprite a lot of large image files, the sprite file will get really large. It might take an unacceptably long time to download when the user first visits the page, or it might use up too much bandwidth on users who only end up seeing one of the images within the sprite.
Obviously, those are generalisations — in a specific situation, it might make perfect sense to sprite larger/more content-y images.
On using an
<img>tag with a tiny transparent image file for sprites, you can do that for any sprite images — it’s often useful for clipping and positioning the sprite image beyond whatbackground-positionallows.我能想到的另一个原因是搜索引擎；如果您有带有描述性 alt 标签的图像或带有
figcaption的figure元素，搜索引擎将能够查找、分类和显示它。One additional reason I can think of, is search-engines; if you have an image with a descriptive alt-tag or a
figureelement with afigcaption, search engines will be able to find, classify and show it.精灵通常对于静态内容（许多页面上常见的图像）很有用。
内容图片通常只出现在一页中，因此您无法将其添加到精灵文件中。
如果你想实时生成精灵，用你所有的图片制作自定义精灵文件，我认为生成成本比它节省的重复 HTTP 调用要昂贵得多。
精灵在这里是为了保存 HTTP 请求，但您不应该浪费服务器端计算时间来制作它，也不应该将昂贵且无用的图片放入精灵文件中。
Sprites are usually usefull for static contents (images that are common on many pages).
Content pictures often appears in only one page, so you can't add it to your sprite file.
If you want to have real-time sprite generation, making custom sprite file with all your pictures, I think the generation cost is far more expensive than the duplicated HTTP calls it saves.
Sprites are here to save HTTP requests, but you should not waste server-side computation time to make it, nor put expensive and unusefull pictures in your sprite file.
精灵应该用于整个网站的通用图标，而不是页面特定的内容。当您将精灵用于大图像时，您会浪费大量空白空间。
根据 http://blog.vlad1。 com/2009/06/22/to-sprite-or-not-to-sprite/ 这也是一个问题：
Sprites should be used for common icons across the whole website and not for page specific content. When you use sprites for big images you get a lot of white space that is wasted.
According to http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/ this is also a problem:
根据我对此继续进行的研究，另一个潜在的问题是内存消耗。尽管精灵可能被压缩到足以快速下载，但它们在客户端计算机内存中填充的足迹是在浏览器渲染它们之后，这意味着它可能非常大，即使对于文件大小相当小的精灵也是如此。
我还没有看到关于这个内存占用是否比加载相同数量的没有精灵的图像时看到的内存占用更大的明确答案。我将在未来几周内针对引发此问题的项目进行测试，因此一旦得出结论，我将返回并更新此答案。
From the research I've continued to do on this, another potential issue is memory consumption. Despite the fact that sprites may be compressed enough to download quickly, the footprint they fill in the client machine's memory is after the browser has rendered them, meaning it can be quite large, even for sprites with fairly small file sizes.
I haven't seen a definitive answer on whether or not this memory footprint is any larger than what one would see when loading the same number of images without sprites. I will be testing that in the coming weeks for the project that prompted this question, so I will return and update this answer once I have a conclusion.
精灵用于减少对服务器的请求量。大量小请求的影响比一个较大的请求使服务器速度减慢。但如果精灵图像（我喜欢称之为精灵图）太大，也会降低性能。另一件重要的事情是，就像你悲伤的那样，每张图片都有可能给出一些名称，由搜索引擎进行管理和索引。
Sprites are used to reduce the amount of requests to a server. The impact of lots of small requests is slowing the server more than one bigger request. But if the image of sprites, I like to call it sprite-map, is too large, it will also slow down the performance. The other thing of importance is like you sad the possibility for each single picture to give some name, to manage and to index by search engine.