我一直想知道 facebook 加载图像的速度如何。我没有参与任何与我的问题相关的项目，但我真的很感兴趣。
通过一些观察，我注意到 facebook 会临时加载一张低质量的图片，并在完全加载后立即显示高质量的图片。这使它看起来加载速度如此之快，但实际上它一开始只是一个低质量的。
我的问题是，facebook是如何实现的？当我将图像放在我的网站上时，它会从上到下完全加载它。
这是通过 Javascript/Jquery ajax 完成的吗？或者其他的东西？是通过php完成的吗？
facebook是否最终制作了版本？低质量和高质量？并先发送低质量的？
谢谢 ：）
是的！你是对的，Facbook 先加载低质量的图像，然后根据网络速度渲染它。这种方法称为“渐进式 JPEG”，它是另一种 JPEG，顾名思义，它们是渐进式渲染的。
首先，您会看到整个图像的低质量版本。然后，随着越来越多的图像信息通过网络到达，质量逐渐提高。
从可用性的角度来看，渐进式通常是好的，因为用户会得到正在发生的事情的反馈。此外，如果您的连接速度较慢，则最好使用渐进式 JPEG，因为您无需等待整个图像到达即可了解它是否是您想要的。如果没有，您可以点击离开页面或点击返回按钮，而无需等待（可能很大）高质量图像。
就文件大小而言，渐进式 JPEG 是否比基线 JPEG 更大或更小，在博客和书籍中存在争议。
如果您在以 jpg 或其他格式保存任何文档时使用 Photoshop 或任何设计工具等工具，它会询问您 2 个选项，一个是基线，另一个是渐进式。
但是，如果您为此编写了任何 API 以在网页上显示时将基线图像转换为渐进式图像，那么您也可以在运行时实现相同的效果。
据我了解，当您单击 Facebook UI 中的图像时，查看器会显示加载了低缩略图版本（或略大的缩略图版本）。由于浏览器缓存，该低质量图像将很快显示。
然后在后台，他们使用 javascript 加载更高质量的图像。然后使用一些 javascript 事件，他们可以检测到何时加载了更高质量的图像。加载后，将较低质量的版本替换为较高质量的版本。
所以从 UI 的角度来看，它只是 Javascript。当您上传照片时，他们会创建多种尺寸的图像以实现这种效果。