Webpack优化 - 图片

目录

前言

图片压缩

减少请求数量

使用iconfont替代图标；

使用雪碧图；

使用svg或者base64替代

在合适的地方放置合适的大小

方案一：css：media

方案二： img[srcset]

html

css image-set()

显示优化，逐步加载图片

方案一：使用统一占位符，比如loading，或者其他图片；

方案二：使用LQIP 和 SQIP

---

前言

图片优化方案，一般讲究选择正确的格式，减少体积，减少请求数量，在合适的地方放置合适的图片大小，显示优化。

图片压缩

推荐线上压缩：tinypng

减少请求数量

使用iconfont替代图标；

iconfont相信大家已经用的很熟悉了，我就不多说了。不熟悉的请戳官网：阿里图标库

使用雪碧图；

这边使用webpack-spritesmith来做优化

• 安装

yarn add webpack-spritesmith --save-dev

• 配置vue.config.js

例如优化  src/assets/login/qr 下面 png 格式的图片，可以这样配置：

module.exports = {
    configureWebpack: {
        ...
        resolve: {
           modules:["src/assets/login/spritesmith-generated", "node_modules"]
        }
    },
    chainWebpack(config) {
     config
      .plugin('webpack-spritesmith')
      .use(new SpritesmithPlugin({
        src: {
          cwd: resolve('src/assets/login/qr'),
          glob: '*.png'
        },
        target: {
          image: resolve('src/assets/login/spritesmith-generated/sprite.png'),
          css: resolve('src/assets/login/spritesmith-generated/sprite.scss')
        },
        apiOptions: {
          cssImageRef: "~sprite.png"
        }
      }))
      .end()
      ...
  }

• yarn dev 后生成结果

 如上图可见，生成了 spritesmith-generated 这个目录，以及目录下面的两个文件。这两个文件，png这个是已经合成好的雪碧图，scss这个是具体的position读取。

• 使用

  @import '~sprite.scss';
    .open {
        @include sprite($open);
    }

•  其他说明

webpack5中：resolve.modules 指定 webpack 解析模块时应该搜索的目录。

webpack-spritesmith：

（1）src 目标图片位置【before】

（2）target 生成文件位置【after】

（3）apiOptions.cssImageRef：合成出来的雪碧图位置在css文件中的体现

//@sprite.scss

$tszb-name: 'tszb';
$tszb-x: 0px;
$tszb-y: 0px;
$tszb-offset-x: 0px;
$tszb-offset-y: 0px;
$tszb-width: 256px;
$tszb-height: 256px;
$tszb-total-width: 512px;
$tszb-total-height: 256px;
$tszb-image: '~sprite.png'; //主要配置这个
$tszb: (0px, 0px, 0px, 0px, 256px, 256px, 512px, 256px, '~sprite.png', 'tszb', );

（4）可以加一个配置，使得不那么紧凑

        spritesmithOptions: {
          padding: 20
        }

（5） 如果想对生成的文件自定义，可以设置 customTemplates，详见官网

使用svg或者base64替代

svg，可以在 iconfont-阿里巴巴矢量图标库 上下载；

base64，可以在线生成。

在合适的地方放置合适的大小

比如：我们没必要在1200*700上显示1920*1080的图片，反之又会模糊掉

方案一：css：media

@media screen and (max-width: 1000px){
    body {
      background-image: url(./bg_1.jpeg);
    }
  }
@media screen and (max-width: 1500px){
    body {
      background-image: url(./bg_2.jpeg);
    }
  }

方案二： img[srcset]

html

<img src="image-400.png"
  srcset="image-400.png 400w, image-800.png 800w, image-1280.png 1280w"
  sizes="(max-width: 400px) 300w, 1280w"
/>

<img src="image-1x.png" srcset="image-2x.png 2x"/>

2x、3x是像素密度

400w、800w 表示浏览器的宽度限制，即在400px像素以下显示image-400.png，在400px到800px之间，显示显示image-800.png

sizes="(max-width: 400px) 300w, 1280w" 

表示：在浏览器视口在400px的时候，图片显示300px的宽度，其他时候显示1280px的宽度

css image-set()

body {
    background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
    background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}

显示优化，逐步加载图片

我们一般会在图片还未加载完之前，使用占位符

方案一：使用统一占位符，比如loading，或者其他图片；

方案二：使用LQIP 和 SQIP

LQIP 和 SQIP 都能生成对应图片的低质量占位符。

下面为 lqip 处理的图片 ：

官网： LQIP   SQIP   lqip-loader

其他

图片的其他优化方案例如：图片格式的选择、响应式图片优化等，大佬们都早已介绍过了，渣渣表示也还在学习中。。等后续，要是有所感悟，再过来补充。

扩展

Web性能优化：图片优化 - 前端兔子喵 - 博客园

Web前端开发好不好学 如何更好的实现图片优化_Imgix