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