首页 > > 网页制作 > Javascript >

图片优化

2018-06-24 02:17:48来源：未知阅读 ()

前面的话

　　本文将详细介绍前端项目中的图片相关的优化方案

图片格式

　　目前在前端的开发中常用的图片格式有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不支持半透明，也不支持动画

png

【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')">

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：js-getYear()与getFullYear

下一篇：DNS预解析prefetch

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签