浅探前端图片优化

性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程当中会注意图片的使用，图片使用不当可能会致使网页加载卡顿、网页加载速度慢等问题，这篇文章将会将我以往对图片的处理作个总结。

不一样格式图片优劣对比

有人可能会问说好的图片优化呢？怎么说到图片格式了，其实在不一样的场景选择使用不一样格式的图片就是对图片的一种优化，这是最直接最重要可是最容易被忽略的，如今网页中经常使用的图片格式有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);
    }
  }
}

这样就能够根据你项目中使用的样式语言去生成所须要的语法，是否是很方便呢？

总结

这篇文章简单介绍网页开发中的各个图片格式的优缺和一些经常使用的图片优化，但愿这篇文章对你们之后在作图片优化时能有所帮助。
若是有错误或不严谨的地方，欢迎批评指正，若是喜欢，欢迎点赞收藏

来源：https://segmentfault.com/a/1190000017481260