webp图片使用

webp是谷歌推出的一种图片格式，它的优点就是同等画面质量下，体积比jpg、png这些少了25%以上。并能节省大量的服务器带宽资源和数据空间。Facebook 淘宝等知名网站已经开始测试并使用WebP格式。但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。

webp兼容性

并不是所有浏览器都支持webp格式查看浏览器支持情况
webp1

webp工具及在线网站

WebP - 图片格式的发展趋势 - 又拍云
 JPG轉WEBP轉換器。在线自由 — Convertio
JPG to WEBP, 免费在线JPG转换成WebP转换器 - JPG转换成WebP
WebP官方转换工具手把手安装教程
 XnConvert

在项目中如何转换webp

使用WebP转换插件（imagemin-webp） npm i -D imagemin imagemin-webp

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*.{jpg}'], 'images', {
  use: [ imageminWebp({quality: 60})]
}).then(() => {
  console.log('Images optimized');
});

使用gulp-webp 需要gulp4及以上版本 npm i -D gulp-webp
[gulp-webp相关参数](https://github.com/imagemin/imagemin-webp#imageminwebpoptions)

const gulp = require('gulp');
const webp = require('gulp-webp');
//任务[转换webp] 有损压缩
gulp.task('convert-webp', function () {
  gulp.src('images/**/*.{jpg,png,gif}')
  .pipe(webp({
    quality: 70,
    preset: 'photo',
    method: 4
  }))
  .pipe(gulp.dest('dist/images'))
})
// 无损压缩
gulp.task('convert-webp', function () {
  gulp.src('images/**/*.{jpg,png,gif}')
  .pipe(webp({
    lossless: true
  }))
  .pipe(gulp.dest('dist/images'))
})

使用webp的方式

服务端处理
在支持webp图片的浏览器向服务器发送请求时,会在请求头Accept中带上image/webp,服务器根据是否包含这个头信息决定是否返回webp图片
前端检测是否支持webp然后请求相应格式的图片
通过特性检查用户浏览器是否支持webp,通常在页面中先执行一段webp的检测,对页面中使用img标签引入图片时可使用picture兼容webp方式.如果是css中的引入的图片,使用检测webp代码给html设置单独的类,通过这个类名引入webp背景图片覆盖原来其他格式的图片.

在gulp构建工具中webp前端的使用方式

通过js判断是否支持webp 并给html设置class为webp

/* 方法一 firefox不支持该语法 console.log(document.createElement('canvas').toDataURL('image/webp'))
if (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0) {
    document.documentElement.classList.add('webp')
}  */
// 方法二
var image = new Image()
// 一张支持alpha透明度的webp的图片，使用base64编码
image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==';
// 图片加载完成时候的操作
image.onload = function() {
  // 图片加载成功且宽度为1，那么就代表支持webp了，因为这张base64图是webp格式。如果不支持会触发image.error方法
  if (image.width == 1) {
    // html根节点添加class，并且埋入cookie
    document.documentElement.classList.add('webp')
  }
}

在页面中使用标签
<picture>标签利用多个<source>和一个<img>来设置显示的图像,如果用户的浏览器中不支持<picture>，浏览器将会将它渲染为一个<div>，并使用其中的<img>,不要将image/webp的格式放在旧格式的后面

<picture>
  <source srcset="images/adv1.png.webp" type='image/webp'>
  <img src="images/adv1.png" alt="" >
</picture>
<picture>
  <source srcset="images/adv2.png.webp" type='image/webp'>
  <img src="images/adv2.png" alt="" >
</picture>

在css中使用背景图片时支持webp时使用webp背景图覆盖原来图片

// 在scss中使用
@mixin bg($url) {
  background:url($url) no-repeat center;
  background-size: 100% 100%;
  @at-root .webp &{
    background-image:url($url + '.webp');
  }
}
.sign-top{
  position: relative;
  height: 680px;
  @include bg('../images/bg-top.png')
}