背景图像的加载速度比HTML中的嵌入图像加载速度快吗？它们如何被屏幕阅读器读取？

如果背景图片和嵌入图片大小相同，只要大小相同，就可以在HTML页面上进行加载了吗？如果我要在一个页面中使用相同的图像两次 - 一次作为背景，一次作为正常嵌入图像，加载速度更快？背景图像的加载速度比HTML中的嵌入图像加载速度快吗？它们如何被屏幕阅读器读取？

为了使网站与屏幕阅读器兼容，包含图像的最佳方式是什么？屏幕阅读器能够很好地读取背景图像，还是只是忽略背景图像？

来源

2013-03-06 user1448031

不同的浏览器可能会有不同的优化，但我想象在这两种情况下的瓶颈将在下载图像，而不是在输出中呈现的方式/位置。所以它基本上是一样的。对于屏幕阅读器，你会如何期望它读取图像？如果图像是样式的一部分，屏幕阅读器可能（并且应该正确）忽略它。如果它是标记的一部分，那么我想象屏幕阅读器可能被配置为指示图像存在并且可能是关于图像的一些信息（例如其“alt”标签）。 – David 2013-03-06 13:41:15

带有背景图片的大赢家（少HTTP请求）。至于可访问性，图像替换技术可以处理该问题。 – steveax 2013-03-07 06:53:46

如果背景图像和嵌入图像大致在HTML页面上载入大致相同的时间，前提是它们的大小相同？

我会说是，但我认为这也取决于他们如何加载。过去有一种叫做图像预加载的做法。我从来没有亲自测试过速度测试，以确定它是否真的是有益的。

为了使网站与屏幕阅读器兼容，包含图像的最佳方式是什么？屏幕阅读器能够很好地读取背景图像，还是只是忽略背景图像？

屏幕阅读器不会公布<body>,<div>等附有背景图像。在这种情况下，alt属性没有神奇的地方。您需要记住，您的图像和文字颜色之间保持良好的对比。在我看来，WebAIM有很棒的color contrast checker。

如果您使用CSS将文本放置在用作背景的图像上，那么您可以给它一个alt，不要。无论如何，该图片可能应该有空白替换（<img src="..." alt=""/>）。

来源

2013-03-06 13:50:54

'' 我明白了你的意思，但这可能不适合搜索引擎优化？我猜在这样的情况下，我们无法使它成为SEO和辅助功能的理想选择。我们必须优先考虑其中之一。如果图像是作为背景的，那么最好通过CSS将它用作背景，而不是直接将其嵌入到代码中。 – user1448031 2013-03-06 20:32:41

关键字填充是做SEO的坏方法。为背景图像膨胀alt的会造成更多的伤害而不是好的。自然搜索引擎优化包括编写内容，以便您的关键字的变体自然出现，认为它是每200个单词的1-3倍。巧妙地使用标题标签，自然再次使用关键字。使用关键字和描述'meta'标签。我从来没有听说过一个好的来源sying null对你的搜索引擎优化。 AFAIK良好的代码胜过关键字填充垃圾。 – 2013-03-07 12:57:47

如果您使用图像既作为背景和图像（即使用两次相同的图像），技术上只需要加载该图像一次，假设您的图像正确缓存... 这是一旦你加载图像使用缓存头，或下载图像时，浏览器将从缓存中加载它或等待该图像完成加载。

至于背景图像和嵌入式图像是否需要大致相同的时间加载。让我们来看一些背景。按照谷歌：https://developers.google.com/speed/articles/browser-paint-events

最后，请注意，每个图像本身呈现逐步，使的用户开始看到整个图像完成加载之前的图像内容。现代浏览器逐步呈现HTML标签中的图像。相比之下，许多浏览器不会渲染使用CSS background-image属性逐步指定的图像。若要使支持渐进式渲染图像，请使用CSS背景图像属性的HTML标记代替。

因此，使用<IMG>标签将加载速度更快，并未有不同于旧的浏览器内嵌的CSS背景图像可能慢下来准备撑起DOM的图像。

但是，渐进渲染的<img>的注意事项是，如果在widow.onload事件触发时（即对于大图像几乎总是如此）您的图像未完全加载，则会造成相当丑陋渐进式渲染，以及使用自动宽度和/或100％宽度将图像设置为响应时引起涂料回流。

要使内嵌图像加载速度更快和更加美好的方式，我做的事是：

首先，预装载这些非常早在并在页面<头> CSS背景。您可以开始预先加载部分或全部css图像，然后再解析css文件或正文。

其次，为了解决其他缺点，我使用javascript lazy-load-ish方法在窗口加载之前隐藏交互事件中的图像。

最后，一旦css调用的图像加载完成，将图像作为淡入。

你可以看到一个活生生的例子：http://www.nptr.net/1614

所以，当一个嵌入式图像是最好的。如果您关心页面加载的最佳速度，我强烈建议您尽早通过头部的CSS背景预加载较大的图像，特别是如果您必须立即将它们用作背景。

那是因为否则，在您的身体的图像将不得不等待，直到您的CSS文件（s）和同步JavaScript（s）完全收到，直到浏览器实际上开始检索它们。这通常会导致100到500毫秒的延迟，最坏的延迟是在首页加载时。

来源

2013-04-19 07:49:52 hexalys

背景图像的加载速度比HTML中的嵌入图像加载速度快吗？它们如何被屏幕阅读器读取？

回答

相关问题