图片优化 - 转webp

最新推荐文章于 2024-05-11 12:44:53 发布

weixin_33860147

最新推荐文章于 2024-05-11 12:44:53 发布

阅读量1.2k

点赞数 1

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5bad996ef265da0ab915d260

版权

一、什么是webp

webp 是由谷歌（google）开发的一种旨在加快图片加载速度的图片格式。与JPEG相同，WebP是一种有损压缩利用预测编码技术。但谷歌表示，这种格式的主要优势在于高效率。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%，webp 在各大BAT公司得到广泛的运用，如淘宝、腾讯等。

并且阿里云、腾讯云、又拍云都提供了图片直接转换webp的相关服务。以阿里云为例，只要在图片后缀加上 ?x-oss-process=image/format,webp 你的图片瞬间会变小很多：

云服务	普通图片	WEBP图片
阿里云	image-demo.oss-cn-hangzhou.aliyuncs.com/panda.png (18K)	image-demo.oss-cn-hangzhou.aliyuncs.com/panda.png?x… (3.3K)

二、实现webp

该方法可作为底层方法直接使用，代码如下：

/**
 * @note 检查是否支持.webp 格式图片，在localStorage在记录
 * 支持     图片后缀加上?x-oss-process=image/format,webp      转成webp格式
 * 不支持   图片后缀加上?x-oss-process=image/quality,Q_80     图片质量降为80%
 */

;
(function() {
  var timeout = null;
  var urlarr = [];
  var flag = false;
  if (localStorage && !localStorage.iswebp) {
    var img = new Image();
    img.onload = function() {
      if (img.width === 1) {
        // 在localStorage做记录
        localStorage.iswebp = true;
      }
    };
    img.onerror = function() {
      flag = true;
      localStorage.iswebp = '';
    };
    img.src = "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=";
  }
  function getOssImg(url) {
    clearTimeout(timeout);

    url = String(url);
    if (!url) {
      return url;
    }
    if (!flag && localStorage && (typeof localStorage.iswebp === 'undefined')) {
      timeout = setTimeout(function () {
        getOssImg(url);
      },100);
    } else {
      // gif 的图片不做处理
      urlarr = url.split('.');
      if (urlarr.length > 0 && urlarr[urlarr.length - 1] === 'gif') {
        url += '';
        return url;
      }
      if (url.indexOf('x-oss-process=image') === -1) { // 不存在这种后缀
        if (localStorage && localStorage.iswebp) {
          url = url + '?x-oss-process=image/format,webp';
        } else {
          url = url + '?x-oss-process=image/quality,Q_80';
        }
      }
      return url;
    }
  }
  String.prototype.ossimg = function() {
    return getOssImg(this);
  };
})();
复制代码

调用方式.ossimg() 如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>checkwebp</title>
  </head>
  <body>
    <div class="J_checkImg"><img src="http://yun.tuidove.com/mami-media/img/ckey3d2q6o.png"></div>
    <script src="http://nansenzsl.coding.me/CBS/zepto.js"></script>
    <script src="http://nansenzsl.coding.me/CBS/checkwebp.js"></script>
    <script>
      $(function() {
        var $img = $('.J_checkImg img');
        $img.attr('src', $img.attr('src').ossimg()); // .ossimg() 转成webp
      });
    </script>
  </body>
</html>
复制代码

三、兼容性

从兼容图表可以看出，在Chrome和Opera中兼容webp，但在IE、FF、Safari不兼容webp。Android和IOS表现也相差很大，Android基本兼容webp，iOS则都不兼容，在以上底层代码中考虑到了这一点。

webp的坑点分析（左边是jpg 右边是webp）

转为webp格式后，体积增加了近一倍，这是为什么呢？

① Type变更：原图的Type为Palette，处理之后的Type为TrueColor，即原图为索引类型，处理之后的图片为RGB真彩色，需要编码的像素点个数是索引类型的三倍，因此导致图片变大

② Colors变多：颜色数目由256增长到了67000多个，说明处理前的图片细节上重复较多，导致了处理后的图片比原图还大了很多

所以使用webp的时候需要注意，当图片有渐变和外发光并且通过tinypng压缩，再转webp格式，图片就会变大。

四、总结

webp能使全站图片缩小30%左右，这不得不说是一个很大的优化，还未使用webp的同学可以用起来。

转载于:https://juejin.im/post/5bad996ef265da0ab915d260

weixin_33860147

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片优化 - 转webp

一、什么是webpwebp 是由谷歌（google）开发的一种旨在加快图片加载速度的图片格式。与JPEG相同，WebP是一种有损压缩利用预测编码技术。但谷歌表示，这种格式的主要优势在于高效率。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%，webp 在各大BAT公司得到广泛的运用，如淘宝、腾讯等。并且阿里云、腾讯云、又拍云都提供了图片直接转换webp的相关服务。以阿里...
复制链接

扫一扫