精华内容
下载资源
问答
  • WebP

    2020-11-21 23:49:57
    <div><p>Ребят, что насчет webp? Почему бы не добавить?</p><p>该提问来源于开源项目:tars/tars</p></div>
  • Webp

    2020-11-29 12:00:13
    <div><p>Hi Does not work with <code>format='WEBP'</code></p> <p>How to fix it?</p><p>该提问来源于开源项目:matthewwithanm/django-imagekit</p></div>
  • WebP

    2020-05-19 01:20:47
    WebP是由Google谷歌开发的一种加快图片加载速度的图片格式,可节省大量服务器宽带资源和数据空间,在压缩比率上比JPEG格式更为优越,同时提供了有损压缩和无损压缩。在质量相同情况下,WebP格式图片的体积要比JPEG小...

    WebP是由Google谷歌开发的一种加快图片加载速度的图片格式,可节省大量服务器宽带资源和数据空间,在压缩比率上比JPEG格式更为优越,同时提供了有损压缩和无损压缩。在质量相同情况下,WebP格式图片的体积要比JPEG小40%

    WebP

    WebP图片格式浏览器支持情况

    浏览器支持情况

    浏览器判断是否支持WebP格式图片

    • 判断请求头的Accept字段中是否包含image/webp字段
    const isSupportWebP = function(){
      try{
        return document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp") === 0;
      }catch(e){
        return false;
      }
    }
    

    WebP图片转换

    又拍云 https://www.upyun.com/webp
    智图 https://zhitu.isux.us
    isparta http://isparta.github.io
    

    WebP图片打包工具

    https://developers.google.cn/speed/webp/docs/cwebp
    
    展开全文
  • WEBP

    2016-06-27 12:26:03
    webp的应用

    WEBP是什么呢?
    WEBP 是google推出的意图改变web图片JPG、PNG、GIF三分天下局势的一种图片格式。它不仅支持无损或有损压缩、alpha通道,还支持动画演示。在同画质的情况下,webp格式图片占用体积相较于jpg图片大约减少40%,相较于无损png图片大约减少30%。具不完全统计,互联网流量中60%都产生于图片,如果能用上webp格式,网站的访问速度将会大大提升。

    兼容及使用

    目前,移动端Android4.0以上、PC端chorme 10+(14 ~ 16 有渲染bug)、opera 11+ 、safri均支持webp格式图片。firefox曾经拒绝支持webp,今年也重启了关于webp第二次讨论https://bugzilla.mozilla.org/show_bug.cgi?id=856375 ( 第一次讨论:地址 ),大家可以关注到里面的进度,safri也开始支持webm,相信webp也会在不久的将来得到支持,好的东西始终是会被大家接纳的。

    目前要实现全浏览器兼容,虽然可以引入flash,但引入成本太高而且转为flash之后图片不能再操作,缺少灵活性,同时又会占用过多的CPU。因此,目前可行的解决方法只能是同时提供两套图片。

    1.服务端方式服务端就只能通过UA信息来判断 可参考:https://github.com/igrigorik/webp-detect ,针对不同浏览器提供不同文件。
    webp


    var isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;

    2.JS判断浏览器是否支持WEBP,不同的src写入img中,样式中的图片可以通过检测后添加class,直接上代码吧

      1. var testWebp = function(callback){  
      2.   var image = new Image();  
      3.   image.onerror = function() {  
      4.     callback(false);  
      5.   };  
      6.   image.onload = function() {  
      7.     callback(image.width == 1);  
      8.   };  
      9.   image.src = 'data:image/webp;base64,UklGRiwAAABXRUJQVlA4ICAAAAAUAgCdASoBAAEAL/3+/3+CAB/AAAFzrNsAAP5QAAAAAA==';  
      10. }  

      1. <html>  
      2. <head>  
      3. <meta charset="UTF-8" />  
      4. <title>WEBP TEST</title>  
      5. <script charset="utf-8" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
      6. <script type="text/javascript">  
      7. var testWebp = function(callback){  
      8.             var image = new Image();  
      9.             image.onerror = function() {  
      10.               callback(false);  
      11.             };  
      12.             image.onload = function() {  
      13.               callback(image.width == 1);  
      14.             };  
      15.             image.src = 'data:image/webp;base64,UklGRiwAAABXRUJQVlA4ICAAAAAUAgCdASoBAAEAL/3+/3+CAB/AAAFzrNsAAP5QAAAAAA==';  
      16.         },webSrc = function(src){  
      17.             var suffix = src.lastIndexOf('.');  
      18.             suffix = src.substr(suffix);  
      19.             if (/png|jpg/.test(suffix)){  
      20.                 return src.substr(0,(src.length-3))+'webp';  
      21.             }else{  
      22.                 return src;  
      23.             }  
      24.         }  
      25.         $(function(){  
      26.             var $note = $('.note');  
      27.             testWebp(function(SUP){  
      28.                 var $img = $('img[data-img]');  
      29.                 if(SUP){  
      30.                     $('body').addClass('webp');  
      31.                     $img.each(function(i,o){  
      32.                         var $o = $(o),  
      33.                             src = $o.attr('data-img');  
      34.                         $o.attr('src',webSrc(src));  
      35.                     });  
      36.                     $note.html('你载入的是<strong>webp</strong>格式');  
      37.                 }else{  
      38.                     $('body').addClass('nowebp');  
      39.                     $img.each(function(i,o){  
      40.                         var $o = $(o),  
      41.                             src = $o.attr('data-img');  
      42.                         $o.attr('src',src);  
      43.                     });  
      44.                     $note.html('你载入的是<strong>png、jpg</strong>格式');  
      45.                 }  
      46.             });  
      47.         });  
      48. </script>  
      49. <style type="text/css">  
      50. *{margin:0;padding:0;}  
      51. body{font:12px/1.6 arial,\5fae\8f6f\96c5\9ed1;color:#666;}  
      52. strong{color:#000;padding:0 2px;}  
      53. img{width:313px;height:219px;}  
      54. .img{ margin-top:20px; width:313px;height:214px; }  
      55. .webp .img{ background:url(http://demo.btorange.com/article/webp/demo2.webp) no-repeat; }  
      56. .nowebp .img{ background:url(http://demo.btorange.com/article/webp/demo2.png) no-repeat; }  
      57. </style>  
      58. </head>  
      59. <body>  
      60. <p class="note"></p>  
      61. <!-- img图片 -->  
      62. <img alt="" data-img="http://demo.btorange.com/article/webp/demo1.jpg" data-pinit="registered" />  
      63. <!-- 样式中的图片 -->  
      64. <div class="img"></div>  
      65. </body>  
      66. </html>  

    目前WEBP与JPG相比较,编码速度慢10倍,解码速度慢1.5倍,实际上对于绝大部分的网络应用而言,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。针对1.5倍的解码速度是否影响用户体验的问题,我们可以看看ebay团队的这个测试,50张同样质量的WEBP与jgp加载的速度对比:http://www.webpagetest.org/video/view.php?id=130125_7b15e676f5fa0b736f247ff0ed36517e64d9c9ea

    此测试表明,webp虽然会增加额外的解码时间,但是由于减少了文件体积,缩短了加载的时间,实际上文件的渲染速度反而变快了,从下面的图片中可以很明显的看到。

    web2

    转换WEBP

    windows下安装 WebpCodecSetup.exe (才能查看WEBP格式图片) 以及 libwebp-0.3.0-windows
    下载安装 https://code.google.com/p/webp/
    解压libwebp后,cd到解压文件夹后输入转换命令,命令的结构 cwebp [options] input_file -o output_file.webp

    jpg cwebp input_file -o output_file.webp

    (jpg是有损压缩的,options可以选 -q 设置质量,默认为75)

    png cwebp -lossless input_file -o output_file.webp

    具体的参数可以查看 : https://developers.google.com/speed/webp/docs/cwebp?hl=zh-TW

    应用场景

    目前如果要大面积应用WEBP,无疑对服务器存储是一个很大考验。我们不能抛弃原有格式,那么存储的数据量将会增加60%,如果请求时再转换,由于目前转码的效率太低,特别的大文件的PNG速度相当的慢,这两点都是目前实际使用最大的痛点。

    即使要尝试使用,也不能像facebook那样,在相册中做试验,相册类的应用很多用户会有把照片从web上另存的需求,而WEBP在没有安装解码包的情况下,即使下载到电脑中也是无法直接浏览的,所以一定要避免这种应用场景。

    目前我认为可行的应用场景:

    1.客户端软件,内嵌了基于Chromium的webview,这类浏览器中应用的网页是可以完全使用webp格式,提升加载渲染速度,不考虑兼容。

    2.用node-webkit开发的程序,用webp可以减少文件包的体积。

    3.移动应用 或 网页游戏 ,界面需要大量图片,可以嵌入webp的解码包,能够节省用户流量,提升访问速度

    展开全文
  • webp

    2017-12-15 08:47:21
      https://tech.upyun.com/article/252/WebP%20%E7%9A%84%E5%89%8D%E4%B8%96%E4%BB%8A%E7%94%9F.html   https://zhuanlan.zhihu.com/p/23648251
    展开全文
  • 该库是按需Webp的工作示例的简短场景,该示例在后台使用rosell-dk / webp-convert。 将有两种情况: 首次调用尚无webp版本的图像,它将重定向到原始源并在后台运行webp图像转换器 首次调用尚无webp版本的图像将流...
  • Animated webP

    2020-12-08 18:03:14
    <div><p>There is any way to create animated webp using spectrum? Something like video to webp / gif to webp / multi png/jpeg/webp to webp?</p><p>该提问来源于开源项目:facebookincubator/spectrum...
  • Type webp

    2020-12-26 17:44:10
    <div><p>It would be interesting to put the new default webp images jpg to webp png to webp</p><p>该提问来源于开源项目:verot/class.upload.php</p></div>
  • Support WebP

    2020-12-02 06:24:18
    <div><p>Can we please have support for outputting pictures as WebP? <p>It's smaller at a similar quality level, or provides higher quality at the same filesize. Or a combination of both. It's ...
  • WebP support

    2020-12-26 16:45:27
    <div><p>Would it be possible to add WebP support to nomacs? <p>https://en.wikipedia.org/wiki/WebP</p>该提问来源于开源项目:nomacs/nomacs</p></div>
  • WebP Animation

    2020-12-01 20:20:41
    <div><p>Hello! <p>Does your library support WEBP animation? <p>Thank you!</p><p>该提问来源于开源项目:EverythingMe/webp-android</p></div>
  • webp export

    2020-12-26 13:33:45
    <div><p>Any change to add webp as an option? Ideally it would be nice to build something like <pre><code> <picture> <!--[if IE 9]><video style="display: none;"><!...
  • webp support

    2020-11-23 09:28:05
    s opensourceed webp image format? https://developers.google.com/speed/webp/</p> <p>ImageMagick and Facebook now support webp. Chrome and Opera browsers do as well, but not yet Firefox, IE, Safari. ...
  • nim-webp-tools:Nim WebP工具包装
  • webp.js是一个用于webp检测的库
  • 【Android 安装包优化】WebP 图片格式性能测试 ( 测试 WebP 图片解码速度 | 测试 WebP 图片编码速度 ) https://hanshuliang.blog.csdn.net/article/details/116102877 源码快照
  • Support webp

    2021-01-10 11:11:59
    <div><p>These lines are needed to support webp with the imagick adapter. <p>I don't intend to write webp support for the other adapters, but this may be a start for someone else. <p>Also requested...
  • Webp support

    2021-01-11 13:39:59
    <p>The specification for the lossless webp format can be found here <a href="https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification">lossless</a></p> <p>The specification ...
  • AvatarURL webp

    2020-12-09 12:51:37
    could be changed from <strong>jpg</strong> to <strong>webp</strong> to support transparency. Apparently discord stores them in webp now. <p>...
  • WebP Support

    2021-01-09 07:29:38
    <div><p>Since Elementor has growing better and better everyday, I think it would be nice to have WebP Support. <p>It's being pushed by google these days, I created webP by using another plugin, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,909
精华内容 2,763
关键字:

webp