web前端压缩图片方法——加快页面加载速度

对于web前端页面开发，图片是一个很重要的组成部分。为了达到图文并茂的效果，我们希望页面中能有更多的图片，但是从页面加载的速度讲，过多过大的图片都会拖慢加载速度。于是对于图片的压缩处理就显得特别重要。下面分享一下我目前使用的几个处理方法。

1.七牛服务器提供的压缩图片的方法

   我们公司APP目前使用的图片和视频文件都存在七牛服务器上，作为目前国内知名的云存储服务商，七牛官方提供了很好的图片处理API。

   一般来讲，用户看到的文字、图片等都是由运营上传的，如果运营直接在后台上传了一张很大的图片，那么前端页面在加载的时候就会较慢，有可能图片会有明显的加载过程，这个时候，就需要我们对图片进行处理了，比如我们公司的logo图标，地址是：点击打开链接。尺寸是1024*1024，大小是80.7kb，但是我只是需要在微信分享链接中使用这个图片，根本不需要这么大尺寸的图片，那么就很有必要压缩一下了，比如在这个图片的链接地址后面添加参数：?imageView2/2/w/300，就能够把这张图片压缩到300*300，大小为28.9kb。这样这张图片的加载速度就会加快很多。

2.使用图片压缩软件

  软件地址：图片压缩工具。直接将图片上传就可以压缩图片，很适合运营用。

3.图片使用懒加载技术

  可使用lazyload.js插件，对于DOM中本来就有的<img>标签，懒加载没有任何问题，但是在我做的一个项目中，项目中的图片是用underscore.js模板加载的，实际调试发现lazyload.js未实现图片懒加载，这个问题后续解决了再写上来。如果有童鞋知道怎么解决的，请不吝赐教。