机能优化是前端开辟必不可少的一环，而图片优化又是机能优化中必不可少的一环，但不晓得有若干开辟者在网页的开辟历程中会注重图片的运用，图片运用不当能够会致使网页加载卡顿、网页加载速率慢等题目，这篇文章将会将我以往对图片的处置惩罚做个总结。

差别花样图片好坏对照

有人能够会问说好的图片优化呢？怎样说到图片花样了，实在在差别的场景挑选运用差别花样的图片就是对图片的一种优化，这是最直接最主要然则最轻易被疏忽的，如今网页中常常使用的图片花样有JPG.PNG.SVG.WebP等，接下来我们就来引见它们有何好坏

JPG

JPG花样的图片应当是运用场景最多的图片的花样了，由于JPG花样采用了极为高效的紧缩算法，使其能在紧缩50%以至60%的状况下照旧能够坚持不错的图片质量，因而在网站设想中运用相似背景图，轮播图等大图时都邑斟酌运用JPG花样的图片，然则JPG始终是有损紧缩，在对线条感较强或许颜色比较丰富的图片做工资紧缩时，能够会涌现失真的状况，同时它也不支撑透明度处置惩罚

PNG

PNG花样的图片特性人人都晓得，就是高保真无损紧缩，当对图片设想有较高要求时，首选PNG花样，显现高清细致，然则它也有显著的题目就是体积过大

SVG

SVG花样图片有个显著特性就是它是可编程的，是基于xml语法的，同时作为矢量图，它能够无穷放大而不变形，因而能够轻易的对差别手机屏幕做自适应，比拟于PNG和JPG它的体积更小，只要1kb以至更小，然则它最大的缺点就是衬着本钱太高，因而我们在挑选一些小且颜色单一的图标时能够斟酌运用SVG花样的图片，如图

平常状况下，我们会将SVG花样的图片上传到iconfont上，如许不仅轻易治理而且轻易运用，同时iconfont上另有很多其他设想师设想的优异小图标能够直接拿来运用，是否是很轻易呢？

WebP与gif

这两兄弟我们平常都是用来展现动图的，然则WebP也能够用来展现静态图片，WebP最大的长处就是无损紧缩，体积小，然则浏览器支撑太差，我们来看caniuse的数据：

从图上能够看到WebP花样在苹果装备和IE上基础不支撑，因而浏览器的不支撑是它的硬伤，因而在对动图做展现的时刻我们不能不选gif，即使它的体积很大，衬着开支也大

图片优化计划

图片质量紧缩

图片紧缩应当是图片优化时最常常使用的计划，由于很简朴，只须要将图片上传到tinypng或许智图这类的在线紧缩图片平台，对图片举行紧缩，就能够较小图片质量

雪碧图

雪碧图经常常使用来将多个小图标和成一张图片，然后将合成的图片看成背景图片是运用，如许能够削减图片的收集要求，运用之前能够须要要求10个收集小图标，而运用今后要求一个就能够搞定，我个人一般运用gopng这个网站在线天生，还能够自动天生对应的css代码

base64

将一个图片地点举行base64编码后会获得一串字符串，将这个字符直接放到img的src属性上，你会发明浏览器是能够辨认这一串字符的，不须要发送收集要求直接剖析，如许就能够到达削减收集要求的目标，然则base64编码后的图片质量比原图图片质量要大，因而也只会在一些质量较小的图标类图片上面运用，不然得不偿失，罕见运用base64编码的计划就是webpack的url-loader，举个例子：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

上面的这个设置就是把8k一下的经由过程url-loader举行base64编码，转换成一串DataUrl

css替代简朴图标

这个优化计划应当都懂，实在就是在写代码之前先斟酌一下设想稿内里的哪些内容是能够经由过程代码来完成的，能经由过程代码完成的只管用代码完成，同时完成的时刻多斟酌绘制机能，能运用css3做GPU硬件加速的就只管运用css3属性，这些都能削减图片运用而且不影响衬着机能

相应式图片加载

什么是相应式图片加载？实在就是在差别分辨率的装备上显现差别尺寸的图片，防止资本的糟蹋，常常使用的要领就是css3的媒体查询(media query)，来看个例子：

@media screen and (max-width: 375px) {
  img {
    background-image: url('phone.png');
  }
}
@media screen and (max-width: 768px) {
  img {
    background-image: url('tablet.png');
  }
}

懒加载

图片懒加载的目标就是为加速页面加载速率而做的，为了不让图片一次悉数加载出来，经由过程将图片地点存放在一个img标签的属性上，当图片被滚动到页面上时，在将src属性替代成图片地点来到达懒加载的结果

webpack图片优化

图片紧缩

webpack也能够对图片举行紧缩操纵，经由过程image-webpack-loader能够对输出的图片举行指定质量的紧缩，来看详细例子：

{
test: /\.(png|jpg|gif|svg)$/,
use: [
  'file-loader',
  {
    loader: 'image-webpack-loader',
    options: {
      bypassOnDebug: true,
      mozjpeg: {
        progressive: true,
        quality: 65
      },
      optipng: {
        enabled: false,
      },
      pngquant: {
        quality: '65-90',
        speed: 4
      },
      gifsicle: {
        interlaced: false,
      },
      // the webp option will enable WEBP
      webp: {
        enabled: false,
      },
      limit: 1,
      name: '[name].[ext]?[hash]'
    }
  }]
}

上面的设置指定了各个花样的图片的紧缩质量，而且经由过程hash编码重新命名输出

合成雪碧图

webpack的webpack-spritesmith插件供应了自动合成雪碧图的功用而且能够自动天生对应的央视文件，异常轻易，来看一个详细的例子：

const SpritesmithPlugin = require('webpack-spritesmith')
new SpritesmithPlugin({
  src: {
    cwd: path.resolve(__dirname, 'src/asserts'),
    glob: '*.png'
  },
  target: {
    image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
    css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.css')
  },
  apiOptions: {
    cssImageRef: "src/sprite.png"
  }
})

经由过程上面设置就能将asserts目次下的一切png文件合成雪碧图，而且输出到对应目次，同时还能够天生对应的款式文件，款式文件的语法会依据你设置的款式文件的后缀动态天生，比方这里我们设置的是sprite.css,天生的文件内容就是css语法：

.icon-checkout {
  background-image: url(src/sprite.png);
  background-position: -96px -56px;
  width: 34px;
  height: 32px;
}
.icon-clock {
  background-image: url(src/sprite.png);
  background-position: -96px 0px;
  width: 56px;
  height: 56px;
}
.icon-close {
  background-image: url(src/sprite.png);
  background-position: 0px 0px;
  width: 96px;
  height: 96px;
}

假如将设置中的sprite.css改成sprite.scss那末天生语法就是scss的语法：

@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}

如许就能够依据你项目中运用的款式言语去天生所须要的语法，是否是很轻易呢？

总结

这篇文章简朴引见网页开辟中的各个图片花样的优缺和一些常常使用的图片优化，愿望这篇文章对人人今后在做图片优化时能有所协助。
假如有毛病或不严谨的处所，迎接批评指正，假如喜好，迎接点赞珍藏