WebP
Google开发的现代网页图片格式,支持有损压缩、无损压缩、透明通道和动画,相较JPEG和PNG在相同画质下体积更小,已获主流浏览器全面支持
时间轴 (近 90 天)
WebP格式支持alpha通道,而JPEG格式完全不支持alpha通道。
WebP和AVIF格式通常比同质量的JPEG/PNG体积更小,但需考虑浏览器兼容性,可通过`<picture>`元素配合`srcset`提供回退。
对于服务开放互联网用户、图片更新频繁的站点,AVIF 配合 WebP 回退是目前最稳妥的方案。
AVIF 基于 AV1 的帧内压缩,在同等主观质量下文件体积往往能压到 WebP 的六成左右。
无损压缩仅重新编码数据,解压后能完全还原,适合文本和矢量图形;有损压缩会丢弃部分信息,通常针对图片降低分辨率或提高压缩率,体积下降明显但细节会损失。
WebP 支持透明通道和动画,可以替代带透明的 PNG 和 GIF 动图
相同画质下,WebP 通常比 JPEG 小 25%-35%
WebP 同时支持有损和无损压缩
随着 Safari 加入支持,WebP 在主流浏览器上基本实现了全覆盖
AVIF 在相同质量评分下往往比 WebP 节省 20%-50% 的文件体积
还有 13 条时间轴事件
全部知识事实 (20)
WebP由Google于2010年推出,有损压缩比JPEG小约25-34%,无损压缩比PNG小约26%
90%待验证AVIF基于AV1视频编码,压缩效率比WebP再提升约20%,但编解码计算开销更大,目前仍处于普及过渡期
85%待验证Safari 14于2020年正式支持WebP格式,使WebP实现全平台覆盖
85%待验证APNG在iOS生态中的兼容性比WebP更好,无需额外解码库
75%待验证WebP格式支持alpha通道,而JPEG格式完全不支持alpha通道。
50%待验证WebP和AVIF格式通常比同质量的JPEG/PNG体积更小,但需考虑浏览器兼容性,可通过`<picture>`元素配合`srcset`提供回退。
50%待验证AVIF 基于 AV1 的帧内压缩,在同等主观质量下文件体积往往能压到 WebP 的六成左右。
50%待验证对于服务开放互联网用户、图片更新频繁的站点,AVIF 配合 WebP 回退是目前最稳妥的方案。
50%待验证无损压缩仅重新编码数据,解压后能完全还原,适合文本和矢量图形;有损压缩会丢弃部分信息,通常针对图片降低分辨率或提高压缩率,体积下降明显但细节会损失。
50%待验证AVIF 在相同质量评分下往往比 WebP 节省 20%-50% 的文件体积
50%待验证对新项目可直接默认使用 WebP,对极致性能页面可用 picture 标签搭配 AVIF 首选、WebP 兜底、JPEG 最终 fallback
50%待验证WebP 早期因 Safari 不支持、Firefox 跟进缓慢以及图像编辑工具支持滞后而被边缘化
50%待验证AVIF 的编码计算量远大于 WebP,生成一张 AVIF 图片有时需要数倍于 WebP 的 CPU 时间
50%待验证相同画质下,WebP 通常比 JPEG 小 25%-35%
50%待验证WebP 同时支持有损和无损压缩
50%待验证WebP 支持透明通道和动画,可以替代带透明的 PNG 和 GIF 动图
50%待验证随着 Safari 加入支持,WebP 在主流浏览器上基本实现了全覆盖
50%待验证Bring Them to Life 支持 WebP、Lottie 和 PNG 三种输出格式
50%待验证在 shot-scraper 中通过指定 .webp 输出文件名即可生成 WebP 格式截图,--quality 选项用于设置图片质量
50%待验证shot-scraper 不加 --quality 参数时生成无损 WebP 文件,加上后采用有损压缩
50%