WEB开发中合理选择图片格式

判断一个网页设计师是否优秀，可以从其在WEB开发（或网页设计）中是否合理的采用各种图片格式得出结论。事实上，或许所有人都知道图片存在GIF,JPG和PNG等格式，但并非所有人都知道它们之间的具体区别和使用技巧。

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

• 使用方法

  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描述符表示图像的设备像素比
  

逐步加载图片

• 使用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

  • 使用方法

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

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

代替图片

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

关注作者公众号，不断分享技术文章