使用WebP节省网站流量和存储空间,加快网站加载速度

简介: 使用WebP节省网站流量和存储空间,加快网站加载速度

使用WebP图片格式节省网站流量、带宽和存储空间,加快网站加载速度。

目前在互联网上,图片流量仍占据较大的一部分。因此,在保证图片质量不变的情况下,节省流量带宽是大家一直需要去解决的问题。传统的图片格式,如 JPEG,PNG,GIF 等格式图片已经没有太多的优化空间。因此 Google 于 2010 年提出了一种新的图片压缩格式 — WebP,给图片的优化提供了新的可能。

什么是WebP

WebP(发音:weppy)是一种同时提供了有损压缩无损压缩(可逆压缩)的图片文件格式,派生自影像编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。

WebP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片档在网络上的发送时间。2011年11月8日,Google开始让WebP支持无损压缩和透明色(alpha通道)的功能,而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试,WebP的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些PNG档在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小。

WebP支持的像素最大数量是16383x16383。有损压缩的WebP仅支持8-bit的YUV 4:2:0格式。而无损压缩(可逆压缩)的WebP支持VP8L编码与8-bit之ARGB色彩空间。又无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释数据。

WebP有静态与动态两种模式。动态WebP(Animated WebP)支持有损与无损压缩、ICC色彩配置、XMP诠释数据、Alpha透明通道。

兼容性

现在主流的浏览器都支持WebP了,Safari和Firefox可能需要较新版本才支持,我测试的最新版本Firefox已经支持WebP,IE不支持。Chrome内核的浏览器都支持。微信和QQ测试也支持。

目前很多大型网站都已经使用WebP格式的图片了,微信公众号文章在很早之前也已经开始使用了,还有很多CDN支持将图片转换为WebP。

图片转WebP格式

这里推荐几个在线转webp图片的网站和工具:

webp2jpg:https://renzhezhilu.gitee.io/webp2jpg-online/
支持jpeg、jpg、png、gif、svg、ico、bmp转webp,可批量。
注:这个网站gif只支持转换第一帧图片。

智图:https://zhitu.isux.us/
智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式。同时,智图平台还会为用户转换一份webp格式的图片。
注:不支持超过5M的图片,超过5M的格式需要下载客户端。客户端可以批量转换,转换不是离线的,需将图片上传服务器转换,对gif支持好像有点问题。
客户端下载地址:http://go.zeruns.tech/N

Any To WebpTool:https://zeruns.lanzous.com/id7zqab

支持jpg、png、gif,压缩效果很好,对gif支持也不错。下面的效果图都是用这个软件转换的。

效果图

普通图片转webp图片质量和大小对比。

下面三张原图大小和压缩为webp后大小分别为:

原图 webp
4.91MB 323KB
6.01MB 3.70MB
3.36MB 454KB

图片请看原文:https://blog.zeruns.tech/archives/547.html

推荐文章

目录
相关文章
|
14天前
|
缓存 前端开发 JavaScript
|
5月前
从网站下载单一超大文件有时超时问题
从网站下载单一超大文件有时超时问题
41 0
|
7月前
|
小程序
小程序上传图片至云存储空间
小程序上传图片至云存储空间
74 0
|
测试技术 C# C++
C# 如何部分加载“超大”解决方案中的部分项目
在有的特有的项目环境下,团队会将所有的项目使用同一个解决方案进行管理。这种方式方面了管理,但是却会导致解决方案变得非常庞大,导致加载时间过长。那么,如何部分加载解决方案中的部分项目呢?
68 0
C# 如何部分加载“超大”解决方案中的部分项目
|
存储 缓存 边缘计算
静态 CDN 加速,命中率过低
分析 CDN 加速命中率原因,帮用户提高加速使用效果
496 0
静态 CDN 加速,命中率过低
增加网站流量的方法
增加网站流量的方法 您选择了一款出色的产品并设计了您的商店。现在,您需要做的就是弄清楚如何增加网站流量以促进销售。从社交媒体到非传统营销黑客,本文将帮助您弄清楚如何增加商店的网站流量。您还将听到专家为增加其网站流量所做的工作。
1141 0
|
搜索推荐 SEO
101种简单的方法可以为您的网站增加流量
101种简单的方法可以为您的网站带来更多流量 在饱和的在线内容场景中,仅仅建立您的网站并等待人们访问它是不够的。 您必须积极主动地在线宣传您的网站和品牌。 不可否认,这说起来容易做起来难得多,特别是因为不是每个人都有财务能力投入付费广告活动和公司赞助。
1380 0
|
搜索推荐 SEO
如何增加网站流量 怎么快速增加网站流量的25种方法
如何提升网站流量?快速增加网站流量的25种方法 向营销人员或企业主询问他们在世界上最喜欢什么,他们可能会告诉你“更多客户”。经常出现在商家愿望清单上的顾客之后?他们网站的流量更多。有很多方法可以增加您网站的流量,在今天的帖子中,我们将查看其中的25个,包括几种免费提升网站流量的方法。
3407 0
|
Web App开发 编解码 UED
YouTube高效传输策略:节省14%带宽 用户体验提升
视频平台会侦测用户端的带宽来调整码率及分辨率,但通常只考虑到编码器的比特率率--质量关联,忽略了用户的可用带宽影响。
1996 0