JPEG

联合国图像专家小组是一种针对彩色照片而广泛使用的压损图形格式
介绍：栅格图形，常用文件扩展名为.jpg，也有.jpeg,.jpe,jpeg在互联网上常被应用于存储和传输照片

不适合：线条图形和文子，图标图形，因为他的压缩算法不在这些类型的图形，并且不支持透明

非常合适：颜色丰富的照片，彩色图大焦点图，通栏banner图，结构不规则的图形

PNG

便携式网络图形是一种无压缩的图形格式，支持索引，灰度，RGB，三种颜色

介绍：栅格图像，PNG最初作为代替GIF来设计的，能够显示256色，文件比JPEG大，但是PNG非常好的保留图像的质量。支持Alpha通道半透明和透明特性。最高支持24位彩色图像和8位灰度图像

不合适：由于无损存储，彩色图像体积太大，所以不合适

合适：纯色,透明。线条绘图，图标，边缘清晰，有大块相同颜色区域，颜色数较少但需要半透明

GIF

图像互换格式是一种位图形文件格式，以8位色(既256中颜色)重现真彩色的图图像，才有LZW雅俗算法进行编码

介绍：栅格图像，支持256色，仅支持完成透明和完全不透明；如果需要比较通用的动画，GIF是唯一的选择

不合适：每个像素只有8比特，不适合存储彩色图片

合适：动画，图标

webp

是一种现代图像格式，可为图像提供无压缩和有损压缩，这使得他非常灵活，有Google在购买On2 Technologies后发展出了，以BSD授权条款发布

介绍:优秀算法能同时保证一定程度上的图像质量和较小的体积，可以插入多帧，实现动画效果，可以设置透明度，采用8位压缩算法，无损的webp比png小26%，有损的webp比JPEG小25-34%，比GIF有更好的动画

不合适：最多处理256色，不适合彩色图片

合适：适用于图行和半透明图像

用工具进行图片压缩

压缩png

• 使用node-pngquant-native
• 跨品台，压缩比高，
• 安装 cnpm install node-pngquant-native cnpm install jdf-png-bative

• 使用方法

  var pngquant = reuqire('node-pngquant-native')
  var fs = require('fs')
  fa.readFile('图片地址',function(err,buffer) {
      if(err) throw err
      var resBuffer = pngquant.option({}).compress(buffer)
      fs.writeFile('输出图片名称',resBuffer,{
          flags:'wb'
      },function(err){})
  })

  压缩jpg

  • 使用jpegtran
  • 跨品台，有linux,mac,windows的解决方案
  • 安装 cnpm i jpegtran -g

  • 使用方法

    jpegtran -copy none -optimize -outfile 压缩之后图片 in 要压缩图片

• 压缩gif

  • Gifsicle 通过改变每帧的比例，减少gif文件大小，同时可以有使用透明来达到更小文件大小，

  • 使用方式

    • 优化级别设置不小于2,1的话基本不压缩，gifsicle --optimize=3 -o out.gif in.gif
    • 将透明部分截取gifsicle --optimize=3 --crop-transparency -o out.gif in.gif

响应式图片

• javascript绑定事件监测窗口大小

• CSS媒体查询

  @media screen and (max-width:640px) {
      my_images{width:640px}
  }

  • img标签属性

  <img srcset="img-320w.jpg,img-640w.jpg 2x,img-960.jpg 3x" src="img-960w.jpg" ></img>
  x描述符表示图像的设备像素比

代替图片

• 使用Data URI代替图片
• web Font代替图片
• 采用Image spritinh（雪碧图）

逐步加载图片

• 使用LQIP
• 低质量图像占位符

• 安装 cnpm install lqip

  使用方法

  const lqip = require('lqip')
  
  const file = './1_govern66.jpg'
  lqip.base64(file).then(res => {
      console.log(res);
  })
  
  lqip.palette(file).then(res => {
      console.log(res);
  })

  通过运行node 会把图片的base64位打印出来，

• 使用SQIP

• 基于SVG的图像占位符

  • 安装cnpm install sqip

  • 使用方法

    const sqip = require('sqip')
    
    const result = sqip({
        filename: './1_govern66.jpg',
        numberOfPrimitives: 10
    })
    console.log(result.final_svg);

  • 通过运行node打印的结果是把图片转换成SVG的格式

以后就是常见的前端对图片的优化方案