主题
PNG、JPG、WebP、AVIF 到底该用哪个
同一张图，存成不同格式体积能差好几倍，而画质肉眼看不出区别。选格式不需要懂编码原理，回答两个问题就够了。
两个问题定格式
问题一：需要透明背景吗？
需要 → PNG / WebP / AVIF。JPG 不支持透明，存进去透明区域会变成白色或黑色。
问题二：内容是照片，还是图形？
- 照片（人像、风景、商品实拍）：像素之间连续渐变，适合有损压缩。JPG / WebP / AVIF。
- 图形（截图、logo、图标、纯色插画、带文字的图）：大片同色区域和锐利边缘，适合无损压缩。PNG / WebP。
把图形存成 JPG 是最常见的错误：文字和线条边缘会出现一圈脏点（振铃效应），而且体积往往还更大——因为 JPG 的算法假设图像是连续渐变的，遇到锐利边缘反而要花更多数据去描述。
四种格式的实际差别
| 格式 | 透明 | 压缩 | 兼容性 | 什么时候用 |
|---|---|---|---|---|
| JPG | 不支持 | 有损 | 全平台 | 照片，且对方环境未知 |
| PNG | 支持 | 无损 | 全平台 | 截图、logo、需要透明 |
| WebP | 支持 | 有损 + 无损 | 现代浏览器全支持 | 网页上的绝大多数图 |
| AVIF | 支持 | 有损 + 无损 | 较新，部分老环境不认 | 追求极限体积的网页图 |
同一张照片，典型体积关系大致是 JPG > WebP > AVIF，WebP 通常比 JPG 小三成左右，AVIF 还能再小一截。但 AVIF 的编码速度慢得多，且在一些老旧的图片查看器、部分办公软件里打不开。
给网页用：WebP 是当下的默认答案——兼容性已经足够，体积收益实在。给别人发文件：用 JPG 或 PNG，因为你不知道对方用什么打开。
有损压缩不可逆
一个常被忽略的点：JPG 存一次就损失一次。反复「打开—编辑—另存」的图片会一次比一次糊，这个过程不可逆，事后再怎么调都救不回来。
所以工作流应该是：原图用无损格式保管，导出时才转成有损格式。需要改动就回到原图改，而不是在导出件上接着改。
还有一条分界：位图还是矢量
上面四种都是位图——由像素网格构成，放大就糊。logo、图标、简单插画其实更适合 SVG：它记录的是「画一个半径 20 的圆」这样的指令，放多大都清晰，体积往往还只有几 KB。
什么时候必须转成位图：对方环境不支持 SVG（很多办公软件、部分社交平台）、需要固定像素尺寸（favicon、应用图标）、或者图里用了自定义字体而对方机器上没有这个字体。
转的时候注意两点：导出倍率（要用于高清屏就导 2 倍尺寸）和背景（SVG 默认透明，导成 JPG 会变白底或黑底，要保留透明就导 PNG/WebP）。
网站图标是特例
favicon 不是「一张图缩小」那么简单。浏览器标签页、书签栏、桌面快捷方式、各种系统的磁贴，需要的尺寸各不相同，而 16×16 那一档必须单独设计——把复杂 logo 直接缩到 16 像素，出来的是一团糊。
所以 ICO 格式允许在一个文件里打包多个尺寸，浏览器按场景取用。做站点图标时应该生成一整套，而不是丢一张 PNG 改个扩展名。
尺寸比格式更重要
调格式之前先看尺寸。手机拍的照片动辄 4000×3000 像素，而网页上实际显示可能只有 800 像素宽——把它缩到 1600 像素，体积立刻降到十分之一以下，画质在实际显示尺寸下毫无区别。
顺序应该是：先缩尺寸，再选格式，最后才调质量参数。很多人直接去拉质量滑块，从 90 拉到 60 画质肉眼可见地劣化了，体积却只降了三成——因为瓶颈根本不在质量参数上。
相关工具
以下工具都在浏览器本地处理，图片不上传服务器。