http - 优化与替代文本——我可以同时拥有两者吗？

Question

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

我知道为图像添加 ALT 文本是件好事。我有一组 10 张小图片和每个小图片的替代文本。请注意，迫切需要确保第一次访问者尽快看到该网站。

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

但我不能再提供 ALT 文本了!因为它不是图像。

我可以两全其美吗？

有一张经过优化的图像，因此只有 1 个请求，但将某种文本与该图像一起放置(出于 SEO 和屏幕阅读器的原因)？

附言页面的设计太愚蠢了，没有实际的文字。我只是想介绍文本，以便搜索引擎阅读相关内容。我得到了做 SEO 的工作。所以我只是想遵循一些基本的指导方针。可惜他们不让我接触设计本身。

编辑

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

Answer 1

如果这些图像是您的内容，您不应该像这样组合它们:是的，加载 10 个单独的图像可能需要一些时间，但是，如果这是您的内容:

• 无论如何，这些图片很可能会很大
• 您的用户会希望可以右键单击他们，然后选择“另存为”等类似操作。
• 这些图片很重要；这意味着他们必须有一个 alt 文本
• 这些图片不应该设置为背景，应该使用img标签
• 根据您网站的组织方式，也许您可​​以采用某种预取解决方案？
  • 例如，如果您要显示照片库(带有“上一个”和“下一个”按钮)，当用户正在观看图片 2 时，他很有可能会点击在“下一步”上查看图像 3——这意味着您可以在他观看图像 2 时预取该图像，因此当他单击“下一步”时图像 3 似乎显示得更快

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

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

作为旁注，您可能会获得一些字节(取决于您的图像)的想法，例如:

• 将它们编码为 8 位 PNG 而不是 24 位 PNG
  • 这对于屏幕截图来说通常就足够了，例如，取决于您在图像中使用的颜色
  • 它可以将图像大小除以 2 以上!
  • 但是如果你的原始图像有丰富的色彩，它会破坏它；这意味着您必须根据每张图片做出决定
• 有一些工具可以重新编码 PNG 和/或去除无用数据(例如，参见 pngcrush 或 optipng)
  • 我想您可能会找到 jpg 和/或 gif 的等价物