优化与替代文本 - 我可以两者兼得吗？答案

【问题标题】：Optimization vs Alt Text - Can I have both?优化与替代文本 - 我可以两者兼得吗？
【发布时间】：2009-12-29 08:46:05
【问题描述】：

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

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

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

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

我可以两全其美吗？

有一个优化的图像，因此只有 1 个请求，但在该图像中添加了某种文本（出于 SEO 和屏幕阅读器的原因）？

附：页面的设计太愚蠢了，没有实际的文字。我只是在尝试引入文本，以便搜索引擎能够阅读相关内容。我被赋予了做 SEO 的工作。所以我只是想遵循一些基本准则。可惜他们不让我碰设计本身。

编辑

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

【问题讨论】：

是否存在由 10 个 HTTP 请求引起的真正性能问题，或者这是因为您“认为它可以更快”而过早优化的情况？
在页面的 4 - 5 个地方减少 10 或 12 个这样的请求，加载时间缩短了 10 - 15 秒。我用 Firebug 的 Net Console 反复测试了这两种情况。总共消除了 40 个 HTTP 请求，加载时间减少了 10 - 15 秒。
... 10 到 15 秒？你使用什么样的网络和服务器？ 2400波特调制解调器和C64？？？ ;)
是的。有了这样的加载时间，你就有了一个服务器问题。
实际下载时间并没有减少几秒！从第一个 URL 请求到页面加载完成，减少了很多时间。它包括查找、排队和所有这些东西。

标签： http image optimization seo

【解决方案1】：

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

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

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

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

作为旁注，您可能会通过以下想法获得一些字节（取决于您的图像）：

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

【讨论】：

他们是内容，他们需要有我确信的替代文本。但是在加载了 40 张这样的图像后，我别无选择。由于我完全无法控制设计，因此将内容更改为具有较少图像是毫无疑问的。作为最后的手段，我做了这个图像组合。
如果它们是内容（并且必须有 alt 文本），你应该使用 img 标签；; 40 张图片看起来“很多”内容，但是，正如您所说，您没有太多选择；；仅通过删除几个 HTTP 请求来获得 10-15 秒似乎很奇怪：获得一些时间是可以的，但是就这么多吗？你的图片有多大？
文件大小约为 1kb - 3kb。但是，在 Firebug 中，“排队时间”和其他一些时间很长。与它显示的其余 4 个部分相比，那里显示的下载时间几乎可以忽略不计。我希望通过 Firebug 是合理的。

【解决方案2】：

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

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

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

【讨论】：

我有点忽略了您在这些其他长篇大论中的回答。 :D

【解决方案3】：

有一个优化的图像，因此只有 1 个请求，但在该图像中添加了某种文本（出于 SEO 和屏幕阅读器的原因）？

不，你不能。图像搜索引擎优化绝对是不可能的。您可以做的是给周围的元素（我假设最有可能是 DIV）title 属性以显示小工具提示。但是，这不仅仅意味着 SEO：对于关闭图像的浏览器（无论出于何种原因，速度或用户残疾），不再有显示替代内容的上下文（这就是 alt 属性真正存在的内容）为。）

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

【讨论】：

【解决方案4】：

您指的是 CSS 精灵。这种技术使用背景图像而不是普通图像，背景图像是用于演示而不是用于内容，因此如果使用得当，您不必指定 alt 属性。

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

【讨论】：

我知道它是从精灵开始的，但我说的是内容图像！ :D.. 所以 ALT 文本或其他一些文本是有意义的。我也有菜单和东西的基于精灵的图像。我在那里不需要它。你懂了？我甚至使用这种精灵技术来优化内容图像
@ILMV ：我不完全理解第二段。我之前没有使用过 CSS sprites，请您解释一下吗？
通过将背景图像和位置设置为单个图像，您已经在使用 CSS 精灵。好吧，如果您可以使用style 属性在<img> 标记内执行此操作，则可以照常使用alt 标记，但同时使用单个背景图像。

【解决方案5】：

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

【讨论】：

我说的是首次访问者。该网站需要为他们快速加载。所以没有在那里缓存的问题。为第二次访问者缓存是完全不同的事情。

【解决方案6】：

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

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

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

如果这些真的是图片，那么我建议你不要在这里使用 CSS sprites - 如果用户右键单击图像并选择“另存为”怎么办？

【讨论】：

这如何回答这个问题？
我认为确实如此。我希望一些文本与 div 相关联，所以 title 属性可以做到。我只是不知道它是否会对 SEO 产生与图像元素的 alt-text 属性相同的影响。希望我说的有道理
答案已更新（同时您也有一些类似的答案）
“没有一个主要引擎在确定相关性时考虑 ALT 文本” - searchengineguide.com/robin-nobles/how-important-i.php
@rob: google.com/webmasters/docs/… - 第 15 页和第 16 页。认为在此处放置某种文本可能是个好主意。