图片优化
前面的话
本文将详细介绍前端项目中的图片相关的优化方案
图片格式
目前在前端的开发中常用的图片格式有jpg、png、gif，png8、png24、png32、svg和webp
【gif】
gif是无损的，具有文件小、支持动画及透明的优点。但gif无法支持半透明，且仅支持8bit的索引色，即在整个图片中，只能存在256种不同的颜色
但实际上，gif是一种逐渐被抛弃的图片格式。png格式的出现就是为了替代它
由于gif支持动画的这个“一招鲜”的本领，在网络中仍然占有一席之地，主要用于一些小图标
【jpg】
jpg又称为jpeg，是有损的，但采用了直接色，保证了色彩的丰富性。jpg图片支持透明和半透明，所有空白区域填充白色
jpg格式主要用于高清图、摄影图等大图
【png8】
png8是无损的，是png的索引色版本
前面提到过，png是gif格式的替代者，在相同图片效果下，png8具有更小的文件体积，且支持透明度的调节
但png8不支持半透明，也不支持动画
【png24】
png24是无损的，是png的直接色版本。
png24支持透明，也支持半透明，但png有文件体积较大的缺点
png24的目标是替换jpg。但一般而言，png24的文件大小是jpg的5倍之多，但显示效果却只有一点点提升
【png32】
png32是在png24的基础上，添加了8位的alpha通道信息，可以支持透明和半透明，且支持图层，辅助线等复杂数据的保存
使用ps导出的透明的png24图片，实际上是阉割版的png32，因为只有32位的png图片才支持透明，阉割版是说导出的图片不支持图层
【SVG】
svg是无损的矢量图。svg与上面这些图片格式最大的不同是，上面的图片格式都是位图，而svg是矢量图，具有无论如何缩放都不会失真的优点
svg格式非常适用于绘制logo、图标等
但由于低版本浏览器支持不足，应用不广泛
【webp】
WebP 格式是 Google 于2010年发布的一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。它具有较优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。目前，知名网站 Youtube 、Facebook、Ebay 等均有使用 WebP格式。
WebP 集合了多种图片文件格式的特点，JPEG 适合压缩照片和其他细节丰富的图片，GIF 可以显示动态图片，PNG 支持透明图像，图片色彩非常丰富，而 WebP 则兼具上述优点，且较于它们还有更出色的地方。
无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小，即使 PNG 文件经过其他压缩工具压缩后，WebP 还是可以减少 28% 的文件大小。此外，与 JPEG 相比，在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%，而 WebP 在压缩方面比 JPEG 格式更优越
但目前为止，webp只能在安卓系统下使用
PS保存
一般地，在对设计图进行修改前，首先要保留一份psd源文本，然后再在其副本上进行修改
通过photoshop将设计图切成需要的素材时，涉及到图片格式的设置问题，应注意以下几点：
1、当图片色彩丰富且无透明要求时，建议保存为jpg格式并选择合适的品质，一般为60-80
2、当图片色彩不太丰富时无论有无透明要求，保存为PNG8格式(特点是只有256种颜色，文件本身比较小)，保存时选择无仿色，无杂边
3、当图片有半透明要求时，保存PNG24格式(对图片不进行压缩，所有相对比较大)
懒加载
图片延迟加载也称为懒加载，延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。可以减少请求数或者延迟请求数，优化性能
【呈现形式】
一般而言，有以下三种呈现形式
1、延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载前就离开，自然就不会进行加载
2、条件加载，符合某些条件或者触发了某些条件才开始异步加载
3、可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有太长时间的停顿
【基本步骤】
1、待加载的图片默认加载一张占位图
2、使用data-src属性保存真正地址
3、当触发某些条件时，自动改变该区域的图片的src属性为真实的地址
【可视区域加载】
可视区域加载，是图片懒加载最常用的一种形式，涉及到的细节如下所示：
1、判断可视区域
图片顶部距离页面顶部的高度小于页面高度
2、保存图片路径
待加载的图片默认加载一张占位图，使用data-src属性保存真正的地址
3、判断加载时机
监听页面的scroll事件，收集当前进入页面的图片元素，给src赋值为真正的地址，给已加载的图片添加标记
4、滚动性能提升
使用函数节流优化滚动性能
代码如下所示：
const oList = document.getElementById('list') const viewHeight = oList.clientHeight const eles = document.querySelectorAll('img[data-src]') const lazyLoad = () => { Array.prototype.forEach.call(eles, item => { const rect = item.getBoundingClientRect() if (rect.top <= viewHeight && !item.isLoaded) { item.isLoaded = true const oImg = new Image() oImg.onload = () => { item.src = oImg.src } oImg.src = item.getAttribute('data-src') } }) } const throttle = (fn, wait=100) =>{ return function() { if(fn.timer) return fn.timer = setTimeout(() => { fn.apply(this, arguments) fn.timer = null }, wait) } } lazyLoad() oList.addEventListener('scroll', throttle(lazyLoad))
效果如下
懒加载进阶
上面代码的问题在于，每次调用getBoundingClientRect()方法时，都会触发回流，严重地影响性能
可以使用Intersection Observer这一API来解决问题，可以异步观察目标元素与祖先元素或顶层文件的交集变化
创建一个 IntersectionObserver对象并传入相应参数和回调用函数，该回调函数将会在target 元素和root的交集大小超过threshold规定的大小时候被执行
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var callback = function(entries, observer) {
/* Content excerpted, show below */
};
var observer = new IntersectionObserver(callback, options);
如果root参数指定为null或者不指定的时候默认使用浏览器视口做为root
rootMargin表示root元素的外边距。该属性值是用作root元素和target发生交集时的计算交集的区域范围，使用该属性可以控制root元素每一边的收缩或者扩张。默认值为0
threshold可以是单一的number也可以是number数组，target元素和root元素相交程度达到该值的时候，将会被执行
如果只是想要探测当target元素的在root元素中的可见性超过50%的时候，可以指定该属性值为0.5。如果想要target元素在root元素的可见程度每多25%就执行一次回调，那么可以指定一个数组[0, 0.25, 0.5, 0.75, 1]。默认值是0(意味着只要有一个target像素出现在root元素中，回调函数将会被执行)。该值为1.0含义是当target完全出现在root元素时回调才会被执行
为每个观察者配置一个目标
var target = document.querySelector('#listItem')
observer.observe(target)
当目标满足该IntersectionObserver指定的threshold值，回调被调用
var callback = function(entries, observer) {
entries.forEach(entry => {
entry.time;
entry.rootBounds;
entry.boundingClientRect;
entry.intersectionRect;
entry.intersectionRatio;
entry.target;
});
};
time： 可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
intersectionRatio： 目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1 ，完全不可见时小于等于 0
boundingClientRect： 目标元素的矩形区域的信息
intersectionRect： 目标元素与视口（或根元素）的交叉区域的信息
rootBounds： 根元素的矩形区域的信息，getBoundingClientRect() 方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null
isIntersecting： 是否进入了视口，boolean 值
target： 被观察的目标元素，是一个 DOM 节点对象
代码如下所示：
const eles = document.querySelectorAll('img[data-src]') const observer = new IntersectionObserver( entries => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { let oImg = entry.target oImg.src = oImg.getAttribute('data-src') observer.unobserve(oImg) } }) }, { root: document.getElementById('list') }) eles.forEach(item => { observer.observe(item) })
预加载
预加载图片是提升用户体验的一个好办法，提前加载用户所需的图片，保证图片快速、无缝发布，使用户在浏览器网站时获得更好用户体验。常用于图片画廊等应用中
【使用场景】
以下几个场景中，可以使用图片预加载
1、在首屏加载之前，缩短白屏时间
2、在空闲时间为SPA的下一屏预加载
3、预测用户操作，预先加载数据
【三种思路】
一般来说，实现预加载有三种思路：
1、使用页面无用元素的背景图片来进行图片预加载
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<ul class="list">
<li id="preload1"></li>
<li id="preload2"></li>
<li id="preload3"></li>
<li id="preload4"></li>
</ul>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = array[iNow];
}
function preLoadImg(){
preload1.style.background = "url('img/img1.gif')";
preload2.style.background = "url('img/img2.gif')";
preload3.style.background = "url('img/img3.gif')";
preload4.style.background = "url('img/img4.gif')";
}
window.onload = function(){
preLoadImg();
}
</script>
2、通过new Image()或document.createElement('img')创建img标签，然后通过img的src属性来加载图片
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = array[iNow];
}
var aImages = [];
function preLoadImg(array){
for(var i = 0, len = preLoadImg.arguments[0].length; i < len; i++){
aImages[i] = new Image();
aImages[i].src = preLoadImg.arguments[0][i];
}
}
window.onload = function(){
preLoadImg(array);
}
</script>
3、通过XHR对象发送ajax请求来获取图片，但只能获取同域图片
【onload和onerror】
通过添加onload和onerror这两个事件钩子，可以实现图片在加载完成和加载失败时的函数回调。多个资源加载可以计算出大体进度，如3/10
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = array[iNow];
}
var iDown = 0;
var oImage = new Image();
function preLoadImg(arr){
function loadImgTest(arr){
iDown++;
if(iDown < arr.length){
preLoadImg(arr);
}else{
alert('ok');
oImg.onload = null;
oImg = null;
}
}
oImage.onload = function(){
loadImgTest(arr);
};
oImage.onerror = function(){
loadImgTest(arr);
};
oImage.src = arr[iDown];
}
preLoadImg(array);
</script>
将预加载写成一个通用的资源加载器，代码如下
let isFunc = function(f){
return typeof f === 'function'
}
function resLoader(config){
this.option = {
resourceType: 'image',
baseUrl: '',
resources: [],
onStart: null,
onProgress: null,
onComplete: null
}
if(config){
for(i in config){
this.options[i] = config[i]
}
} else {
alert('参数错误')
return
}
// 加载器状态 0:未启动 1:正在加载 2:加载完毕
this.status = 0
this.total = this.option.resources.length || 0
this.currentIndex = 0
}
resLoader.prototype.start = function(){
this.status = 1
let _this = this
let baseUrl = this.option.baseUrl
for(var i = 0, l = this.option.resources.length; i < l; i++){
let r = this.option.resources[i],
url = ''
if(r.indexOf('http://) === 0 || r.indexOf('https://') === 0){
url = r
} else {
url = baseUrl + r
}
let image = new Image()
image.onload = function(){_this.loaded()}
image.onerror = function(){_this.loaded()}
image.src = url
}
if(isFunc(this.option.onStart)){
this.option.onStart(this.total)
}
}
resloader.prototype.loaded = funtion(){
if(isFunc(this.option.onProgress)){
this.option.onProgress(++this.currentIndex, this.total)
}
if(this.currentIndex === this.total){
if(isFunc(this.option.onComplete)){
this.option.onComplete(this.total)
}
}
}
let loader = new resLoader({
resources: ['img1.png','img2.png','img3.png'],
onStart: function(total){
console.log('start:' + total)
},
onProgress: function(current, total){
console.log(current+ '/' + total)
let percent = current/total*100
},
onComplete: function(total){
console.log('加载完毕:' + total + '个资源')
}
})
loader.start()
Webp
在安卓下可以使用webp格式的图片，它具有更优的图像数据压缩算法，能带来更小的图片体积，同等画面质量下，体积比jpg、png少了25%以上，而且同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性
【检测】
是否支持webp格式的图片的检测方法如下
const isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0
【七牛自动转换】
七牛支持自动将其他格式的图片转换成webp格式的图片，只需添加在图片地址之后添加?imageView2/2/format/webp
下面是详细代码
/** * 若该浏览器支持webp格式，则将返回webp图片的url，否则返回原url * @param {string} 'https://static.xiaohuochai.site/20180612030117.png' * @return {string} 'https://static.xiaohuochai.site/20180612030117.png?imageView2/1/format/webp' */ export const getUrlWithWebp = url => { const isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0 if (isSupportWebp) { return `${url}?imageView2/2/format/webp` } return url }
【pageSpeed】
Google开发的PageSpeed模块有一个功能，会自动将图像转换成WebP格式或者是浏览器所支持的其它格式
以nginx为例，它的设置很简单
1、在http模块开启pagespeed属性
pagespeed on; pagespeed FileCachePath "/var/cache/ngx_pagespeed/";
2、在主机配置添加如下一行代码，就能启用这个特性
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;
CDN
图片性能的最后一步就是分发了。所有资源都可以从使用 CDN 中受益
CDN 可以降低从图片站点提供自适应和高性能图片的复杂度。大多数CDN都可以根据设备和浏览器进行尺寸调整、裁剪和确定最合适的格式，甚至更多 —— 压缩、检测像素密度、水印、人脸识别和允许后期处理。借助这些强大的功能和能够将参数附到 URL 中，使得提供以用户为中心的图片变得轻而易举了
以七牛云为例，imageView2 提供简单快捷的图片格式转换、缩略、剪裁功能。只需要填写几个参数，即可对图片进行缩略操作，生成各种缩略图
// 裁剪正中部分，等比缩小生成200x200缩略图 http://odum9helk.qnssl.com/resource/gogopher.jpg?imageView2/1/w/200/h/200 // 宽度固定为200px，高度等比缩小，生成200x133缩略图 http://odum9helk.qnssl.com/resource/gogopher.jpg?imageView2/2/w/200
Vue图片优化
下面来介绍一个VUE下的插件vue-lazyload，可以实现图片或背景图片的懒加载、使用webp图片等效果
首先，使用npm安装
npm install vue-lazyload -D
【基础使用】
在main.js中，使用该插件
import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // or with options Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 }) new Vue({ el: 'body', components: { App } })
在模板中使用v-lazy来保存图片的真实地址
<ul> <li v-for="img in list"> <img v-lazy="img.src" > </li> </ul>
或者使用v-lazy-container配合图片的data-src属性
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"> <img data-src="//domain.com/img1.jpg"> <img data-src="//domain.com/img2.jpg"> <img data-src="//domain.com/img3.jpg"> </div>
<div v-lazy-container="{ selector: 'img' }"> <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg"> <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg"> <img data-src="//domain.com/img3.jpg"> </div>
【参数说明】
vue-lazyload相关配置的参数说明
key 描述 默认值 类型 preLoad 预加载的宽高比 1.3 Number error 图片加载失败时使用的图片源 'data-src' String loading 图片加载的路径 'data-src' String attempt 尝试加载次数 3 Number listenEvents 想让vue监听的事件 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] adapter 动态修改元素属性 { } filter 图像的SRC过滤器 { } lazyComponent 懒加载组件 false
比如，可以使用如下的配置
Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1, listenEvents: [ 'scroll' ] })
【动态修改图片的URL】
Vue.use(vueLazy, { filter: { progressive (listener, options) { const isCDN = /qiniudn.com/ if (isCDN.test(listener.src)) { listener.el.setAttribute('lazy-progressive', 'true') listener.loading = listener.src + '?imageView2/1/w/10/h/10' } }, webp (listener, options) { if (!options.supportWebp) return const isCDN = /qiniudn.com/ if (isCDN.test(listener.src)) { listener.src += '?imageView2/2/format/webp' } } } })
【设置事件钩子】
Vue.use(vueLazy, { adapter: { loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) { // do something here // example for call LoadedHandler LoadedHandler(el) }, loading (listender, Init) { console.log('loading') }, error (listender, Init) { console.log('error') } } })
【使用IntersectionObserver】
Vue.use(vueLazy, { // set observer to true observer: true, // optional observerOptions: { rootMargin: '0px', threshold: 0.1 } })
【懒加载组件】
Vue.use(VueLazyload, { lazyComponent: true });
<lazy-component @show="handler"> <img class="mini-cover" :src="img.src" width="100%" height="400"> </lazy-component> <script> { ... methods: { handler (component) { console.log('this component is showing') } } } </script>
【组件中为图片或背景图片使用懒加载】
<script> export default { data () { return { imgObj: { src: 'http://xx.com/logo.png', error: 'http://xx.com/error.png', loading: 'http://xx.com/loading-spin.svg' }, imgUrl: 'http://xx.com/logo.png' // String } } } </script> <template> <div ref="container"> <img v-lazy="imgUrl"/> <div v-lazy:background-image="imgUrl"></div> <!-- with customer error and loading --> <img v-lazy="imgObj"/> <div v-lazy:background-image="imgObj"></div> <!-- Customer scrollable element --> <img v-lazy.container ="imgUrl"/> <div v-lazy:background-image.container="img"></div> <!-- srcset --> <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w"> <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" /> </div> </template>
【CSS状态】
<img src="imgUrl" lazy="loading"> <img src="imgUrl" lazy="loaded"> <img src="imgUrl" lazy="error">
<style> img[lazy=loading] { /*your style here*/ } img[lazy=error] { /*your style here*/ } img[lazy=loaded] { /*your style here*/ } /* or background-image */ .yourclass[lazy=loading] { /*your style here*/ } .yourclass[lazy=error] { /*your style here*/ } .yourclass[lazy=loaded] { /*your style here*/ } </style>
下面是前端小站中vue-lazyload插件的使用
// main.js import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { loading: require('./assets/imgs/loading.gif'), listenEvents: ['scroll'], filter: { webp(listener, options) { if (!options.supportWebp) return const isCDN = /xiaohuochai.site/ if (isCDN.test(listener.src)) { listener.src += '?imageView2/2/format/webp' } } } })
// homeCategory.vue <ul v-lazy:background-image="require('@/assets/imgs/match-bg.jpg')">
好的代码像粥一样，都是用时间熬出来的
