后台用户上传的图片往往很大,并且现在iphone手机的图片质量大的都高达几M,而在移动端展示时,即便做了懒加载,如vue-lazyLoad,也会很影响性能。移动端的图片一般控制在100K以内,否则3g网络加载太慢,会出现白屏现象。目前遇到的场景,图片都存放在阿里云的cdn上,从而可以采用阿里云的图片质量变换进行压缩图片。
阿里云图片压缩
https://help.aliyun.com/document_detail/32243.html
e.g.
<img :src="detailData.logo ? imgUrl + detailData.logo + ‘?x-oss-process=image/quality,Q_40‘ : ‘../static/imgs/default-pic.png‘" class="user-pic" />
压缩后的图片大概在100K以内,对后台用户上传的图片尽量不做限制,在实际展示时进行压缩。
参考: