精华内容
下载资源
问答
  • cwebp名称cwebp -压缩图像文件为的WebP文件概要cwebp [选项] INPUT_FILE -o output_file.webp描述cwebp压缩使用的WebP格式的图像。输入格式可以是PNG,JPEG,TIFF的WebP或生在Y'CbCr样品。选项基本的选项是:-o串...

    cwebp

    名称

    cwebp -压缩图像文件为的WebP文件

    概要

    cwebp [选项] INPUT_FILE -o output_file.webp

    描述

    cwebp压缩使用的WebP格式的图像。输入格式可以是PNG,JPEG,TIFF的WebP或生在Y'CbCr样品。

    选项

    基本的选项是:

    -o串

    指定输出的WebP文件的名称。如果省略,cwebp将进行压缩,但只报告统计数据。使用“ - ”作为输出名称将直接输出到“标准输出”。

    字符串

    显式地指定输入文件。如果输入的文件与启动此选项很有用“ - ”号实例。此选项必须出现最后。任何其他选项以后将被忽略。

    -h,-help

    一个简短的使用说明。

    -H,-longhelp

    所有可能的选项的摘要。

    -版

    打印的版本号(如major.minor.revision)并退出。

    -q浮动

    指定之间RGB通道的压缩系数0和100。默认值是75。

    在有损压缩(默认)的情况下,一个小的因子产生具有较低质量的更小的文件。最好的质量是通过使用一个值达到100。

    在无损压缩(由指定的情况下-lossless选项),一个小的因子能更快的压缩速度,但产生较大的文件。最大压缩是通过使用一个值达到100。

    -alpha_q INT

    指定之间阿尔法压缩的压缩系数0和 100。阿尔法无损压缩是使用的值达到100,而较低的值导致一个有损压缩。默认值是 100。

    -f INT

    指定去块效应滤波器的实力,与0(无过滤)和100(最大滤波)。值为0将关闭任何过滤。较高的值将增加图像解码之后施加的滤波处理的强度。该值越高,画面将出现在更顺畅。典型值通常的范围20至50。

    -PRESET串

    指定一组预先定义的参数,以适应特定类型的源材料。可能的值有:默认情况下,照片,图片, 绘图,图标,文本。

    由于-PRESET覆盖其他参数值(除-q 之一),这个选项最好先出现在参数的顺序。

    -sns INT

    指定空间噪声整形的幅度。空间噪声整形(或简称为SNS)是指用于决定该图像的区域应使用相对较少的位的内置算法的一般集合,并且其中别的更好传送这些比特。可能的范围内变为 0(算法是关闭的)到100(最大效果)。默认值是 80。

    -m INT

    指定要使用的压缩方法。此参数控制了编码速度和压缩文件大小和质量之间的平衡。可能值的范围从0到6。默认值为4。当使用较高的值,编码器将花费更多的时间检查额外的编码可能性,并决定质量增益。较低的值可能会导致在较大的文件大小和较低的压缩质量为代价更快的处理时间。

    -jpeg_like

    改变内部参数映射,以更好地匹配JPEG压缩的预期大小。这个标志通常会产生类似大小的输出文件以它的JPEG当量(对于相同-q设置),但具有更少视觉失真。

    -公吨

    如果可能的话使用多线程编码。与透明通道源使用有损压缩时,此选项才有效。

    -记忆不足

    通过保存压缩后大小的四倍(典型值)减少有损编码的内存使用情况。这将使得在编码慢和输出的大小和失真略有不同。此标志仅方法3和建立有效的,并且默认是关闭的。注意,离开这个标志关闭将对比特流一些副作用:它迫使某些位流的功能,如分区(强制的号码1)。需要注意的是比特流大小的更详细的报告是由打印cwebp使用此选项时。

    -af

    开启自动过滤。这个算法将花费额外的时间优化滤波强度以达到良好的平衡质量。

    其他选项

    更高级的选项有:

    -sharpness INT

    指定过滤的锐度(如果使用的话)。范围为0(锐度)到7(最锐利)。默认值为0。

    -强大

    使用强过滤(如过滤被用来感谢-f 选项)。强大的过滤功能默认是开启的。

    -nostrong

    禁用强滤波(如果滤波被用来感谢-f 选项),并使用简单的过滤来代替。

    -segments INT

    改变的分区数的SNS算法的分割过程中使用。段应在范围1至4。默认值为4。此选项对方法第3及以上没有影响,除非-low_memory使用。

    -partition_limit INT

    通过限制由一些宏块中使用的比特数降低质量。范围为0(无降解,默认值)到100(完全降解)。有用的数值通常大约是30 - 70中度高画质图像。在VP8格式中,所谓的控制分区具有512K的一个限制,用于存储以下信息:该宏块是否被跳过,它所属的段,它是否被编码为内4×4或内16×16模式,并且最后的预测模式,以用于每个子块。对于一个非常大的图象,512k的仅留下了空间,以每16×16宏块少的比特。绝对最小是每宏块4位。跳过,段,和模式信息最多可以使用几乎所有的这些4位(虽然壳体是不大可能的),这对于非常大的图像问题。所述partition_limit因子控制的频率最比特昂贵模式(内4×4)将被使用。这是有用的情况下达到了512K限制,并显示以下信息:错误代码:6(PARTITION0_OVERFLOW:分区#0太大,以适应512K)。如果使用 -partition_limit不足以满足512k的约束,应该以每宏块节省更多的头比特使用更少的段。见-segments选项。

    -size INT

    指定目标大小(以字节为单位),以试图达到的压缩输出。压缩机将进行部分编码的几通,以获得尽可能接近这一目标。

    -psnr浮动

    指定目标PSNR(单位为dB),试图达到的压缩输出。压缩机将进行部分编码的几通,以获得尽可能接近这一目标。

    -pass INT

    设置的推移选项一起使用二分法期间使用的最大数量 -size或-psnr。最大值是10。

    调整大小宽高

    调整源与大小的矩形宽度点¯x 高度。如果(但不是两者)的宽度或高度的参数是0,值将保持纵横比来计算。

    -crop x_position y_position宽度高度

    裁剪源在坐标与左上角的矩形(x_position,y_position),大小宽点¯x 高度。这复种面积必须在源矩形中完全包含。

    -s宽度高度

    指定输入文件实际上是由继ITU-R BT.601推荐生在Y'CbCr样品,在4:2:0线性格式。亮度平面大小为宽点¯x 高度。

    -Map INT

    输出附加ASCII地图编码信息。可能映射值的范围是1至6。这只是为了帮助调试。

    -pre INT

    指定一些预处理步骤。使用值2将触发RGBA-在质量相关的伪随机抖动> YUVA转换(仅适用于有损压缩)。

    -alpha_filter串

    指定阿尔法飞机的预测滤波方法。一个 没有,快或最好,在日益复杂和缓慢秩序。默认为快。在内部,阿尔法过滤是使用四种可能的预测(无,水平,垂直梯度)进行。的最佳 模式将尝试依次在每个模式并挑选一个这使较小的大小。在快速模式将只是试图形成一个先验的猜测没有测试所有的模式。

    -alpha_method INT

    指定用于阿尔法压缩算法:0或1。算法 0表示不压缩,1使用的WebP无损格式进行压缩。默认值是1。

    -alpha_cleanup

    修改看不见的RGB值下的全透明区域,以帮助压缩。默认是关闭的。

    -blend_alpha INT

    这个选项共混alpha通道(如果存在)用十六进制作为为0xRRGGBB指定背景颜色的来源。Alpha通道之后被重置为不透明值255。

    -noalpha

    使用此选项将丢弃Alpha通道。

    -lossless

    编码图像而没有任何损失。

    -hint串

    指定有关输入图像类型的提示。可能的值有:照片, 图片或图形。

    元数据串

    逗号分隔的元数据的列表中,如果存在从输入复制到输出。有效值:全部,无,EXIF,ICC,XMP。默认为无。

    请注意,每个输入格式可能不支持所有组合。

    -noasm

    禁用所有组件的优化。

    -v

    打印额外的信息(尤其是编码时间)。

    -print_psnr

    计算并报告平均PSNR(峰信噪比)。

    -print_ssim

    计算并报告平均SSIM(结构相似度指标,请参阅 http://en.wikipedia.org/wiki/SSIM了解更多详细信息)。

    -print_lsim

    计算并报告当地的相似性指标(最小误差之和并置的像素邻居之间)。

    -进展

    报告编码%的进度。

    -安静

    不打印任何东西。

    -短

    只打印用于测试目的的简要信息(输出文件大小和PSNR)。

    例子

    cwebp -q 50 -lossless picture.png -o picture_lossless.webp

    cwebp -q 70 picture_with_alpha.png -o picture_with_alpha.webp

    cwebp -sns 70 -f 50 -size 60000 picture.png -o picture.webp

    cwebp -o picture.webp -- ---picture.png

    展开全文
  • webp图片详解

    2015-07-03 14:12:00
    WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后...

    WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。

    2010 年发布的 WebP 已经不算是新鲜事物了,在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影,而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂很多的项目中得到应用,如腾讯新闻客户端、腾讯网、QQ空间等,同时也有一些针对 WebP 的图片格式转换工具,如智图(http://zhitu.tencent.com),iSparta(http://isparta.github.io/)等。

    WebP 探寻之路

    (Google 已和正在部署的 WebP 的产品)

    可喜的是,直到今年,Google 对 WebP 依旧投入了持续的热情,2014 年的 Google I/O Event 中也出现了两个介绍 WebP 应用的视频(https://www.google.com)。WebP 已大量应用于全球流量消耗最多的 Google 产品中,你还有理由拒绝它吗?

    WebP 探寻之路

    WebP 的优势

    上面只是简单介绍了这种图片格式的背景和应用,不过 “talk is cheap”,这种格式优势在哪里?除了压缩效果极好,图片质量能否得到保障?这需要更理性客观的数据:

    这里列举一个简单的测试:对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果。更多测试查看  https://isparta.github.io (请用 Chrome 浏览器打开)

    WebP 探寻之路

    可以得出结论:

    • PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩
    • 转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)
    • 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

    WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

    科技博客 GigaOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,网页加载速度提升了 10%;谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天可以节省几 TB 的带宽,页面平均加载时间大约减少 1/3;Google+ 移动应用采用 WebP 图片格式后,每天节省了 50TB 数据存储空间。

    兼容性与可用性

    现在问题来了:WebP 的支持度和兼容性如何?

    根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。假如你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,其他版本以及 iOS 都可以直接使用官方提供的解析库(Android 、iOS )。

    为了验证 WebP 图片格式的业务可行性,我们从流畅度、解码耗时、CPU 使用、内存占用几个维度进行的分析,在开发同学们的帮助下得到了非常宝贵的测试数据:

    测试一

    AndroidQQ 下 PNG 和 WebP 各指标对比。

    • 测试环境:AndroidQQ、Galaxy Nexus、Android4.2.2 系统
    • 测试对象:WebP、PNG

    测试数据(部分):

    WebP 探寻之路

    测试结论:

    • 解码耗时:WebP 的解码时间是 PNG 格式的 4.4 倍(24.8ms)
    • 流畅程度:两种格式下,AIO 滑动流畅度无明显差异
    • CPU使用:两种格式下,连续发送 15 个表情,CPU 使用均在 10%—26% 之间波动,两者无明显差异
    • 内存占用:两者格式下,连续发送 15 个表情,PSS 内存占用跨度均为 11M,无明显差异

    测试二

    iPhoneQQ 下 PNG 和 WebP 各指标对比。

    • 测试环境:iPhoneQQ、iPhone4、iOS5.1.1 系统
    • 测试对象:WebP、PNG

    测试数据(部分):

    WebP 探寻之路

    测试结论

    • 解码耗时:WebP 的解码时间是 PNG 的 5 倍 左右(64.1ms)
    • 流畅程度:WebP 的 FPS 平均值会比 PNG 的平均值要小,但是比较稳定,跨度不大,性能也相差不大
    • CPU使用:总体上看,PNG 格式的表情使用 CPU 波动比较大。从平均值来看 WebP 格式表情占用的 CPU 会比 PNG 表情的占用率大
    • 内存占用:WebP 格式表情,占用内存的跨度为 4M,波动比较明显。PNG 格式表情,占用内存的跨度为 5M,没有明显波动。停止发送表情后,40s 左右内存均有回降

    可见除了 WebP 在解码时间与 PNG 有较明显差异(毫秒级别)之外,总体使用体验和 PNG 基本无差异。同时也需要明确,移动设备的发展迅猛,硬件升级快,上一年的表现也许在今年又有了明显的提升。所以,在 App 中使用 WebP 基本没有技术阻碍。

    对原创表情商城的技术指导

    在验证了业务可行性之后,WebP 又激发了我们对另外一些方向的思考:既然它表现如此优秀,能否进一步摸清其“秉性”,得到一些能在未来使用中遵循的指导方案?

    于是,为了更深入了解 WebP 特性,我们针对原创表情项目 “不同的表情图片,如何获得 WebP 的最佳压缩效率” 问题继续展开探究,主要从图片规格、色彩数(颜色数量)、参数配置几个维度进行:

    探索一:图片规格

    通过阅读文献了解到 WebP 使用的是 Fancy 采样算法,既然是采样算法必然有采样区块,而 JPEG 的采样区块是 8*8,对于原始图片的长宽不是 8 的倍数,都需要先补成 8 的倍数,使其能一块块的处理,所以对于 8 的整数倍的图片,压缩会更高效。

    那么 WebP 的采样区块会是多少?我们在其他因素保持不变的前提下改变图片规格,选取了 200*200 附近多个规格值,得到了一些数据。将数据可视化之后可以看到凡是以 16*16 倍数(160*160、176*176、192*192、256*256)为规格的图片,有损压缩的比例都明显大于以 4*4 或 8*8 的倍数为规格的图片。

    WebP 探寻之路

    结论

    原创表情可以考虑使用 “16n*16n” 的规格。目前原创表情选择的是 200*200 的规格大小,实际上选择 256*256 或者 192*192 能获得更高的 WebP 压缩效率,量级在千分之几。

    探索二:色彩数

    在 JPEG 和 PNG 格式的选择经验上可以知道,对于色彩复杂的图片,一般使用 JPEG 格式,而对于色彩单一的图片,使用 PNG 格式。可见色彩数会影响图片的压缩效果。于是我们通过 Photoshop 中的色阶分离功能调整表情图片的色彩数,在其他因素保持不变的前提下对比不同色彩数对于 WebP 有损无损压缩的影响。

    WebP 探寻之路

    可见,在色彩数相对较少的前提下,无损压缩的效果要优于有损压缩;而色彩数很多时,有损压缩效果要优于无损压缩,这个分界点在 256±100 之间。

    结论:

    建议原创表情尽量控制颜色数在 256 色以内,采用无损压缩性价比最高。

    • 小于 256 色:以图标,图形,剪贴画为代表,最适合采用 WebP 无损压缩,精细度完美,体积大幅减少;
    • 大于 256 色:以多数表情图,广告图为代表,最适合采用 WebP 有损压缩,选择较高压缩比(建议压缩质量为 100% ~ 75%)
    • 远大于 256 色:以风景照,视频截图为代表,最适合采用 WebP 有损压缩,选择适中压缩比(建议压缩质量为 75% 以下)

    探索三:色温、渐变与杂色、直线与直线、描边

    WebP 探寻之路

    随后又从色温、渐变与杂色、直线曲线、是否需要描边上进行了分析,最后的结论即:

    • 色温并不会影响表情图片的压缩效果,可大胆用色
    • 渐变与杂色理论上都是增加色彩数,它的压缩规律从符合第二条,但建议表情图片少用渐变杂色和不必要的线条
    • 直线与曲线理论上也是增加了色彩数(因为曲线边缘会存在渐变),建议如果表情中可以“直”的地方就不要“弯”
    • WebP 格式的图片不会存在毛边问题,所以不需要为表情图片添加描边

    探索四:压缩配置

    为了得到无损压缩和有损压缩的最佳压缩配置,我们通过对 900 张表情图片进行不同压缩配置的测试(大部分表情图片的色彩数都在 256 色以上),得到下面的数据:

    WebP 探寻之路

    压缩参数说明:

    • -lossless:无损压缩
    • -q:压缩质量,值越大越图片质量越好
    • -m:压缩方式,值越大则图片质量越好,体积越小,但是耗时较长

    可以发现,无损压缩表现很稳定,压缩质量越高,压缩效果也越好。而有损压缩在压缩质量设置为 75 以上之后,压缩效果反而减弱,甚至压缩后的图片体积会大于压缩前的体积。所以得出以下结论:

    • 选择无损压缩时,“-lossless -q 100” 是最佳方案
    • 选择有损压缩时,“-q 75”是最佳方案(图片质量与体积大小达到均衡)
    • 无论何种压缩参数,加上“-m 6”都能使得输出的 WebP 图片进一步减少体积,量级是1%~2%,但是会增加耗时

    最终,得出了一个正反面案例,从技术角度分析不同的表情图标的优劣(强调一下是“技术角度”,这里列举的表情都很赞 ^_^)。

    WebP 探寻之路

    动态 WebP 初探

    了解完静态 WebP,下面再了解一下动态 WebP(Animated WebP):2013 年 11 月 21 日,Animated WebP 终于取得进展,并在 Chrome32 Beta 中得到了支持。目前 Animated WebP 支持将 GIF 直接转换成 Animated WebP,或者将多张 WebP 图片组合成 Animated WebP。与传统的 GIF 图比较,Animated WebP 的优势在于:

    • 支持有损和无损压缩,并且可以合并有损和无损图片帧
    • 体积更小,GIF 转成有损 Animated WebP 后可以减小 64% 的体积,转成无损可以节省 19% 的体积
    • 颜色更丰富,支持 24-bit 的 RGB 颜色以及 8-bit 的 Alpha 透明通道(而 GIF 只支持 8-bit RGB 颜色以及 1-bit 的透明)
    • 添加了关键帧、metadata 等数据

    假如你在使用 Chrome32 以上的浏览器,可以点这里(https://isparta.github.io)体验。

    WebP 探寻之路

    但新兴的事物必然存在不足的地方,Animated WebP 存在的问题:

    • 消耗较多的 CPU 和解码时间(多 1.5~2.2 倍)
    • 和 GIF 相比起来支持度还不够,目前仍无法通用
    • 为了支持 Animated WebP,Chrome 的新内核 Blink 添加了近 1500 行的代码

    根据自己实际的测试,发现 Animated WebP 的压缩效果较不稳定,在默认压缩配置下达不到 Google 官方提供的示例效果。但 Animated WebP 依然有很多值得期待的空间,值得继续关注。

    综合技术方案

    对于不同场景下 WebP 的使用,我们总结了一些解决方案,如下:
    1、若使用场景是浏览器,可以:

    • JavaScript 能力检测,对支持 WebP 的用户输出 WebP 图片
    • 使用 WebP 支持插件:WebPJS:http://webpjs.appspot.com

    2、若使用场景是 App,可以:

    3、转换工具:

    iSparta 是我们组针对 WebP 和 APNG 两种新型图片格式的转化而开发的一款桌面应用,直接图片批量转换为 WebP,同时提供多种参数配置,欢迎体验。

    WebP 探寻之路

    【跟上流行的必备好文】

     

    原文地址:http://www.uisdc.com/image-format-webp-introduction

    转载于:https://www.cnblogs.com/jquery37/p/4618522.html

    展开全文
  • 前端性能优化之WebP图片

    千次阅读 2020-08-13 23:59:52
    WebP 是由Google开发的一种新的图片格式,它支持有损压缩、无损压缩和透明度,压缩后的文件大小比JPEG、PNG等都要小。诸多的好处使它成为了当下前端性能优化的重要切入点之一。 使用WebP 由于之前
    前言

    前端性能涉及方方面面, 根据优化角度切入点的不同可以分为页面工程优化和代码细节优化两大方向。

    • 页面工程优化: 从页面请求开始, 涉及网络协议、 资源配置、 浏览器性能、 缓存等;
    • 代码细节优化: JavaScript 对 DOM 操作等。

    今天要介绍的是一种叫WebP格式的图片。

    WebP介绍

    WebP 是由Google开发的一种新的图片格式,它支持有损压缩、无损压缩和透明度,压缩后的文件大小比JPEG、PNG等都要小。诸多的好处使它成为了当下前端性能优化的重要切入点之一。

    使用WebP

    由于之前的一个项目中大量的使用了图片,这就让图片资源的优化成为了整个项目性能优化的瓶颈。虽然图片懒加载对性能有一定的提升,但是为了让性能得到更大的提升,我调研并应用了 WebP 格式图片进行替换。

    WebP 的兼容性还不是很好,不过好在它兼容 Chrome,以及 Android 的 webview。
    因为不是所有浏览器都支持 WebP 格式,为了解决问题,我进行了多种尝试

    要么确保在支持 WebP 格式的浏览器中使用,要么让不支持 WebP 的浏览器支持这种格式。

    为了让 WebP 可以应用到支持它的浏览器,并且在不支持的浏览器中依然使用传统的图片格式,

    解决方案1:
    使用<picture>标签,<picture>是 H5 中的一个新标签,类似<video>它也可以指定多个格式的资源,由浏览器选择自己支持的格式进行加载。

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

    如果浏览器不支持 WebP 格式,那么会自动使用 img 标签,如果支持就会使用 WebP 图片。并且当浏览器不支持 <picture>标签时,也会默认使用 img 标签,图片仍然会正常展示。只不过 css 无法选取 <picture>标签,但是仍然会选取到 img 标签。
    这种方式兼容性还算不错,不过依然有很大的局限性,如不能作用于 css 中的图片、背景图片。

    解决方案2:
    使用JS替换图片的URL,类似图片懒加载的原理,根据浏览器是否支持 WebP 格式,给 img 的 src 赋不同的值。
    具体的操作就是给浏览器一个 WebP 格式的图片,看浏览器是否能正确渲染,在这个异步的方法中根据渲染的成功与否,执行回调函数,然后将结果存储在localstorage中,避免重复检查。代码如下:

    function checkWebp(callback) {
      var img = new Image();
      img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(result);
      };
      img.onerror = function () {
        callback(false);
      };
      img.src = 'data:image/webp;base64,lAABSoBAQVXD+JaQAUkRAQCA4ADsJAAdAIBYAUAAlGRAwAA3AAEAA';
    }
    

    然后根据 checkWebp 的回调函数参数判断是否支持webp格式来决定是否替换src

    function showImage(supWebp){
      var imgs = Array.from(document.querySelectorAll('img'));
    
      imgs.forEach(function(i){
        var src = i.attributes['data-src'].value;
    
    	// 如果支持则替换
        if (supWebp){
          src = src.replace(/\.jpg$/, '.webp');
        }
    
        i.src = src;
      });
    }
    
    checkWebp(showImage);
    

    此种方式较为常用,也是社区里最为推荐的一种方式,可以很好的弥补方案1的缺陷。

    解决方案3:
    让不支持 WebP 的浏览器支持 WebP 并不是不可能,但是根据目前的情况来看,很多项目没有必要这么做。因为虽然 WebP 的解码器是开源的,并且已经有用 js 写的比较成熟的 WebP 解码器,引入库按照说明即可进行解码成 base64,就可以让不支持 WebP 的浏览器支持 WebP ,不过由于 js 解码能力有限,速度比较慢,对性能有一定的影响,所以不是特别推荐,也不是目前主流的做法,需要自行根据项目实际情况选择使用。

    结语

    以上就是目前比较常见的支持 WebP 的做法,经过各种流量测试,全站替换 WebP 后性能提升25%左右,虽然没有达到官方统计的30%以上,但提升还是非常大的。如果项目中大量的使用图片,那么 WebP 绝对是不可忽视的性能优化点。

    展开全文
  • 但是,webp图片需要使用Chrome才能查看,如果没有安装第三方软件,那么保存下来的webp图片在mac上是不能查看的,如下图所示。现在已经有不少在线转换网站,可以把webp图片转换为png图片。但是如果每次都要先下载到...

    webp是Chrome支持的一种图片格式,质量比jpg/png高,体积却更小。

    但是,webp图片需要使用Chrome才能查看,如果没有安装第三方软件,那么保存下来的webp图片在mac上是不能查看的,如下图所示。

    6f1fca1065a94508b83f48e4c5dca44f.png

    现在已经有不少在线转换网站,可以把webp图片转换为png图片。但是如果每次都要先下载到本地,再上传到转换网站,最后再下载,这显然太麻烦了。

    我们使用这张图片来做演示:

    https://webinput.nie.netease.com/img/sword/logo.png

    这是网易的新作《轩辕剑之龙舞云山》的logo,在Chrome上查看的效果如下图所示:

    79bdfe876c6c3d679ae2a38b651a0b72.png

    如果你在图片上右键,选择“图片储存为”,你会发现只能存储为webp格式,如下图所示。

    79659367e623b72442a642507ad6c88f.png

    这个时候有两种方式来解决问题:

    1. 使用不支持webp的浏览器。例如macOS的Safari浏览器,Windows的IE、Edge浏览器。此时图片会自动变成png格式,如下图所示。

    dae70c3aed1a1cb425b7d63925dd5d48.png

    2. 使用wget或者curl或者迅雷下载。

    如果是wget,那么命令为:

    wget https://webinput.nie.netease.com/img/sword/logo.png

    如果是curl,那么命令是:

    curl https://webinput.nie.netease.com/img/sword/logo.png > logo.png

    展开全文
  • 客户端WebP 图片格式优化

    千次阅读 2017-09-14 23:20:13
    前言在移动端,图片一直是流量大头,一些...而对传统的JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致,而 Google在这个时候给了开发者一个新选择:WebP。在Google 的明星产品如 Youtube、Gmail、Google Play
  • 跟霍哥取经,了解到一种新的图片存储格式webp,试了下,果然让人兴奋,Amazing webp, amazing Google! WebP is a new image format that provides lossless and lossy compression for images on the web. ...
  • 为什么选择webp图片? WebP比同等质量的JPEG和PNG都要小,一般能减少25%-35%的文件大小,能有效的提升加载性能。 YouTube自从使用WebP之后,页面加载速度提升了10% Facebook自从使用WebP之后,JPEG的存储减小了25%-...
  • 背景与挑战科技博客 GigaOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,...Google+ 移动应用采用 WebP 图片格式后,每天节省了 50TB 数据存储空间。但Webp最大的缺点在于压缩算法计算复杂度是JPEG的10倍以上...
  • WebP,或非官方发音为weppy ,是大约5年前由Google Developers 推出的图像格式。 如果您是网站设计师,或者是致力于减少和优化图像文件大小的开发人员,则WebP所具有的能力应该使您面带微笑。 简而言之,以下是您...
  • 关于webp图片格式初探

    千次阅读 2016-01-30 23:08:09
    不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值且值得探索的事情。...
  • 自从 Google 推出WebP 图片格式,已经过去五年了。Google 说,WebP 提供有损和无损压缩,相比 JPEG 压缩,WebP 压缩文件大小,能更小约 25%。 Google 的目标是让 WebP 成为 web 图片的新标准,但是并没有成为现实。...
  • Google近日在博客上通报了他们提出的新型图片存储格式 -WebP- 的最新进展。Google有意让WebP成为新的网络图形存储格式标准以挑战JPEG、PNG等格式的地位。从博文中我们了解到,WebP新加入了透明效果,对JPEG了解的...
  • 目前针对图片服务的第三方,有阿里云的oss图片存储服务器,七牛云和又拍云,价格都不便宜。怎样能够少流量又高效地服务用户呢?webp图片编码技术应运而生(可能google根本没考虑这点,只是为了提高网络图片传输速度...
  • 前言 在移动端,图片一直是流量大头,一些商品列表和详情等页面,...而对传统的JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致,而 Google在这个时候给了开发者一个新选择:WebP。在Google 的明星产品如 Yo...
  • WEBP

    2016-06-27 12:26:03
    webp的应用
  • 前言不管是 PC 还是移动端,图片一直是流量...但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致, 若想改变现状开辟新局面,便要有釜底抽薪的胆量和气魄,而 Google 给了我们一个新选择:WebP。对
  • 关于常用JPEG、PNG、GIF、WEBP图片格式的理解 前言 在了解这三种图片格式之前,先来了解几个和图片格式相关的概念 有损/无损压缩 图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩...
  • /*** Created by PhpStorm.* User: liuft* Date: 2016/1/22* Time: 11:51*/date_.../*** jpg压缩成webp格式* @param string $dir [webp图片存储路径]* @param int $n [压缩图片的张数]* @param int $prefix ...
  • 在iOS 客户端基于 WebP 图片格式的流量优化(上)这篇文章中,已经介绍了WebP格式图片的下载使用,仅仅只有这样还远远不够,还需要对已经下载的图片数据进行缓存。 曾经有句名言『计算机世界有两大难题,第一是...
  • 而且现在很多资源存储的云服务商都支持请求webp格式的图片。 所以说,在网站中使用时webp格式,可以让网站打开更快,也更节省网络带宽。 但是并不是所有的网站都支持webP格式的,所以在使用之前,先判断下是否支持...
  • 作为移动领域所力推的图片格式,WebP图片在商业领域证明了其应有的价值。基于其他格式的横向对比,其在压缩性能表现,及还原度极为优秀,节省大量的带宽开销。基于可观的效益比,团队早前已开始磋商将当前图片资源...
  • 在工作过程中遇到部分网络图片采用webp格式,但是opencv不支持webp格式,需要寻求解决方案。另外,还需要在windows环境下的python程序中调用,最终发现有两个可行方案:1、调用外部接口,2、使用google提供的libwebp...
  • 数码相机能将上千张高质量图片存储到一张内存卡里、智能手机可以与邻近设备快速分享高分辨率的图片、网站与手机等移动设备能快速展示各种富媒体。然而,如果图片只能以最原始的格式进行存储的话,以上所有都只是纸上...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,174
精华内容 2,869
关键字:

webp图片存储