广东拓思软件科学园有限公司 510663
摘要：本文涉及PC端和移动端的高清图片的快速展示，其目的是实现一种图片的快速查看方案，能够有效地提高用户查看图片的速度，对于较大图片，实现不全部下载即可局部预览高清大图，提高用户感知度并且节省流量。
关键词：内容分发网络；高清图片；分块分级结构
0 背景技术
现在市场上的图片等静态内容加速多用CDN的方式来解决，（CDN全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。）但是当图片较大时即便有CDN的加速，也依然需要加载很久甚至没法展示。有些情况下，客户是需要看到高清的大图片的，这样传统的图片处理方式就无法满足高清大图的快速展示和流量控制，而且，传统的CDN加速方式，在图片较大的情况下，需对图片本身进行切割，分成若干个小图片，然后再进行CDN的加速，这样会先耗费一定的精力用于图片的分割，而且，不管对图片是否进行分割，用户在看到这幅图片的时候，如果需要查看部分高清图片是需要把图片全部下载下来，而这样会耗费很多流量。本文介绍一种PC端和移动端的高清图片的快速展示方法。
1 方案技术原理
技术原理是通过读取图片信息并构建图像分块分级结构（这一过程在程序内部执行），比如一副20M的图片，先建立图像分块分级结构，建立了N级的展示层级，每一级对应了不同的分辨率。当用户想看到这幅图像时，根据用户当前请求的内容区域的大小，找到对应的区块和层级，从对应的层级中读取相应的像素并返回给用户。当用户进行图像的缩放时，在读取当前层级的下一层级，这样，每次都从对应的层级中去读取，而不是从整个图像中去获取要请求的像素，极大的加快了图像的展示速度。
在创建好图像分块分级结构后，会自动生成一个新的访问地址。在用户通过该地址发送请求的时候，自动将用户请求区域在内存中进行网格化划分，然后利用多线程IO技术，动态读取每个网格区域内的像素信息，极大程度的减少了读取图片的IO瓶颈。
本方案是一种极速部署应用的模式，前期不对图片进行任何处理，直接部署，直接可以让用户感受到带来的便利，极大的提高了企业的工作效率，降低了人力成本。
系统处理流程图如图1所示：
图1 系统处理流程图
2 方案关键技术点
本方案的关键是提高图片的载入速度，从以下四方面着手：
1）减小图片尺寸
a）压缩图片
对于图片，无论是照片还是较规则的几何图形，都可以寻找到相对优秀的压缩格式。比如，对于普通的照片，JPEG就能很大程度上提供较高的压缩率；而PNG更适合需要清晰边缘的几何图形。可以根据分享的图片的主要特点和清晰度要求选取合适的压缩格式和压缩率。对于网页上显示的普通照片，经过压缩后可以达到50k以下的尺寸。
b）使用缩略图/多尺寸版本
在图片的展示中，往往需要不同的尺寸。此时如果对不同的尺寸使用相应大小的缩略图，则可以减少不必要的网络开销。比如在列表视图中使用一个较小的版本，而在点击后显示一个较大的版本。如http：//192.168.89.36/f4947c1004ca11e2a0c81231380ff428_7.jpg，url最后的“_7”是指7号大小的缩略图。尝试把这个数字改大或改小，可以看到同一张图的不同尺寸版本。使用这一策略的缺点是需要在上传图片时进行转码，可能增加上传所需的时间。可以考虑使用云转码或服务器端自行处理。
2）提高图片传输速度
a）使用更高性能的图片托管
将大量的照片储存在自己的服务器上一般不是个好主意。当访问量较大时，自有服务器可能承受较大的压力，并且不能很方便地随访问量增加服务器吞吐量。
b）使用CDN
CDN（Content delivery network）能帮助访问者从较近的节点获取内容，尤其是对于图片类应用非常适合。
3）提高图片传输并行程度，使用多个而不是一个域名访问图片
大多数浏览器中，对于同一域名下的并发HTTP请求数是有限制的，一般为几个。当页面中图片数量较多时，可以考虑分配不用的域名来访问。比如，原本的图片托管域名为http：//image.foo.com，可以考虑增加几个子域名，如http：//image-1.foo.com、http：//image-2.foo.com等，将他们都CNAME到http：//image.foo.com。然后在你的页面中，当需要访问图片时，随机分配所用的域名。
4）提前/延迟加载图片
确切的说，是指在预测到该图片即将被用户看到时才加载。lazyload是一种常见的策略，是指在用户scroll的过程中，当viewport即将到达该图片时才异步地加载图片。
3 结束语
本文介绍了一种高清图片的快速查看方案，可以大大提高用户查看高清图片的效率以及节省用户的流量。
参考文献：
[1]李峰，陈志刚，储金宇．图像清晰度检测方法［Ｊ］．计算机工程与设计，2006，27（9）：1545-1546．
[2]徐建华.图像处理与分析.北京，科学出版社，1992，1.
[3]徐贵力，刘小霞，田裕鹏，等．一种图像清晰度评价方法［Ｊ］．红外与激光工程，2009，38（1）：180－184．
论文作者:曾子丹
论文发表刊物:《基层建设》2017年第19期
论文发表时间:2017/11/8
标签：图片论文; 用户论文; 层级论文; 图像论文; 方案论文; 内容论文; 较大论文; 《基层建设》2017年第19期论文;