网站如何解决图片过大加载慢的问题？

使用浏览器预加载，firefox当中是prefetch，chrome当中是prerender

图片过大加载慢？而不是图片太多加载慢？

首先要尽可能的压缩，看用户的忍受程度。jpg 可以用很多方法压缩，png 推荐使用 TinyPNG
工具（不过正文图片，显然要选择 jpg 格式的）。

然后

1，不太“在乎”用户体验的省事方法：

图片保存成渐进式的，加载会慢慢变清晰，而不是从上往下依次加载，然后放在 CDN，设置缓存之类。

2，比较“在乎”用户体验的高端方案：

判断用户的设备（主要用在移动端）、网络等，分别加载不同质量的图片（例如高端 iPhone wifi 情况下，就可以加载双倍高清图等，蜂窝网络下面，就加载个单倍或者有损压缩过的）。

或者先加载低质量的图片，让浏览者可以看到，然后再在后台加载更高清的，等加载完了，浏览者还在观看，就插入替换掉。

或者先加载低质量小图片列表，然后让用户点击，触发类似 fancybox 的效果，弹窗出现大图片。

或者利用资源预加载（三个 HTML5 不常见特性简介）当用户还没打开的时候，就开始加载。

还有好多思路，后面想到再补充。

作者：于江水
链接：https://www.zhihu.com/question/23655692/answer/25257731
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

原地址：

https://www.zhihu.com/question/23655692