Uvlio

Command Palette

Search for a command to run...

返回文章列表
技术文章

图片格式解释:JPEG、PNG、WebP、AVIF、HEIC 与缩放顺序

图片准备会简单很多,如果你把三个决定拆开:几何尺寸、文件格式和压缩。几何决定尺寸和裁剪,格式决定透明度、动画、兼容性和压缩方式,压缩决定最终体积和可见质量。一次性全改会让问题难以定位,可靠流程应按顺序处理。
limitcool 维护的 Uvlio 编辑团队2026-05-177 分钟阅读
主题封面实用工具图片裁剪与缩放图片旋转与翻转

图片格式解释:JPEG、PNG、WebP、AVIF、HEIC 与缩放顺序

解释如何选择图片格式、为什么先缩放再压缩、如何保留透明度,以及如何准备批量上传图片。

文章主题预览
理解原理
检查边界
使用工具
关联工具
图片裁剪与缩放图片旋转与翻转图片格式转换批量图片转换
阅读重点
1理解原理
2检查边界
3使用工具

原创流程图

图片格式解释:JPEG、PNG、WebP、AVIF、HEIC 与缩放顺序

这张图由 Uvlio 为本文工作流生成,用来说明从输入检查到输出判断的基本路径。
1

理解原理

检查后再进入下一步

2

检查边界

检查后再进入下一步

3

使用工具

检查后再进入下一步

维护与复核
维护者:limitcool。阅读时可重点关注技术原理、处理边界、隐私风险和可验证事实。
JPEG 适合照片,不适合透明

JPEG 是为照片设计的有损格式,对渐变和多色照片通常体积小。它不支持透明,且在锐利边缘、文字和截图周围容易产生压缩伪影。反复保存 JPEG 会继续损失质量。

PNG 保留锐利边缘和透明

PNG 是无损格式,支持透明,适合 logo、图表、截图和硬边图形。代价是大照片体积可能很高。带文字的产品截图可能适合 PNG,而相机照片用 PNG 往往过大。

WebP 和 AVIF 改善网页交付

WebP 和 AVIF 在很多场景下比旧格式体积更小。WebP 支持透明,AVIF 压缩率可能更高但编码更慢、旧流程兼容性更弱。格式选择应服从目标:网站可提供现代格式和回退,旧 CMS 或表单可能只接受 JPEG/PNG。

HEIC 常见于手机但不通用

许多手机使用 HEIC/HEIF 节省空间,但一些浏览器、上传表单和桌面流程仍只接受 JPEG 或 PNG。把 HEIC 转 JPEG 更容易分享,但可能改变元数据或色彩处理。重要图片应保留原件并导出兼容副本。

先缩放,再调压缩

如果图片宽 4000 像素但只显示 1200 像素,先缩放通常比强行压缩节省更多。压缩应在最终尺寸上调整,否则你可能在压缩马上要丢弃的像素。批量处理也应先确定目标尺寸。

元数据和方向要看最终文件

图片转换可能保留或删除元数据,也可能改变方向标签处理。手机照片原图看起来正常,转换后如果移除方向标签而没旋转像素,可能横置。隐私场景还应在最终导出后再次检查 EXIF。

避免意外的批量流程

先选一张代表性图片,裁剪、缩放、导出到目标格式,比较质量、体积、透明度、方向和元数据。确认后再处理全批。批量导出后抽查最小图、最大图、透明图、文字图和手机照片。

常见问题

所有图片都应该转 WebP 吗?

不一定。WebP 很适合许多网页图片,但目标兼容性和透明度要求仍然重要。

为什么透明图变成白底?

可能导出到了不支持 alpha 透明的格式或设置,例如普通 JPEG。

应该先压缩还是先缩放?

通常先缩放,再对最终尺寸压缩,这样质量和体积更可控。

批量前样图应该包含什么?

选择代表难点的样图:透明、文字、肤色、带方向元数据的大手机照片等。

为什么截图转 JPEG 后很糟?

截图有锐利文字、纯色和 UI 边缘,有损 JPEG 容易产生伪影。PNG 或合适 WebP 通常更好。

转换时应该覆盖原图吗?

不应该。保留原图,导出用于上传或交付的副本,避免质量损失叠加。