如果背景图像和嵌入图像大小相同，它们在 HTML 页面上的加载时间是否相同？如果我要在一个页面中使用相同的图像两次——一次作为背景，一次作为普通嵌入图像，哪个加载速度更快？
为了使网站与屏幕阅读器兼容，包含图像的最佳方式是什么？屏幕阅读器是否可以很好地阅读背景图像，或者他们只是忽略了背景图像？
问问题
2573 次
2 回答
3
如果背景图像和嵌入图像大小相同，它们在 HTML 页面上的加载时间是否相同？
我会说是的，但我认为这也取决于它们的加载方式。以前有一种做法叫图片预加载。我从来没有亲自做过速度测试来知道它是否真的有益。
为了使网站与屏幕阅读器兼容，包含图像的最佳方式是什么？屏幕阅读器是否可以很好地阅读背景图像，或者他们只是忽略了背景图像？
屏幕阅读器不会宣布<body>,<div>等附加了背景图像。alt在这种情况下，属性没有神奇的地方。您需要记住，您要在图像和文本颜色之间保持良好的对比。在我看来，WebAIM 有一个很棒的颜色对比检查器。
如果您使用 CSS 将文本放置在用作背景的图像上，那么您可以给它一个alt，不要。<img src="..." alt=""/>无论如何，该图像可能应该有一个空 alt ( )。
于 2013-03-06T13:50:54.790 回答
2
如果您将图像同时用作背景和图像（即两次使用相同的图像），您在技术上只需要加载该图像一次，假设您的图像已正确缓存......即一旦您加载了带有缓存标题的图像，或者该图像正在下载，浏览器将从缓存中加载它或等待该图像完成加载。
至于背景图像和嵌入图像是否需要大约相同的时间来加载。让我们了解一些上下文。根据谷歌：https ://developers.google.com/speed/articles/browser-paint-events
最后，请注意每张图像本身是渐进式渲染的，因此用户在整个图像完成加载之前就开始看到图像内容。现代浏览器逐渐在 HTML 标签中呈现图像。相比之下，许多浏览器不会逐步渲染使用 CSS background-image 属性指定的图像。要启用图像的渐进式呈现，请使用 HTML 标记而不是 CSS background-image 属性。
因此，使用 <img> 标记的图像将加载更快，并且不会阻止 DOM 准备就绪，这与旧浏览器中的内联 css 背景图像可能会减慢速度不同。
但是，渐进式渲染 <img> 的注意事项是，如果在 widow.onload 事件触发时图像没有完全加载（对于大图像几乎总是如此），它会导致相当难看的渐进式渲染，因为当使用自动宽度和/或 100% 宽度将图像设置为响应式时，还会导致油漆回流。
为了使内联图像加载得更快、更好，我所做的是：
首先，在页面 <head> 的 AND 中极早地将它们作为 CSS 背景预加载。在解析 css 文件或正文之前，您也可以通过这种方式开始预加载部分或全部 css 图像。
其次，为了克服其他缺点，我使用 javascript lazy-load-ish 方法在窗口加载之前隐藏交互式事件上的图像。
最后，在调用 css 的图像完成加载后，将图像作为淡入显示。
您可以在以下位置看到一个实时示例：http ://www.nptr.net/1614
因此，虽然嵌入图像是最好的。如果您关心页面加载的最佳速度，我强烈建议您尽早通过头部的 css 背景预加载大图像，特别是如果您必须立即将它们用作背景。
那是因为否则，你身体中的图像将不得不等到你的 css 文件和同步 javascript(s) 都被完全接收到，直到浏览器真正开始检索它们。这通常会导致 100 到 500 毫秒的延迟，最差的延迟是在第一页加载时。
于 2013-04-19T07:49:52.180 回答