优化与替代文字 - 我可以同时拥有吗？

Question

我在开发/优化网页时遇到了一个小问题。

我知道为图像提供ALT文本很好。我有一组10个小图像和每个的alt文本。请注意，迫切需要确保第一次访问者尽快看到网站。

但我想，10个HTTP请求？所以，我所做的是，将所有图像组合成一个图像并有10个div并设置背景图像和背景位置，以便出现对用户来说相同，而实际上只有1个HTTP请求是。我认为我说得对，10个（不必要的）HTTP请求成本很高。

但我不能再给ALT文本了！因为它不是图像。

我可以两全其美吗？

有一个优化的图像，所以只有1个请求，但是将某种文本与该图像放在一起（出于SEO和屏幕阅读器的原因）？

P.S。页面的设计是如此愚蠢，没有实际的文本。我只是尝试介绍文本，以便搜索引擎将阅读相关的东西。我被赋予了做SEO的工作。所以我只是想遵循一些基本准则。太糟糕了，他们不会让我触摸设计本身。

修改

我设置<img>标签本身的背景而不是<div>。现在这是一个图像元素，我设置了ALT文本。然后我将src属性设置为1x1透明GIF。忽略这种可能性我觉得很愚蠢：D

Answer 1

如果这些图片是您的内容，则不应将它们合并为：是的，拥有10个单独的图片可能需要一些时间来加载，但是，如果这是您的内容：

• 无论如何，这些图片很可能很大
• 您的用户希望可以右键单击它们，然后选择“另存为”等等。
• 这些图像很重要;这意味着他们必须有alt文字
• 不应将这些图片设置为背景，并应使用img标记
• 取决于您的网站的组织方式，也许您可​​以使用某种预先获取的解决方案？
  • 例如，如果您正在显示照片（使用“上一个”和“下一个”按钮），当用户正在观看图像2时，他很有可能会点击在“下一步”看到图像3 - 这意味着你可以在他正在观看图像2时预先获取那个，所以当他点击“下一个”时图像3似乎显示得更快

如果这些图像不是您的内容，只是按钮图标和类似的东西：

• 您不必太关心alt文字，我会说
• 它们可能被用作链接的背景或类似的？如果是这样，我认为“正确”的解决方案是将您的“alt”文本作为链接的文本。

作为旁注，您可能会获得一些字节（取决于您的图像），例如：

• 将它们编码为8位PNG而不是24位PNG
  • 这通常足以用于截图，例如，取决于您在图像中使用的颜色
  • 它可以将图像大小除以2以上！
  • 但如果您的原始图像颜色丰富，则会破坏它;这意味着您必须基于每个图像来决定
• 有些工具可以重新编码PNG和/或去除无用的数据（例如，请参阅pngcrush或optipng）
  • 你可以找到jpg和/或gif的等价物，我想

Answer 2

  

有一个优化的图像，所以只有1个请求，但是将某种文本与该图像放在一起（出于SEO和屏幕阅读器的原因）？

不，你不能。 Image SEO绝对是不可能的。你可以做的是给周围的元素（DIV最有可能，我假设）title属性来显示小工具提示。然而，这比SEO更具有影响：对于关闭图像的浏览器（无论出于何种原因，速度或用户残疾），没有任何上下文可以显示替代内容（这是alt属性真正的内容是为了。）

我说，请等待，直到浏览器可以处理多部分文档。

Answer 3

您仍然可以将标题属性附加到DIV或其他元素。对于IMG，您可以将图像的来源设置为空白PNG或GIF，使用CSS精灵背景图像设置样式，然后将IMG的alt和title标记设置为他们需要的任何内容。

这是关于CSS sprites的经典文章：

http://www.alistapart.com/articles/sprites

Answer 4

您指的是CSS精灵。此技术使用背景图像而不是普通图像，背景图像用于呈现而不用于内容，因此在适当使用时，您不必指定alt属性。

我想知道你是否可以使用相同的技术，但是在img元素的style属性中，这样你就可以使用CSS sprite，但也可以使用alt属性。

Answer 5

图像是或多或少是静态的？在这种情况下，你应该找出它们被重新加载的原因。不要忘记HTTP可以控制缓存。

Answer 6

“title”属性会给你一个工具提示（你可以把它放在任何东西上，一个div，一个锚标签），但是我不确定搜索引擎是否会对它们进行不同的排序，或者它会如何影响屏幕阅读器。

这些图像在语义上是否真的是“图片”？比如，它们是画廊中的主要焦点吗？或者您是否将它们用作网页设计元素，如按钮，边框等。

如果它们是按钮，只需在您正在使用的input或a标记上添加标题

如果这些确实是图片，那么我建议您不要在这里使用CSS精灵 - 如果用户右键单击图像并选择“另存为”该怎么办？