主要从两个角度来优化图片:
①降低图片的大小,即对图片进行合理的压缩
②进行响应式加载图片
③使用一些自动优化的cdn或者插件进行合理的优化
首先:图片优化首先要根据你所想适应的场景进行合理选择图片的格式
①降低图片的大小,即对图片进行合理的压缩
比如说压缩png格式图片,可以选择TinyPNG:一个压缩PNG的神站
②进行响应式加载图片
响应式加载图片即当页面对图片请求是,根据用户的设备来来请求不同分辨率的图片,如一个小屏幕低dpi的设备的用户,可以请求一个压缩后或者一倍图,但是如果一个高清屏幕高dpi的用户,则可以请求一个高倍图高清图,增加用户体验。
③使用一些自动优化的cdn或者插件进行合理的优化**
1. 自动优化:CDN:
向CDN请求图片的URL参数中包含了图片处理的参数(格式、宽高等),CDN服务器根据请求生成所需的图片,发送到用户浏览器。
推荐好用的CDN,七牛云https://www.qiniu.com/
又拍云https://www.upyun.com/
CDN的图片处理接口极其丰富,覆盖了图片的大部分基本操作,例如:
图片裁剪,支持多种裁剪方式(如按长边、短边、填充、拉伸等)
图片格式转换,支持JPG, GIF, PNG, WebP等,支持不同的图片压缩率
图片处理,支持图片水印、高斯模糊、重心处理等
2. 自动优化的插件:Grunt/Gulp:
这款grunt-image插件功能就十分优秀
3.自动优化:Google PageSpeed
对于Web优化,Google发布了了Google PageSpeed这个服务器模块,可以在apache或ngnix中加载,通过在服务器配置文件中进行设置来进行自动化的优化。对于图片格式转换、图片优化甚至图片LazyLoad都有相关选项。这部分展开会非常长,请感兴趣的同学参考Google的手册。
文章部分内容参考https://www.cnblogs.com/sunshq/p/4154913.html