webp的几个问题

1. 什么是webp?

最直接的便是一个图片的后缀是.webp而不是.png/.jpeg等,官方的说法便是由Google开发的一种用于图画紧缩的现代格局，目的便是减小图片的大小从而进步网页加载速；

2. 是不是所有浏览器都支撑webp图片？如何判别浏览器是否支撑webp格局的图片

不是所有的浏览器都支撑 WebP 图片格局，但大多数干流的现代浏览器都已经支撑了。以下是一些常见的浏览器对 WebP 格局的支撑情况：

  • Google Chrome：支撑 WebP 格局。
  • Mozilla Firefox：支撑 WebP 格局。
  • Microsoft Edge：支撑 WebP 格局。
  • Safari：从 Safari 14 开端，支撑 WebP 格局 要判别浏览器是否支撑 WebP 格局的图片，能够运用 JavaScript 进行检测。以下是一种常用的办法：
function isWebPSupported() {
  var elem = document.createElement('canvas');
  if (!!(elem.getContext && elem.getContext('2d'))) {
    // canvas 支撑
    return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
  }
  // canvas 不支撑
  return false;
}
if (isWebPSupported()) {
  console.log('浏览器支撑 WebP 格局');
} else {
  console.log('浏览器不支撑 WebP 格局');
}

上述代码经过创立一个 canvas 元素，并尝试将其转化为 WebP 格局的图片。假如浏览器支撑 WebP 格局，则会回来一个以 “data:image/webp” 开头的数据 URL。

经过这种方式，你能够在网页中运用 JavaScript 检测浏览器是否支撑 WebP 格局，并根据需要供给恰当的代替图片

3. 图片转化成webp之后一定会比之前的图片更小吗？

答案是否定的。一般来说，具有很多细节、色彩改变和复杂结构的图画或许会在转化为 WebP 格局后取得更好的紧缩作用，反之有些转化后或许会比之前更大；所以最好是图片转化为 WebP 格局之前，主张进行测验和比较不同紧缩参数和质量等级的成果，以找到最佳的紧缩设置，对最终转化后变成更大的主张不做转化

4. 如何将图片转化成webp

  • 图画编辑软件 如 Adobe Photoshop、GIMP 或在线工具，如 Google 的 WebP 编码器。这些工具能够让你将现有的图画转化为 WebP 格局，并挑选紧缩质量和紧缩类型（有损或无损）
  • 插件转化webp插件文档链接接入

图片转换成webp

5. 项目中如何接入？？

思路：

  • 第一步肯定是转化将项目中的存储的图片文件经过插件转化出webp格局的图片
  • 判别网页运转的浏览器是否支撑webp格局的图片，假如支撑，将项目中所有运用png/jpeg的图片的全部替换成webp

6. 转化出项目中图片的webp格局的图片

const imagemin = require("imagemin");
const imageminWebp = require("imagemin-webp");
function transformToWebp(destination, filePaths) {
    await imagemin([filePath || `${destination}/*.{jpg,png}`], {
        destination: `${destination}/webp/`, // 转化出的webp图片放置在什么目录
        plugins: [imageminWebp({quality: 75})] // 运用imageminWebp转化转化质量等级设置多少
    })
}

详细到项目中，咱们只希望转化咱们当时正在开发的文件夹中的图片，并且已经转化的未作修正的就不要再重复转化； 如何知道哪些是新增的或者修正的呢？ 想一想️，是不是“git status”能够看到 所以开端做如下调整

// 获取git库房中产生改变的文件列表
function getGitStatusChangedImgFiles() {
  return String(execSync('git status -s'))
      .split('\n')
      .map(item => item.split(' ').pop()
      .filter(path => path.match(/\.(jpg)|(png)/))
      );
};

回来一个包括改变图片文件路径的数组[‘src/example/image/a.png’,’src/example/image/b.png’, ‘……’]

const imgPaths = getGitStatusChangedImgFiles()
async function transformAllChangedImgToWebp() {
    const resData = await promise.all(
        imgPaths.map(path => {
            const imgDir = path.replace(/([^\\/]+)\.([^\\/]+)/i, "") // src/banners/guardian_8/img/95_copy.png => src/banners/guardian_8/img/
            return transformToWebp(imgDir, path)
        })
    ) 
    const allDestinationPaths = resData.map((subArr) => subArr[0].destinationPath)
    // 假如这里咱们想将生成的webp图片主动的add上去，那么就这样：
    execSync(`git add ${allDestinationPaths.join(" ")}`);
}

图片转换成webp

什么时分转化成webp最好？

咱们在commit的时分进行转化图片，以及主动将转化的图片进行提交 这样咱们就能够运用git的钩子函数处理了；

npm install husky --save-dev
// .husky/pre-commit中
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
current_branch=`git rev-parse --abbrev-ref HEAD`
if [[ $current_branch === 'main']]; then
    # 生成 webp 图片
    npm run webp -- commit
fi

这样在咱们commit时就会主动触发pre-commit钩子函数，在package.json中配置webp履行的脚步，履行上述transformAllChangedImgToWebp函数，然后在里边转化出webp图片并将新生成的webp主动git add上去，最后同时commit;

知识点

1. execSync是什么？

execSync是一个 Node.js 内置模块child_process中的办法，用于同步履行外部指令。在 Node.js 中，child_process模块供给了一组用于创立子进程的函数，其间包括execSync办法。execSync办法用于履行指定的指令，并等候指令履行完成后回来成果。

const { execSync } = require('child_process'); const output = execSync(command, options);

2. git status -s会显示每个文件的状况信息

  • A：新增文件
  • M：修正文件
  • D：删去文件
  • R：文件名修正
  • C：文件的复制
  • U：未知状况

图片转换成webp

3. execSync(‘git status -s’)回来值是什么？

经过String后就能够变成可见的字符串了，然后经过分割等就能拿到详细的修正的文件路径

4. Husky是什么？

Husky 是一个用于在 Git 提交过程中履行脚本的工具。它能够帮助开发人员在代码提交前或提交后履行一些自定义的脚本，例如代码格局化、代码质量检查、单元测验等。Husky 能够保证团队成员在提交代码之前遵循一致的标准和约好。

Husky 的作业原理是经过在 Git 钩子（Git hooks）中注册脚本来完成的。Git 钩子是在特定的 Git 事件产生时履行的脚本，例如在提交代码前履行pre-commit钩子，或在提交代码后履行post-commit钩子。push代码前履行pre-push的钩子、编写提交信息时履行commit-msg的钩子可用于提交什么标准

小结

  1. 经过execSync('git status -s')从中获取筛选当时新增/修正过的图片；
  2. 调用imagemin和imagemin-webp将图片转化出webp格局的图片
  3. 在husky的pre-commit中触发上述调用履行，并在里边顺道将新生成的webp同时add上去
  4. 至于后续生成的webp图片怎样运用，这将鄙人一篇文章中学习