引言

1. 图片压缩。在保证视觉效果的情况下，减少图片的体积。这个很有效，1M 和 100K 的图片，肉眼看起来几乎差不多，但却省了 90% 的流量，大大提高了加载速度。

2. 响应式图片。根据客户端的情况，选择最合适的图片返回给用户。用户是一个 500px 的设备，那么返回 1000px 的图给他就是浪费（假设物理像素和 CSS 像素是一比一）。

图片压缩

url-loader

{
  test: /\.(png|jpe?g|gif|svg)$/,
  use: [{
      loader: "url-loader", // 它封装了file-loader，所以可以使用两个loader的全部配置属性
      options: {
        limit: 1024,
        esModule: false,
        outputPath: 'images' // 设置图片的输出路径
      }
    }
  ]
},

参数说明 > limit是转换成 Base64 的图片大小的零界点设置，单位为 Byte，小于该数值的将进行转换。 esModule是针对是否使用模块化框架的用户设定参数，默认为 true。如果项目中没有使用模块化框架，建议要将这个属性关闭，避免出现图片资源超过 limit，就变成[object Module]的问题。 outputPath图片输出路径，将优化后的图片统一输出到该路径。

image-webpack-loader

{
  test: /\.(png|jpe?g|gif|webp|svg)$/,
  use: [{
      loader: "url-loader",
      options: {
        limit: 1024,
        esModule: false,
        outputPath: 'images'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 70 // 数值越高，质量越好
        },
        optipng: {
          // enabled: false,
          OptimizationLevel: 4 // 默认是3
        },
        pngquant: {
          enabled：false,
          // quality: [0.75,0.95],
          // speed: 4
        },
        gifsicle: {
          interlaced: true, // 默认：false 隔行扫描gif进行渲染
        },
        // webp: {
        //   quality: 75
        // }
      }
    }
  ]
},

如文档所说，image-webpack-loader随附以下优化器，默认情况下会自动启用这些优化器：

• mozjpeg — 压缩 JPEG 图像

• optipng — 压缩 PNG 图像

• pngquant — 压缩 PNG 图像

• svgo — 压缩 SVG 图像

• gifsicle — 压缩 GIF 图像

和可选的优化器：

• webp —将 JPG 和 PNG 图像压缩为 WEBP

可以通过指定禁用默认优化器optimizer.enabled: false，并将其放在选项中即可启用可选优化器。

imagemin-mozjpeg

optipng

{	
// optipng.enabled: false will disable optipng
	optipng: {
		enabled: false,
	},
  pngquant: {
    quality: [0.65, 0.90],
    speed: 4
    }
}

pngquant

参数说明(引用自Laya 图片压缩)： 1.quality参数的作用是保证图片经过优化处理后，图片质量的取值范围（0~1）。取值越小，表示压缩比率越大，同时的图片的质量也就越差。在测试过程中发现，当设置最低取值为 0.60 或 0.65 时，部分图片的质量会严重下降，因此最终选择了 0.70 作为最低值。 2.speed参数的设置决定了图片优化的执行速度，取值范围为 1~10，默认值为 4。其中 10 的执行速度最快，对应的压缩比率最小；而 1 的执行速度最慢，对应的压缩比率最大。在测试过程中发现，无论我设置哪一个值它们的执行时间都差不多，不过压缩比率确实 1 的最大，10 的最小。 实测效果： 在设置 quality 的取值范围为 0.70~0.95，以及 speed 为 4 的情况下，可以在尽可能不影响图片质量的前提下去缩减文件的大小。 在测试过程中，我们以 PNG-8 品质为 256 的图片为例，最终的图片输出可以降低 70%左右的大小（从 3.78KB 缩减到 1.13KB）。

gifsicle

参数说明 optimizationLevel是优化级别，默认值为 1，取值范围在 1-3。优化级别的高低决定图片的质量，较高的级别需要更长的时间，但可能会有更好的效果。 文档中给出了 3 种取值所做的事： 1：仅存储每个图像的更改部分 2：还使用透明度进一步缩小文件。 3：尝试几种优化方法（通常速度较慢，有时效果更好）。 colors是颜色减少的高低设置，是将每个输出 GIF 中的不同颜色数量减少到指定数值或者更少，取值范围在 2-256 之间。 buffer是利用缓冲进行优化。

webp

参数说明 > quality质量参数，将品质因数设置在0和之间100。是最常用，大多数场景下也只需要调整这一个参数即可。 其他参数可以参考官方文档 > 注意，在实际的使用中，发现这里存在一个容易被忽视的坑。 > image-webpack-loader 里的 webp 优化器只是针对已有的 webp 文件进行质量上的优化（或者说就不起作用，如果有研究出来的大佬麻烦评论告知哈），并不能把前面的 png/jpg 转成 webp。官方文档有点误导到大家，导致许多图片优化的教程都把这个当成 webp 转换器，然而我实际试了下，并不能=.=。

响应式图片

• 是否希望根据客户端情况返回不同的图片 内容?

• 是否希望根据客户端情况返回不同的图片 格式？

• 是否希望根据客户端情况返回不同的图片 尺寸 ？

• 是否希望优化高 分辨率 设备的体验？

picture 标签

<picture>
  <source srcset="a.jpg">
  <source srcset="b.jpg">
  <img src="c.jpg" >
</picture>

动态内容

<picture>
  <source
    media="(min-width: 1024px)"
    srcset="img-full.jpg"
  >
  <img
    src="img-center.jpg" 
  >
</picture>

动态尺寸

• 有哪些尺寸的图片

• 图片显示的时候是什么尺寸

<img
  src="img-400.jpg"
  sizes="(min-width: 640px) 60vw, 100vw"
  srcset="img-200.jpg 200w,
      img-400.jpg 400w, 
      img-800.jpg 800w,
      img-1200.jpg 1200w"
>

动态分辨率

<img
  srcset="img-200.jpg, 
          img-300.jpg 1.5x,
          img-400.jpg 2x"
  src="img-400.jpg" 
>

<style type="text/css">
  img {
    width: 200px;
  }
</style>

• 视口 >= 1280px 时
• 根据视口的具体宽度，返回不同尺寸的 img-full 图片
• 如果客户端支持 WebP，返回 WebP 格式

• 视口 < 1280px 时
• 根据视口的具体宽度，返回不同尺寸的 img 图片

• 如果客户端支持 WebP，返回 WebP 格式

<picture>
  <source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="img-full-200.webp 200w,
        img-full-400.webp 400w,
        img-full-800.webp 800w,
        img-full-1200.webp 1200w,
        img-full-1600.webp 1600w,
        img-full-2000.webp 2000w"
    type="image/webp"
  >
  <source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="img-full-200.jpg 200w,
        img-full-400.jpg 400w,
        img-full-800.jpg 800w,
        img-full-1200.jpg 1200w,
        img-full-1600.jpg 1800w,
        img-full-2000.jpg 2000w"
  >

  <source
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="img-200.webp 200w,
        img-400.webp 400w,
        img-800.webp 800w,
        img-1200.webp 1200w,
        img-1600.webp 1600w,
        img-2000.webp 2000w"
    type="image/webp"
  >
  <img
    src="img-400.jpg"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="img-200.jpg 200w,
        img-400.jpg 400w,
        img-800.jpg 800w,
        img-1200.jpg 1200w,
        img-1600.jpg 1600w,
        img-2000.jpg 2000w"
  >
</picture>

优雅地使用 WebP 图片

• 原始图片

• 优化后的图片

• webp 图片

picture 标签兼容优化

优化流程

1. 全新网站的兼容优化

2. 针对已有网站的兼容优化。

1. 将现有的图片全部转换成 webp 格式。

2. 将已有的 img 标签全部替换成 picture 标签。

3. 利用 webpack 的 html-loader 识别出所有图片格式的路径后并将其 hash 重命名后打包到同一文件夹下。

单入口页面

|--dist  								//打包后的路径
|--src  								//项目源代码目录
|  |--css  							//存放css样式表
|  |--images  					//存放网页所需的所有图片
|  |--js  							//存放javaScript代码
|  |--index.html  			//网页入口
|--webpack.config.js  	//webpack的配置文件
|--package.json  				//项目元数据，依赖包等信息
|--package-loack.json   //依赖包具体版本信息
|--webp.js   						//下文中提到的转换图片的js

const imageminWebp = require('imagemin-webp')
const imagemin = require('imagemin');

imagemin(['src/images/*.{jpg,png}'], {
  destination: "src/images",
  plugins: [
    imageminWebp({
      quality: 80
    }),
  ],
})

多入口页面

目录结构

webpack
|--dist  								//打包后的路径
|--src  								//项目源代码目录
|  |--common						//存放各个页面都有可能用到的组件库（基本不变更）
|  |  |--jquery.min.js  
|  |  |--swiper.min.js  
|  |--css  							//存放css样式表
|  |  |--index.scss  		//index页面所需的样式表
|  |  |--about.scss  		//about页面所需的样式表
|  |  |--common.scss  	//通用样式表
|  |--images  					//存放网页所需的所有图片
|  |  |--index  				//index页面所需的图片
|  |  |  |--header1.png  
|  |  |  |--banner1.png  
|  |  |  |--a1.jpg  	  
|  |  |  |--...
|  |  |--about  				//about页面所需的图片
|  |  |  |--header1.png  
|  |  |  |--banner1.png  
|  |  |  |--a1.jpg  	  
|  |  |  |--...
|  |  |--common  				//可复用的图片
|  |  |  |--logo.png  
|  |  |  |--footer.png  
|  |  |  |--wechat.svg  	  
|  |  |  |--...  
|  |--js  							//存放javaScript代码
|  |  |--index.js  			//index页面的js文件
|  |  |--about.js  			//index页面的js文件
|  |  |--common.js  		//可复用的js
|  |--index.html  			//网站首页html
|  |--about.html  			//关于网站html
|--webpack.config.js  	//webpack的配置文件
|--package.json  				//项目元数据，依赖包等信息
|--package-loack.json   //依赖包具体版本信息

• 用单页面转换的方式，每次改一下输入输出路径，对每个存放图片的文件夹单独转换。

gulp

注意，gulp 需要安装两次

npm i gulp -D //保证依赖被安装到node_modules下
npm i gulp -g //保证直接在命令行使用gulp命令时不会报错

const gulp = require('gulp');
const fs = require('fs');
const merge = require('merge-stream');
const path = require('path');
const webp = require('gulp-webp');
// 获取文件夹
function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function (file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

// 需要转换的文件路径，我这里设置为根目录下的src目录
const scriptsPath = path.resolve(__dirname, 'src')

function imagesToWebp() {
    const folders = getFolders(scriptsPath);
    const tasks = folders.map(function (folder) {
        console.log(folder)
      	//依次输出：
      	//common
				//css
				//images
				//js
      	// /**/*.{jpg,png}是找到src下所有层级的jpg/png图片
        return gulp.src(path.join(scriptsPath, folder, '/**/*.{jpg,png}'))
            .pipe(webp()) //使用webp插件进行转换（默认会保留原图片）
            .pipe(gulp.dest(scriptsPath + folder)); //输出到各自的文件夹下
    })
    return merge(tasks); //合并gulp流
}

exports.webp = gulp.series(
    imagesToWebp
)

<picture>
  <source srcset="./images/index/a1.webp" type="image/webp">
  <img src="./images/index/a1.png">
</picture>

<picture>
  <source srcset="./images/about/a1.webp" type="image/webp">
  <img src="./images/about/a1.png">
</picture>

注意： 记得在 webpack.config.js 中使用 html-loader 时，将 source 标签下的 srcset 属性加入 attrs，否则 html-loader 将无法识别 source 标签中的图片路径。

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      root: path.resolve(__dirname, 'src'),
      attrs: ['img:src', 'img:data-src', 'source:srcset']
    }
  }
}

利用 cdn 服务自动判断

参考

1. 将之前的项目图片进行了压缩

2. 谈谈 Web 应用中的图片优化技巧及反思

3. Laya 图片压缩