# 使用WebP图片解决方案

# 开始使用

  • 在项目cyb.config.js中开启useWebp配置
//cyb.config.js

export default {
  useWebp: {
    available: true
  }
}

发布代码时会自动转换项目所有图片为.webp格式,并生成对应.webp.css样式,同时在所有html页面插入检测浏览器知否支持webp的JS代码,浏览器加载时,JS代码判断浏览器对webp的支持情况,并加载对应的.css.webp.css文件

# 高级配置

//cyb.config.js

export default {
  /**
   * 生产环境 启用 图片 => webp 自动化转换
   * 配置参考:https://github.com/imagemin/imagemin-webp
   */
  useWebp: {
    available: true, 启用 图片 => webp 自动化转换
    options: {
      quality: 75, //将质量因子设置为0到100。
      alphaQuality: 100, //将透明度 - 压缩质量设置为0到100。
      method: 4, //指定要使用的压缩方法,介于0(最快)和6(最慢)之间。此参数控制编码速度与压缩文件大小和质量之间的折衷。
      sns: 80, //设置空间噪声整形的幅度在0和100之间
      lossless: false //无损编码图像
    }
  }
}

WebP解决方案仅支持写在样式中的图片。