四种格式的真实差别
JPG 是有损压缩，照片类图像最合适，体积小、兼容性最好，但大面积纯色和文字边缘会发糊，因为它用块状压缩。
PNG 是无损压缩，适合截图、图标、需要透明背景的图。缺点是体积大，一张带渐变的 PNG 动辄几百 KB 到几 MB，因为它是按像素逐点存的。
WebP 是 Google 推的格式，同时支持有损和无损，还能带透明。同等肉眼观感下，比 JPG 小大约两到三成，比 PNG 小一半以上。现在主流浏览器全支持。
AVIF 基于 AV1 编码，压缩率比 WebP 再高两到三成，暗部和高对比区域表现更好。缺点有两个：编码慢，老设备解码也慢；支持得晚，老旧安卓浏览器可能不认。
到底能省多少，给几个实际区间
照片类：原 JPG 100KB，转 WebP 大约 60 到 75KB，转 AVIF 大约 45 到 60KB。省三到五成是常态，再多就得牺牲观感。
截图和界面图：原 PNG 300KB，转 WebP 无损大约 100 到 150KB，转 AVIF 大约 80 到 120KB。这类图从 PNG 换 WebP 收益最大，因为 PNG 本来就没压缩效率。
图标和纯色图：直接上 SVG，别纠结位图格式。一个 20KB 的 PNG 图标做成 SVG 可能只有 1 到 2KB，而且任何分辨率都清晰。
动图：GIF 换成 WebP 或者直接上视频，体积能小一个数量级。一张 3MB 的 GIF 转成 mp4 常常只剩几百 KB。
怎么批量转
命令行最省事。cwebp 转 WebP，avifenc 转 AVIF，ImageMagick 一条 mogrify 命令能批量处理整个目录。写个小脚本遍历 uploads 目录，按原扩展名分流，转完输出到新目录，别直接覆盖原图，出问题还能回退。
图形界面可以用 Squoosh，本地跑、能实时对比画质和体积，适合先拿几张图摸清自己站点的合理质量参数，再拿去批量执行。
质量参数别一上来就压到 50。WebP 一般在 75 到 82 之间肉眼几乎看不出差别，低于 70 文字边缘开始发虚。AVIF 可以更低一些，60 到 70 通常够用。
转完怎么验
第一看体积，第二看画质，第三看透明。体积对比直接用 ls 或者脚本统计，别只看一两张，要算整目录的平均压缩率。
画质用原图和转换图并排放大对比，重点看文字边缘、大面积渐变、细密纹理这三处，这三处最容易暴露压缩痕迹。
透明图要特别验。带 alpha 通道的 PNG 转 WebP 必须显式保透明，参数给错会变成黑底或者白底，前台一看就露馅。转完随机抽几张带透明的图，放到深色背景上看边缘。
兼容性与降级
WebP 现在的兼容性基本不用担心，国内主流浏览器都支持。AVIF 要留降级，用 picture 标签给两个 source，第一个 AVIF 第二个 WebP，最后 img 兜底 JPG，浏览器会自己挑认识的那个。
如果不想改模板，也可以在 nginx 层做自动转换，按请求头的 Accept 判断浏览器支持什么，支持就返回转好的文件，不支持给原图。这样模板不用动，但要额外维护一套转换缓存，磁盘和 CPU 都有开销，小机器上要谨慎。
前台怎么配才不翻车
图片标签一定写宽高。不写宽高的图在加载前占位是 0，加载完成会顶一下页面，用户看着就是跳动。写上 width 和 height，浏览器能提前留好位置。
首屏大图给 fetchpriority 高优先级，非首屏的图用 loading 等于 lazy 延迟加载。这两条一加，首屏体感差别很明显。
文件名和 alt 别乱写。alt 描述图片内容，既方便读屏软件，也是图片搜索的入口。文件名用有意义的中文或者拼音，别用一串随机数字。
最后一条：别为了省几十 KB把图压到看不清。导航站的图标和截图，用户是来读信息的，糊了就是负体验，体积和清晰度要取一个自己看着舒服的平衡点。
转换时的几个判断
已经压过的 JPG 再转 WebP，收益往往很小，因为原图的信息已经被丢过一轮，WebP 只能在此基础上再省一点，有时还会因为二次压缩掉画质。判断标准是看原图质量参数，低于 80 的 JPG 就别折腾了。
GIF 动图优先换视频。一张超过 1MB 的 GIF，转成 mp4 或者 webm 通常只剩几百 KB，而且播放更流畅。视频用 video 标签加 autoplay、loop、muted 三个属性，就能当动图用，兼容性也没问题。
有些图别转。代码截图、数据图表、需要精确到像素的界面图，压缩后文字边缘发虚，读起来费劲。这类图宁可大一点，保留 PNG 或者高质量 WebP。
转换完一定留原图。硬盘便宜，原图是你的底。以后要重新导出、要换尺寸、要改压缩参数，都得从原图开始，拿压过的图再处理只会越来越差。
和缓存、CDN 的配合
转完格式要同步改路径和文件名。文件名带上版本号或者格式后缀，配合长缓存，用户下次访问直接命中缓存，不会再回源。
CDN 现在多数支持自动格式转换，开启之后按浏览器能力返回 WebP 或 AVIF，源站只存一份。省事，但要确认 CDN 的转换质量和计费方式，有的按转换次数收费。
最后提醒一句：格式优化的收益在首屏最明显，越靠下的图收益越小。先把首屏那几张图处理好，剩下的慢慢来，别一开始就全站批量转，改出问题不好回滚。
另外补一点：格式转换只是一半，另一半是缓存。同一张图重复下载一百次，跟压缩到多小没关系。给图片目录开长缓存，让浏览器记住它，回访用户的图片请求才真正降到接近零成本。很多站点图片优化做完了却漏了缓存头，等于白忙一场。这一条配合格式转换一起做，效果才完整。
做图片优化的顺序建议是：先定显示尺寸，再定格式，最后调质量参数。顺序反了会反复返工，因为你不知道到底是尺寸大还是质量高导致体积超标。
