Jinuss's blog Jinuss's blog
首页
  • 源码合集

    • Leaflet源码分析
    • Openlayers源码合集
    • vue3源码
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

Web、WebGIS技术博客
首页
  • 源码合集

    • Leaflet源码分析
    • Openlayers源码合集
    • vue3源码
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

    • Git使用手册
    • craco-less使用问题
    • npm常用命令
    • 绘制多彩的三角形
    • 开发chrome扩展插件
    • npm的作用域介绍
    • Django开发基础介绍
    • Django开发前端篇
    • Django Web开发接口定义
    • npm packageJson属性详解
    • vue3中使用live2D
    • Worker加载外部文件
    • vite配置打包分类文件
    • 微前端基础知识入门篇一
    • yaml语言教程
    • 微前端基础知识入门篇(二)
    • 会动的png
  • GitHub技巧

  • SVG

  • 技术
  • 技术文档
东流
2026-03-24

会动的png

会动的png

APNG(Animated Portable Network Graphics,动态可移植网络图形)是一种基于PNG格式的位图动画格式,它扩展了PNG标准,使其能够像GIF一样支持动画效果。

核心特性与技术优势

  • 高质量动画:APNG支持24位真彩色(约1600万色)和8位Alpha透明通道,可实现平滑的色彩过渡和半透明效果,而GIF仅支持256色和1位透明度(全透明或不透明)。
  • 向后兼容:APNG文件的第一帧存储为标准PNG流,因此不支持APNG的软件或浏览器仍能正常显示第一帧静态图像。
  • 高效压缩:采用Deflate压缩算法,并通过帧间差异存储技术(仅保存相邻帧之间的变化部分),在相同画质下,APNG文件通常比GIF更小。

与GIF的对比

特性 GIF格式 APNG格式
颜色支持 最多256色(8位) 24位真彩色(约1600万色)
透明度 1位(全透明/不透明) 8位Alpha通道(256级透明)
压缩算法 LZW压缩 Deflate压缩(更高效)
图像质量 色彩分层明显,边缘锯齿 色彩平滑过渡,边缘光滑
文件体积 相对较大 通常更小(相同画质下)

发展历程与浏览器支持 APNG由Mozilla公司的工程师于2004年提出。尽管早期未被PNG组织采纳为官方标准,但自2007年Firefox 3.0首次支持后,逐渐获得其他浏览器跟进。2025年6月,APNG被正式纳入PNG 3.0标准,成为官方认可的动画格式。目前所有主流浏览器(Chrome、Firefox、Safari、Edge等)均已支持APNG播放。

应用场景 APNG适用于对画质和透明度要求较高的动画场景,例如:

  • 用户界面动画(加载指示器、状态图标)
  • 产品展示(电商平台动态效果)
  • 教育演示(原理动画、操作流程)
  • 移动应用中的动态贴图或特效

简而言之,APNG是一种在保持PNG高质量特性的同时支持动画的现代图像格式,相比传统的GIF,它能提供更丰富的色彩、更细腻的透明度以及更优的文件压缩效率。

浏览器兼容性

浏览器兼容性
编辑 (opens new window)
上次更新: 2026/03/24, 06:24:15
微前端基础知识入门篇(二)
GitHub Actions 定时运行代码:每天定时百度链接推送

← 微前端基础知识入门篇(二) GitHub Actions 定时运行代码:每天定时百度链接推送→

最近更新
01
React19 useOptimistic hooks介绍
03-19
02
completeWork方法解析
03-11
03
completeUnitOfWork方法解析
02-12
更多文章>
Theme by Vdoing | Copyright © 2024-2026 东流 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式