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