图片展示/分享型的网站如何提高图片的载入速度？

2 个回答

沈瞳，程序员啊

宋一喵、李志军、肖元安 等人赞同

虽然经验浅薄，但好坏也算是做过了一个以图片为主的应用。浅见如下，欢迎指正。

首先，要想比较好的回答这个问题，我们可能需要对“提高图片的载入速度”作一个更明确的定义。假定po主想问的是“让用户感觉图片载入得更快”的话，大概有如下几个方面可以有所帮助：

1、减小图片尺寸
a) 压缩图片
对于图片，无论是照片还是较规则的几何图形，都可以寻找到相对优秀的压缩格式。比如，对于普通的照片，JPEG就能很大程度上提供较高的压缩率；而PNG更适合需要清晰边缘的几何图形。可以根据分享的图片的主要特点和清晰度要求选取合适的压缩格式和压缩率。对于网页上显示的普通照片，经过压缩后可以达到50k以下的尺寸。
b) 使用缩略图/多尺寸版本
在图片的展示中，往往需要不同的尺寸。此时如果对不同的尺寸使用相应大小的缩略图，则可以减少不必要的网络开销。比如在列表视图中使用一个较小的版本，而在点击后显示一个较大的版本。Instagram就使用了类似的策略：如http://distilleryimage7.s3.amazonaws.com/f4947c1004ca11e2a0c81231380ff428_7.jpg，url最后的“_7”是指7号大小的缩略图。尝试把这个数字改大或改小，可以看到同一张图的不同尺寸版本。
使用这一策略的缺点是需要在上传图片时进行转码，可能增加上传所需的时间。可以考虑使用云转码或服务器端自行处理。

2、提高图片传输速度
a) 使用更高性能的图片托管
将大量的照片储存在自己的服务器上一般不是个好主意。当访问量较大时，自有服务器可能承受较大的压力，并且不能很方便地随访问量增加服务器吞吐量。如果可能的话，推荐使用一个托管的云存储，比如Amazon S3（AWS | Amazon Simple Storage Service (S3)）。
b) 使用CDN
CDN（Content delivery network）能帮助访问者从较近的节点获取内容，尤其是对于图片类应用非常适合。现在的云CDN很多完全按照请求次数和传输流量收费，很适合初创期。

3、提高图片传输并行程度
a) 使用多个而不是一个域名访问图片
大多数浏览器中，对于同一域名下的并发HTTP请求数是有限制的，一般为几个。当页面中图片数量较多时，可以考虑分配不用的域名来访问。比如，原本的图片托管域名为image.foo.com，可以考虑增加几个子域名，如image-1.foo.com、image-2.foo.com等，将他们都CNAME到image.foo.com。然后在你的页面中，当需要访问图片时，随机分配所用的域名。

4、提前/延迟加载图片
确切的说，是指在预测到该图片即将被用户看到时才加载。lazyload是一种常见的策略，是指在用户scroll的过程中，当viewport即将到达该图片时才异步地加载图片。

另外，如果是页面UI中的用图（按钮、图标等），还可以考虑用CSS Sprite，将多次网络请求归并成一次。

编辑于 2014-11-30添加评论

zhanghb，code for food@upyun

对于图片类的静态文件。可以参考一下国内的花瓣网或者国外的Pinterest。想要静态文件的加速。加入CDN网络的支持是必不可少的。可是这还不够。图片类文件还需要有各个版本的缩略图的处理。这些来说国内做的比较好的云处理和CDN加速目前有又拍云和七牛。欢迎在做好网站规划的同时接入试用一下。


利益相关：upyun技术。