找回密码
 立即注册
搜索
查看: 341|回复: 9

活用无损WebP节省论坛流量

[复制链接]

4

主题

98

回帖

901

积分

热带风暴

积分
901
发表于 2025-1-10 21:10 | 显示全部楼层 |阅读模式
本帖最后由 Meow 于 2025-1-12 15:42 编辑

无损WebPWebP lossless)保持图片质量同时,也能显著减少文件大小,对于流量占支出大头的论坛,更是节约资源的良方。不同于有损WebP(WebP lossy)基于单帧VP8视频而不如目前最新的JPEG编码技术,无损WebP另使用谷歌研究团队阿拉库亚拉博士(Jyrki Alakuijala)开发的VP8L技术,放在当下仍是市面上第二强的图片无损压缩格式。

限制

无损WebP适合各类非摄影彩色图片,并支持Alpha通道,但如果图片有任一下列条件则不应使用无损WebP:

  • 来源非无损
  • 色彩大于8比特(RGBA合32比特)
  • 广色域与HDR
  • 通道数大于4
  • 分辨率大于16,383*16,383像素


制作

效率最好的无损WebP需由命令行完成。首先系统要有libwebp,在Windows的PowerShell可透过winget install libwebp安装(需先行安装WinGet),而在macOS的终端(Terminal)则可透过brew install webp安装(需先行安装Homebrew)。

然后使用此命令行为原图制作无损WebP:
  1. cwebp -lossless -m 6 -q 100 -mt 原图 -o 新名.webp
复制代码

-m 6 -q 100可让压缩效率升到最高,而-mt会尽可能使用多线程压缩,并留意“原图”需包含扩展名。依照图片大小和电脑性能差异,有时编码时间可能长达数十秒,需耐心等候完成。

附件WebP.zip包含Windows使用的WebP.bat(修改自视频创作者ThioJoe提供的),将单张原图拖至此文件的图标即可开始制作;以及macOS的WebP.workflow(Meow研究的),后者点击安装就会加入快速动作,进而可在访达(Finder)直接对原图批量制作WebP。两份的cwebp命令皆可自定义,目前设置为无损。

其他软件也可存储无损WebP,但选项大多有限,效率也不如命令行,更缺乏之后提到的“近无损”功能。

近无损

无损WebP使用的VP8L技术还包括近无损near-lossless)功能,在尽可能保持视觉无损同时进行细微有损压缩,相比纯无损还能再显著降低文件大小,一般情况下约略等同或优于JPEG质量100的画质。

cwebp命令使用近无损,和纯无损大同小异:
  1. cwebp -near_lossless 60 -m 6 -q 100 -mt 原图 -o 新名.webp
复制代码

数值可选0到100,谷歌建议60就能达到视觉无损,而100就是纯无损,注意这并非图片整体质量数值。

查看与转存

Can I use...网站统计将近97%浏览器版本支持WebP显示,因此在主流浏览器查看WebP图片已无障碍。Windows 11版本23H2开始支持在“照片”(Photos)查看WebP,iOS/iPadOS 14与macOS Big Sur(版本11)起则从系统层面支持查看WebP。

第三方绘图软件如Adobe Photoshop、苹果正在收购的Pixelmator Pro都能读取与输出WebP图片,就连来自日本的Clip Studio Paint也在版本3.0.0起完整支持WebP。

WebP如需转存PNG,使用命令(需已安装libwebp):
  1. dwebp 原图 -o 新名.png
复制代码

其他选项和格式可透过dwebp -h查看。支持查看WebP的软件,大多也支持另存PNG图片。

简测

选择6张来源无损、介于1到2MiB且经优化的PNG图片,其中2张有Alpha通道,执行上述提到的WebP无损、近无损(数值60)压缩,并利用DSSIM、SSIMULACRA2等对照工具确认,无损确实“数学上无损”、近无损与JPEG XL d0.3质量基本相符。

图片PNG(byte)WebP无损(byte)减少WebP近无损(byte)减少
1,105,500707,97036.0%549,38050.3%
1,322,383951,39228.1%826,65837.5%
1,548,6671,245,74419.6%1,119,75027.7%
1,609,6251,170,95827.3%847,51647.3%
1,656,9731,201,43227.5%770,53253.5%
1,787,9741,333,95625.4%1,057,22840.9%


相比PNG,无损WebP可节省2到3成左右、近无损更可节省3到5成左右的空间,而WebP无损对于越简单的图片效率越高,近无损则是在具备Alpha透明度的图片更加出色。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

1

主题

63

回帖

933

积分

热带风暴

积分
933
发表于 2025-1-10 23:56 | 显示全部楼层
本帖最后由 大水台6 于 2025-1-10 23:59 编辑

Cloudflare CDN有一项设置是可以将论坛的图片全部改成WebP格式的(即Image Optimization -> Polish -> lossless -> WebP)。
考虑到有人反映部分软件无法处理,暂时没有修改的打算。

点评

不建议强制,会有很多问题。  发表于 2025-1-11 00:41

46

主题

620

回帖

2204

积分

管理员-厄尔尼诺

积分
2204
QQ
发表于 2025-1-11 18:23 | 显示全部楼层
webp确实是很不错的格式,但是不少平台一直不好好做支持,比如qq
通用性强还是只能jpeg/png,jpeg其实开到422是质量和大小的平衡点,不过大部分人大多数时候都是发png就是了
未来也许得看看能不能在后端做一些操作自动压缩过大图片

4

主题

98

回帖

901

积分

热带风暴

积分
901
 楼主| 发表于 2025-1-12 01:19 | 显示全部楼层
xiaoqianWX 发表于 2025-1-11 18:23
webp确实是很不错的格式,但是不少平台一直不好好做支持,比如qq
通用性强还是只能jpeg/png,jpeg其实开到4 ...

我还是不支持网站再处理用户上传的原图,尤其是后台强制将PNG转成无损WebP,只要碰到我提到的那些限制,即便技术上是无损处理,实质上就是破坏性修改过了。至于有损WebP,也因为对比目前JPEG编码没有优势,额外耗费资源另外生成WebP缩图更是毫无必要。

或许以后还会再开优化JPEG与PNG的教程,只是相比WebP只要探讨谷歌自家编解码器,JPEG和PNG的部分要研究的可更多了。

46

主题

620

回帖

2204

积分

管理员-厄尔尼诺

积分
2204
QQ
发表于 2025-1-12 10:24 | 显示全部楼层
Meow 发表于 2025-1-12 01:19
我还是不支持网站再处理用户上传的原图,尤其是后台强制将PNG转成无损WebP,只要碰到我提到的那些限制, ...

肯定不会是处理所有内容,最多是大于一定大小的文件进行压缩
现在有几个贴总文件大小是大的挺离谱的,甚至有一个页面要加载完整要加载320mb的情况

4

主题

98

回帖

901

积分

热带风暴

积分
901
 楼主| 发表于 2025-1-12 15:47 | 显示全部楼层
xiaoqianWX 发表于 2025-1-12 10:24
肯定不会是处理所有内容,最多是大于一定大小的文件进行压缩
现在有几个贴总文件大小是大的挺离谱的,甚 ...

能私信告诉我是哪个页面有总和320MB的图片?应该是很好的研究资源。

另外,后来决定把PNG元数据清干净,因此重测了一遍简测的图片。cwebp语法也因此拿掉了-metadata,因为对于非摄影图片意义不大。

46

主题

620

回帖

2204

积分

管理员-厄尔尼诺

积分
2204
QQ
发表于 2025-1-12 18:12 | 显示全部楼层
Meow 发表于 2025-1-12 15:47
能私信告诉我是哪个页面有总和320MB的图片?应该是很好的研究资源。

另外,后来决定把PNG元数据清干净, ...

https://tyboard.dapiya.top/forum.ph ... &extra=page%3D3
here

46

主题

620

回帖

2204

积分

管理员-厄尔尼诺

积分
2204
QQ
发表于 2025-1-12 18:12 | 显示全部楼层
Meow 发表于 2025-1-12 15:47
能私信告诉我是哪个页面有总和320MB的图片?应该是很好的研究资源。

另外,后来决定把PNG元数据清干净, ...

https://tyboard.dapiya.top/forum.ph ... &extra=page%3D3
here

4

主题

98

回帖

901

积分

热带风暴

积分
901
 楼主| 发表于 2025-1-12 22:52 | 显示全部楼层


初步跑一跑工具发现优化潜力巨大,绝大多数PNG原图压缩效率太低,优化后节省约41%,转成无损WebP又节省14%。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|TY_Board论坛

GMT+8, 2025-1-18 21:21 , Processed in 0.072783 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表