选对图片格式是网页性能最大的杠杆。选错，一张 90 KB 的照片会变成 600 KB 的 PNG。本文覆盖 JPEG、PNG、WebP、AVIF、JPEG XL，并告诉你各自该在何时使用。
五种格式速览
- JPEG——有损、无透明、通用。适合兼容性优于体积的照片。
- PNG——无损、支持 alpha 透明。适合截图、图标和需要锐利边缘的图形。
- WebP——有损或无损、支持透明与动画。2026 年最均衡的全能选手。
- AVIF——有损、透明、HDR、体积最小。适合能缓存编码结果的头图照片。
- JPEG XL (JXL)——有损或无损、可无损重建原始 JPEG。面向未来的选择。
按内容匹配格式
照片
首选 AVIF（最小），以 WebP 作通用兜底，最后用 JPEG 兜底。用 <picture> 标签同时声明三种即可覆盖所有浏览器。
含文字的截图
文字用 PNG 最清晰，但高质量 WebP（q 90+）几乎同样锐利、体积减半。避免 JPEG——它会糊掉文字。
带透明的图标 / UI 图形
PNG 可靠；带 alpha 的无损 WebP 是很好的现代替代。极小图标优先用 SVG。
动画
用 WebP 或 AVIF 动画取代效率极低的 GIF。
Kix图片工具 在浏览器中即可转换这五种格式——把同一源图拖入，导出每种格式即可对比。
立即可用的质量设置
有损格式的安全默认值（好看又小）：
- AVIF：质量 50——视觉干净、激进变小。
- WebP：质量 75——多数照片的甜点。
- JPEG：质量 75——多数照片与源图无异。
- JXL：质量 75。
- PNG：无损——使用 OxiPNG 优化。
这正是 Kix图片工具 的内置默认值，可从默认开始，按需微调滑块。
投放策略
用 <picture> 元素配多个 <source>，让浏览器自选支持的最佳格式。务必设 width 和 height 防止布局偏移，并给首屏外图片加 loading="lazy"。
小结
没有唯一的「最佳格式」——按内容选格式：照片→AVIF/WebP；截图→PNG 或无损 WebP；图标→先 SVG，再 PNG/无损 WebP。想立刻动手？用 Kix图片工具 转换你的图片。