检查浏览器支持Webp

Vixb 发布于2019-08-21 11:24 / 2293人阅读

摘要：什么是是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式。检查浏览器对的支持使用使用有损无损透明动画

什么是Webp？

Webp 是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％的文件大小，支持透明，及动画，对提高页面的加载速度有很大的帮助。

检查浏览器对Webp的支持 使用canvas

function checkWebpSupport() {
  const canvas = document.createElement("canvas");
  if (Boolean(canvas.getContext && canvas.getContext("2d"))) {
    return canvas.toDataURL("image/webp").indexOf("data:image/webp") === 0;
  }
  return false;
}

使用Image

/**
 * lossy 有损 lossless 无损 alpha透明 animation 动画
 */
function checkWebpFeature(feature, callback) {
  const images = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
  const img = new Image();
  img.onload = function() {
    const result = (img.width > 0) && (img.height > 0);
    callback(feature, result);
  };
  img.onerror = function() {
    callback(feature, false);
  };
  img.src = "data:image/webp;base64," + images[feature];
}

GPU云服务器云服务器检查浏览器 html5 支持检查 webrtc支持浏览器 webrtc浏览器支持

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86661.html

<转载>图片流量节省60%：基于CDN的sharpP自适应图片技术实践

摘要：开启验证上传一张新图片，使用手安卓版本访问已支持域名的图片，如果请求带了，检查返回图片格式是否为如果旧的图片未按预期返回，返回了或原图可能是结点缓存，正常天后过期回源则会返回图片。对于图片较多的网站，本文结合具体案例给出了如何基于CDN的sharpP自适应图片无痛接入方案，据统计效果可在原图基础上节省60%-75%的流量。作者：陈忱出处：腾云阁文章目前移动端运营素材大部分依赖图...

JerryZou 2019-06-28 10:53 评论0 收藏0
【译】 WebP 支持：超出你想象

摘要：的支持程度实际上比你想的可能要好得多。的安卓浏览器从版本起开始官方支持最初发布于年月，版本起开始部分支持。安卓版从起开始支持。而且目前并无添加支持的任何打算。浏览器市场份额截至年月的数据显示，占有约的市场份额，以约位居第二。本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/862原文：https://optimus.keycdn.com/sup...

Steven 2019-08-01 15:27 评论0 收藏0
判断浏览器是否支持 webp 的几种解决方法

摘要：实现方法方法二在服务端根据请求信息判断浏览器是否支持谷歌浏览器上请求图片是这样的浏览器请求图片是这样的在图片请求发出的时候，里有，服务端可以根据里面是否有进行判断。我们都知道，WebP 是 Google 推出的 WebP 图片格式，它是一种支持有损压缩和无损压缩的图片文件格式，根据Google测试，相同的图片，WebP 格式的图片均能比 PNG，JPG 格式的图片节约不少体积，但是其...

DobbyKim 2019-08-23 17:53 评论0 收藏0