webp图片的优劣势及生成丨技术开发分享录

webp图片的优劣势及生成

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"## 一、优劣势\n\n**优势**\n\nWebP相比于JPG拥有更小的文件尺寸、更高的质量(相比于相同大小不同格式的压缩图片),抽取100张商品图片采用80%压缩,大约能减少60%的文件大小。\n\n**劣势**\n\n根据Google的测试,目前WebP与JPG相比较,编码速度慢10倍,解码速度慢1.5倍。 编码方面,一般来说,我们可以在图片上传时生成一份WebP图片或者在第一次访问JPG图片时生成WebP图片,对用户体验的影响基本忽略不计。 解码方面,WebP虽然会增加额外的解码时间,但由于减少了文件体积,缩短了加载的时间,页面的渲染速度加快了。同时,随着图片数量的增多,WebP页面加载的速度相对JPG页面增快了。\n\n## 二、在线生成\n\n- [智图](https://zhitu.isux.us/)\n- [又拍云](https://www.upyun.com/webp)\n- [CloudConvert](https://cloudconvert.com/webp-converter)\n- [iSparta](http://isparta.github.io/index.html)\n\n## 三、代码生成\n\n### 1、canvas生成\n\n```\nvar canvas = document.createElement('canvas'),\n  ctx = canvas.getContext('2d'),\n  img = document.getElementById('img');\n\nvar loadImg = function(url, fn) {\n  var image = new Image();\n  image.src = url;\n  image.onload = function() {\n    fn(image);\n  }\n}\n\nloadImg('<image-url>', function(image) {\n  canvas.height = image.height;\n  canvas.width = image.width;\n  ctx.drawImage(image, 0, 0);\n  img.setAttribute('src', canvas.toDataURL('image/webp'));\n});\n```\n\n### 2、gulp-WebP生成\n\n```\nvar gulp = require('gulp');\nvar webp = require('gulp-webp');\n\ngulp.task('default', () => {\n  gulp.src('./*.{png,jpg,jpeg}')\n    .pipe(webp({ quality: 80 }))\n    .pipe(gulp.dest('./dist'));\n});\n```\n\n### 3、gulp-imageisux生成\n\n```\nvar imageisux = require('gulp-imageisux');\ngulp.task('default', () => {\n  gulp.src('./*.{png,jpg,jpeg}')\n    .pipe(imageisux('/dirpath/', enableWebp));\n});\n```\n\n- dirpath: 如果未定义,会自动生成两个目录:`/dest/` 目录放压缩后图片,`/webp/` 目录放对应的webp格式压缩图片。\n- enableWebp : 若为 `true`,则会同时输出webp图片;若为 `false`,则只会有压缩后原格式图片。\n\n### 4、vue-webp-plugin生成\n\n```shell\n> npm install --save vue-webp-plugin\n```\n\n在 `main.js` 中引入\n\n```\nimport WebpPlugun from 'vue-webp-plugin';\nVue.use(WebpPlugun);\n```\n\n远程图片\n\n```html\n<img v-webp=\"'https://h5.u51.com/99fenqi/vue//static/home_top_bg.png'\"/>\n```\n\n本地图片\n\n```html\n<img v-webp=\"require('static/home_top_bg.png')\"/>\n```\n\n变量引入\n\n```html\n<img v-webp=\"url\" />\n<script>\nexport default {\n  data() {\n    return {\n      url: require('static/home_top_bg.png')\n    }\n  }\n}\n</script>\n```\n\n数组遍历\n\n```html\n<div class=\"foot2\" v-for=\"(item,index) in imgList\" :key=\"index\">\n  <img :src=\"item.src\" alt />\n</div>\n<script>\ndata() { //此处省略了很多代码\n    return {\n      imgList: [] //存储图片路径\n    }\n  },\n  mounted() { //通过mounted批量插入图片路径,这样就不用一个一个定义\n    let arr = this.imgList;\n    for (let i = 0; i < 9; i++) {\n      arr[i].src = require('../../image/' + (i + 1) + '.jpg'); //插入items1 9张图片路径\n    }\n  }\n</script>\n```\n\n背景图片\n\n```html\n<div v-webp:bg=\"require('static/home_top_bg.png')\"></div>\n```\n\n### 5、webp-loader生成\n\n安装\n\n```shell\n> npm install webp-loader --save-dev\n```\n\n配置\n\n```\n{\n  test: /\\.(jpe?g|png)$/i,\n  loaders: [\n    'file-loader',\n    'webp-loader'\n  ]\n}\n```\n\n### 6、webpack-react-webp生成\n\n安装\n\n```shell\n> npm install webpack-react-webp --save\n```\n\n配置(webpack.config.js)\n\n```\nlet webpackWebp = require('webpack-react-webp');\n\n//不是开发环境必须要添加 webpackWebp.loader(),添加webp判断\nlet imgLoader = (env === 'dev' ? [] : [webpackWebp.loader()]).concat([\n  'file-loader?' + JSON.stringify({ name: imagePath + imgName + '.[ext]' }) //或者url-loader\n]);\n\nmodule.exports = {\n  module: {\n    loaders: [{\n      test: /\\.(jpe?g|png|gif|svg)$/,\n      loaders: imgLoader\n    }]\n  },\n  plugins: [\n    new webpackWebp({\n      cssDomain: 'http://xxxxxxxxxxx', //支持 字符串与['http://11.xxxx','http://22.xxxx']\n      jsDomain: 'http://xxxxxxxxxxx'\n      imgPath: 'www/home/*', //*.{jpg,png,jpeg}\n      imgReg: ['jpg', 'png', 'jpeg'],\n      quality: 60\n    })\n  ]\n}\n```\n\n参考链接:\n\n- [webp官网](https://developers.google.com/speed/webp/)\n- [vue-webp-plugin](https://www.npmjs.com/package/vue-webp-plugin)\n- [node-glob](https://github.com/isaacs/node-glob)\n- [webpack-react-webp](https://www.npmjs.com/package/webpack-react-webp)\n- https://blog.csdn.net/weixin_33722405/article/details/91379331\n"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看