精华内容
下载资源
问答
  • 一、Webp 图片格式简介、 二、使用 Android Studio 转换 Webp 图片格式、 三、参考资料、





    一、WebP 图片格式简介



    WebP 是一种压缩度很高的文件格式 , 有 " 有损压缩 " 和 " 无损压缩 " 两种形式 ;

    WebP 发布的目的是为了减少文件大小 , 并且达到与 png , jpeg 图片相同的效果 , 在 Android 应用中 , 动辄几百兆的图片中 , 如果都采用了 WebP 图片 , 那么能减小 40% ~ 80% 的图片容量 , 进而降低 apk 安装包大小 ; 同时在网络中传输 WebP 图片 , 能进一步节省带宽 ;


    WebP 的问题 :

    WebP 图片格式的使用不广泛 , 目前主流 Android 应用中使用 JPEG 与 PNG 居多 ;

    UI 设计人员使用的 Adobe PhotoShop 中导出的图片一般是 JPEG , PNG , SVG 格式图片 , 没有导出 WebP 图片格式的选项 ;

    在这里插入图片描述





    二、使用 Android Studio 转换 WebP 图片格式



    在 Android Studio 中 , 选中一张图片 或 一个目录 , 点击右键 , 在弹出的菜单中 , 选择 " Convert to WebP … " 选项 , 即可将一张图片转为 WebP 格式的图片 ;

    将一张图片转为 WebP 格式 :

    在这里插入图片描述

    将整个目录中的图片转为 WebP 格式 :

    在这里插入图片描述

    然后会弹出 " Converting Images to WebP " 图片转换参数设对话框 , 按照如下选择即可 :

    在这里插入图片描述

    WebP 转换参数分析 :

    ① 压缩方式设置 : 一般都使用有损压缩 , 一些不重要而且很大的图片 , 往死里压 ;

    • " Lossy encoding " 是有损压缩 ;

    • " Use lossless encoding " 是无损压缩 ;

    ② 支持 " 无损压缩 " 的 WebP 图片 : 需要 Android 4.34.3 ( API 1818 ) 以上的版本才可以 , 当前的最低版本一般都是 1818 ,

    ③ 支持带透明度的 WebP 图片 : 需要 Android 4.34.3 ( API 1818 ) 以上的版本才可以 , 当前的最低版本一般都是 1818 ,


    之后会弹出转换图片的选项 , 原来 2.1 MB 的图片 , 转为 75% 有损压缩的 WebP 图片后 , 变为 124.7 KB , 点击 " Finish " 按钮 , 完成转换 ;

    Google 官方建议 7575 是最佳选择 , 兼顾压缩效率与现实效果 ;

    在这里插入图片描述

    原 PNG 格式图片 2701 x 2702 , 32 位颜色值 , 2.24 MB ;

    在这里插入图片描述

    新 WebP 格式图片 2701 x 2702 , 32 位颜色值 , 127.73 KB ;

    在这里插入图片描述





    三、参考资料



    参考文档 :

    展开全文
  • 一、Android 中的 WebP 图片格式兼容问题、 二、Android 中的 WebP 图片格式性能、 三、参考资料、





    一、Android 中的 WebP 图片格式兼容问题



    在 Android 开发者指南 中的 " 核心主题 / 音频和视频 / 支持的媒体格式 " 页面 , https://developer.android.google.cn/guide/topics/media/media-formats 中 , 有对 WebP 格式图片兼容情况的说明 ,

    在这里插入图片描述
    Android 4.0 以下不支持 WebP 图片格式 ; ( 不能使用 )

    Android 4.0 以上支持 不带透明度 并且是 无损压缩 的 WebP 图片 ; ( 有限度的使用 , 不带透明度的图片 , 压缩量有限 )

    Android 4.2.1 以上的系统 , 支持 有损压缩 , 带透明度 的 WebP 图片 ; ( 完全支持 WebP 格式图片 )

    也就是说 , 只有 4.2.14.2.1 以上的系统 , 才完全支持 WebP 图片格式 ;

    现在基本上开发时设置的最小兼容版本都是 4.3 , 可以完全兼容 WebP 格式图片 ;


    Google 提供了工具 , 可以兼容 Android 4.0 以上的系统 , 在所有版本中使用 WebP 图片 ;





    二、Android 中的 WebP 图片格式性能



    图片大小参数 : 在 Android 平台中 , 使用 WebP 格式的图片 , 能极大压缩图片大小 , 可以压缩安装包大小 ;

    编解码速度参数 : 在应用运行时 , 还有一个重要指标 , 就是 WebP 格式图片的编码和解码的速度 ;

    • 编码速度 指的是将 ARGB 图像数据转为 WebP 格式的速度 ;

    • 解码速度 指的是将文件中的 WebP 解码成 ARGB 图像数据的速度 ;

    图片编解码使用环境 :

    • 解码 : 程序运行显示图片的过程 , 就需要用到解码 ;
    • 编码 : 拍照后保存图片 , 截屏 , 向服务器发送压缩后的图片数据 ;




    三、参考资料



    参考文档 :

    博客资源 :

    展开全文
  • webp图片格式

    2016-11-09 12:44:42
    占资源更少的图片资源
  • webp 图片格式

    2016-09-06 11:15:00
    webp 是一种图片格式,出自强大的谷歌公司,具体详情请自行百度了解 兼容性: PC:目前支持以 谷歌内核(webkit)渲染的浏览器,其他主要浏览器支持的不是很好,移动端:android 支持的很好,IOS 即将支持,说明...

    webp 是一种图片格式,出自强大的谷歌公司,具体详情请自行百度了解

    兼容性:

    PC:目前支持以 谷歌内核(webkit)渲染的浏览器,其他主要浏览器支持的不是很好,移动端:android 支持的很好,IOS 即将支持,说明暂时还是不是支持

    文件大小对比:

      5张图片文件大小(jpg),如图:

      5张同样的图片文件大小(webp), 如图:

    相信大家已经看出来了吧,压缩式很明显的,少的不是一点两点吧 哈哈~~~~ 

    至于时间嘛! 从理论上来将 webp 格式的图片会比 jpg 格式的图片在渲染上来说是比较慢的,但是别忘记了,人家体积比你小了很多,所以在整体时间来看的话 webp 格式的图片用时反而比 JPG 图片的用时要短

    效果:

      jpg : 

     webp:

    区别不是很大吧!可以说几乎无区别吧 oh~~~

    上边说了么那么多,下边来简单说下怎么实现吧!

    首先,得有 webp 格式的图片吧!

    下载谷歌提供的一个工具可以把 jpg png 转换成 webp

    下载完后打开文件夹,应该是这样的

    生成的话是用第一个 cwebp.exe, 怎么用呢?

    在终端直接上述 bin 文件里,然后输入 cwebp -H 输出帮助文档说明成功了

    紧接着 输入 cwebp -q 80 image.png -o image.webp  (具体 -q 什么意思 查看 cwebp -H 列出的帮助文档) 这时候就会看到一张 webp 格式的图片生成了,那么问题来了,这怎么使用呢?

    很简单,直接在 img 标签中引入 webp 格式的图片即可,当然只有在 webkit 内核浏览器下方可观看(eg: 谷歌)

    心血来潮,想在本地搭建一个网站,好在别人面前show一把,结果发现怎么挂载到 IIS 上后 webp 图片不显示呢? 奇了怪了~~~~

    原因也很简单,因为 IIS 中默认的不支持 webp 格式的,打开MIME类型 如图: ,点击右边的 打开功能 如图:,进去之后点击右边的 添加按钮 如图

    在弹出的对话框填写如图所示信息 ,ok 重启下 IIS  再刷新浏览器是不是就可以看了呢~~~~

    那么,问题来了,网站图片那么多,而且还在不停的增加 删除 等等一系列的操作,照上边那么做,一张一张去转换,岂不累死,淡定淡定~~~~  此时要 node 登场了!!!!

    先写一个JS 文件  webp.js  具体代码如下:

    const process = require('child_process');
    const fs = require('fs');
    const chokidar = require('chokidar');
    
    const log = console.log.bind(console);
    const ignoreFiles = /(^\..+)|(.+[\/\\]\..+)|(.+?\.webp$)/; // 忽略文件.开头和.webp结尾的
    
    let quality = 75; // webp图片质量,默认75
    let imgDir = 'gallery'; // 默认图片文件夹
    
    // 得到对应的webp格式的文件名,默认为文件名后加上.webp
    function getWebpImgName(path) {
        return `${path}.webp`;
    }
    
    // 得到shell命令
    function getShellCmd(path) {
        return `cwebp -q ${quality} ${path} -o ${getWebpImgName(path)}`;
    }
    
    // 监控文件夹
    var watcher = chokidar.watch(imgDir, {
        ignored: path => {
            return ignoreFiles.test(path);
        },
        persistent: true // 保持监听状态
    });
    
    // 监听增加,修改,删除文件的事件
    watcher.on('all', (event, path) => {
        switch (event) {
            case 'add':
            case 'change':
                generateWebpImg(path, (status) => {
                    log('生成图片' + getWebpImgName(path) + status);
                });
                break;
            case 'unlink':
                deleteWebpImg(getWebpImgName(path), (status) => {
                    log('删除图片' + getWebpImgName(path) + status);
                });
                break;
            default:
                break;
        }
    });
    
    log('biubiubiu~~~ 监控已经启动');
    
    function generateWebpImg(path, cb) {
        process.exec(getShellCmd(path), err => {
            if (err !== null) {
                cb('失败');
                log('请先运行cwebp -h命令检查cwebp是否安装ok。')
                log(err);
            } else {
                cb('成功');
            }
        });
    }
    
    function deleteWebpImg(path, cb) {
        fs.unlink(path, (err) => {
            if (err) {
                cb('失败');
                log(err)
            } else {
                cb('成功');
            };
        });
    }
    let imgDir = 'gallery'; // 默认图片文件路径,注意修改成自己的图片路径
    然后再终端输入 node webp.js 就会在生成对应的 webp 格式的图片,并且指定的文件夹里发生图片的增加 删除都会自动执行,不需要再手动去执行,是不是很方便 哈哈~~~~
    然而,在方便的同时,由于其他浏览器不支持,那么就会造成服务器同样的图片得放两份,有点太占用硬盘空间,怎么能弄的兼容呢?

    webpJS 能解决此问题 下载
    下载后直接在页面中引用即可,会发现 body 中 img 图片地址加载的 webp 格式的图片就会显示了,但是如果图片是动态添加的怎么弄呢?
    那就需要动态的去添加此 JS 文件

    function webPfn(){
    
        var WebP=new Image();
        WebP.onload=WebP.οnerrοr=function(){
    
            if(WebP.height!=2){
                var sc=document.createElement('script');
                sc.type='text/javascript';
                sc.async=true;
                var s=document.getElementsByTagName('script')[0];
                sc.src='webpjs-0.0.2.min.js';
                s.parentNode.insertBefore(sc,s);
            }
        };
        
        WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
    
    }
    
    

    上述函数主要功能: 用 new 出来的 Image 去加载一个 2px 宽的 webp 格式的图片,如果加载后图片宽度不等于 2 ,那就说明浏览器不支持 webp 格式的图片,就动态加载 webpJS 文件

    参考链接:

      http://www.cnblogs.com/season-huang/p/5804884.html

      https://developers.google.com/speed/webp/docs/using

      http://isux.tencent.com/introduction-of-webp.html

      http://webpjs.appspot.com/

      http://webp.codeplex.com/  c# 保存图片时用到的插件地址

     

    
    

    转载于:https://www.cnblogs.com/huhulove/p/5845009.html

    展开全文
  • 【Android 安装包优化】WebP 图片格式性能测试 ( 测试 WebP 图片解码速度 | 测试 WebP 图片编码速度 ) https://hanshuliang.blog.csdn.net/article/details/116102877 源码快照
  • webp 图片格式Introduction 介绍 How much smaller? 小多少? Generating WebP images 生成WebP图像 Browsers support 浏览器支持 How can you use WebP today? 您今天如何使用WebP? 介绍 (Introduction) WebP is ...

    webp 图片格式

    介绍 (Introduction)

    WebP is an Open Source image format developed at Google, which promises to generate images smaller in size compared to JPG and PNG formats, while generating better looking images.

    WebP是Google开发的一种开源图像格式,有望生成比JPG和PNG格式更小的图像,同时生成更好的图像。

    WebP supports transparency, like PNG and GIF images.

    WebP支持透明性 ,例如PNG和GIF图像。

    WebP supports animations, like GIF images

    WebP支持动画 ,例如GIF图像

    And, using WebP you can set the quality ratio of your images, so you decide if you want to get better quality or a smaller size (like it happens in JPG images).

    而且,使用WebP可以设置图像的质量比率,因此可以决定是要获得更好的质量还是缩小尺寸(例如JPG图像中的情况)。

    So WebP can do all GIF, JPG and PNG images can do, in a single format, and generate smaller images. Sounds like a deal.

    因此, WebP可以用一种格式完成所有GIF,JPG和PNG图像可以完成的操作 ,并生成较小的图像 。 听起来不错。

    If you want to compare how images look in the various formats, here’s a great gallery by Google.

    如果您想比较图像在各种格式下的外观, 这是Google的一个不错的图库

    WebP is not new, it’s been around for several years now.

    WebP并不新鲜 ,它已经问世了几年。

    小多少? (How much smaller?)

    The premise of generating smaller images is very interesting, especially when you consider than most of a web page size is determined by the amount and size of the image assets the user should download.

    生成较小图像的前提非常有趣,尤其是当您考虑到大多数网页的大小取决于用户应下载的图像资产的数量和大小时。

    Google published a comparative study on the results of 1 million images with this result:

    Google发布了一百万张图像结果的比较研究 ,结果如下:

    WebP achieves overall higher compression than either JPEG or JPEG 2000. Gains in file size minimization are particularly high for smaller images which are the most common ones found on the web.

    WebP的总体压缩率比JPEG或JPEG 2000高。对于较小的图像(在网络上最常见的图像),最小化文件大小的收益特别高。

    You should experiment with the kind of images you intend to serve, and form your opinion based on that.

    您应该尝试使用打算提供的图像,并据此形成您的意见。

    In my tests, lossless compression compared to PNG generates WebP images 50% smaller. PNG reaches that file sizes only when using lossy compression.

    在我的测试中,与PNG相比,无损压缩生成的WebP图像小50%。 仅当使用有损压缩时,PNG才能达到该文件大小。

    生成WebP图像 (Generating WebP images)

    All modern graphical and image editing tools let you export to .webp files.

    所有现代的图形和图像编辑工具.webp让您导出到.webp文件。

    Command-line tools also exist to convert images to WebP directly. Google provides a set of tools for this.

    还存在命令行工具,可以将图像直接转换为WebP。 Google为此提供了一组工具

    cwebp is the main command line utility to convert any image to .webp, use it with

    cwebp是将任何图像转换为.webp的主要命令行实用程序,可与

    cwebp image.png -o image.webp

    Check out all the options using cwebp -longhelp.

    使用cwebp -longhelp检查所有选项。

    浏览器支持 (Browsers support)

    WebP is currently supported by

    目前支持WebP

    • Chrome

      Chrome
    • Opera

      歌剧
    • Opera Mini

      歌剧迷你
    • UC Browser

      UC浏览器
    • Samsung Internet

      三星上网

    However, only Chrome for Desktop and Opera 19+ implement all the features of WebP, which are:

    但是,只有Chrome for Desktop和Opera 19+才能实现WebP的所有功能,这些功能包括:

    • lossy compression

      有损压缩
    • lossless compression

      无损压缩
    • transparency

      透明度
    • animation

      动画

    Other browsers only implement a subset. Safari and IE do not support WebP at all, and there are no signs of WebP being implemented any time soon in those browsers.

    其他浏览器仅实现子集。 Safari和IE根本不支持WebP,并且也没有迹象表明这些浏览器很快会实现WebP。

    But Firefox supports WebP since version 65 (Jan 2019) and Edge since version 18.

    但是Firefox从65版本(2019年1月)开始支持WebP,从18版本开始支持Edge。

    So if we can serve those users an optimized image, to speed up serving them and consume less bandwidth, it’s great. But check if it actually reduces your images size.

    因此,如果我们可以为这些用户提供优化的图像,以加快为他们提供服务并消耗更少的带宽,那就太好了。 但是请检查它是否确实减小了图像尺寸。

    Check with your JPG/PNG image optimization tooling results, and see if adding an additional layer of complexity introduced by WebP is useful or not.

    检查您的JPG / PNG图像优化工具的结果,看看添加WebP引入的另一层复杂性是否有用。

    您今天如何使用WebP? (How can you use WebP today?)

    There are a few different ways to do so.

    有几种不同的方法可以这样做。

    You can use a server-level mechanism that serves WebP images instead of JPG and PNG when the HTTP_ACCEPT request header contains image/webp.

    HTTP_ACCEPT请求标头包含image/webp时,可以使用提供WebP图像而不是JPG和PNG的服务器级机制。

    The first is the most convenient, as completely transparent to you and to your web pages.

    第一个是最方便的,因为它对您和您的网页完全透明。

    Another option is to use Modernizr and check the Modernizr.webp setting.

    另一个选项是使用Modernizr并检查Modernizr.webp设置。

    If you don’t need to support Internet Explorer, a very convenient way is to use the <picture> tag, which is now supported by all the major browsers except Opera Mini and IE (all versions).

    如果不需要支持Internet Explorer,一种非常方便的方法是使用<picture>标记,除Opera Mini和IE(所有版本)外,所有主流浏览器现在都支持该标记。

    The <picture> tag is generally used for responsive images, but we can use it for WebP too, as this tutorial from HTML5 Rocks explains.

    <picture>标签通常用于响应图像,但是我们也可以将其用于WebP,如HTML5 Rocks的本教程所述

    You can specify a list of images, and they will be used in order, so in the next example, browsers that support WebP will use the first image, and fallback to JPG if not:

    您可以指定图像列表,并且将按顺序使用它们,因此在下一个示例中,支持WebP的浏览器将使用第一个图像,如果不使用,则回退为JPG:

    <picture>
      <source type="image/webp" srcset="image.webp">
      <img src="image.jpg" alt="An image">
    </picture>

    翻译自: https://flaviocopes.com/webp/

    webp 图片格式

    展开全文
  • iSparta WebP 图片格式转换器 , 已经替换了其中的 cwebp 库 , 可以无 wic 运行
  • 主要介绍了Java处理Webp图片格式转换的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Java操作Google Webp图片格式转换实践-附件资源
  • WebP 图片格式是由 Google 基于 VP8 视频编码格式研发的,同时提供有损压缩和无损压缩两种格式。旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。...
  • 一、使用 iSparta 转换 WebP 图片格式、 二、Google 提供的 libwebp 库、 三、参考资料
  • DPG图片压缩技术和webp图片格式 一、DPG图片压缩技术 京东自主研发推出的DPG图片压缩技术,经测试该技术,可以直接节省用户近50%的浏览量,极大地提升了用户的网页打开的速度。能够兼容JPEG,实现全平台,全部浏览器...
  • 本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP ...什么是WebP图片 Google开发并推出 WebP 图片格式已有 5 年了,WebP 可以提供对图片的有损和无损压缩。据官方宣称,对相同图片压...
  • iphone不支持webp图片格式处理方案 方式一(优先考虑) 后端对webp格式的图片进行统一处理,修改文件后缀为jpg,所有前端将全部已jpg格式展现。 方式二(临时方案) 前端采用正则表达式对图片路径进行替换,将== ....
  • 测试结果 : WebP 格式图片 , 解码快 , 编码慢 , 占用空间小 ; 在解码速度上 , WebP 格式要优于 png 格式 ; 在编码速度上 , png 格式优于 WebP 格式 ;
  • js 判断浏览器是否支持webp图片格式 function checkWebp () { try { return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0); } catch (err) { return false; }...
  • //iphone部分手机不识别webp图片格式 //最好找到后台工程师让他修改一下(企业开发正常的操作) //临时自己改,要确保存在1.webp => 1.jpg // goods_introduce: goodsObj.goods_introduce, goods_introduce: ...
  • WebP,或非官方发音为weppy ,是大约5年前由Google Developers 推出的图像格式。 如果您是网站设计师,或者是致力于减少和优化图像文件大小的开发人员,则WebP所具有的能力应该使您面带微笑。 简而言之,以下是您...
  • Webp是Google强推的新一代网络图片格式,特点就是:高质量压缩。能压缩多少呢?5MB的原图,不降低效果,转换成webp格式后大小是几百KB。100KB的图,转换后是9KB。 虽然目前所有主流浏览器都支持这种图片格式,但...
  • WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。 XnConvert可以将Jpg图片与WebP格式图片互转,当然还可以转很多种...
  • 关于常用JPEG、PNG、GIF、WEBP图片格式的理解 前言 在了解这三种图片格式之前,先来了解几个和图片格式相关的概念 有损/无损压缩 图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩...
  • Webp图片格式转换

    2020-03-26 00:00:00
    前言webp格式是Google推出的图片格式这种格式可以无损压缩10%~30%的大小(实测有时可以压缩50%)这样可以大大缩短网页加载速度此篇文章是Linux安装教程正文安装依赖sudo apt-get install libjpeg-dev libpng-dev ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,207
精华内容 5,682
关键字:

webp图片格式