四大主要网页图像格式
选择合适的图像格式能把你的文件大小减半——如果选错则会翻倍。下面是何时使用每种格式的实用概览。
JPG (JPEG)
最适合:照片、带大量色彩渐变的复杂场景。
压缩:有损。永久丢弃细微的色彩数据。 透明度:不支持。 浏览器支持:100%——每个浏览器和设备。 典型文件大小:1200 万像素照片在 85% 质量下为 2–5 MB。
JPG 自 1992 年起就是照片的标准。其近乎通用的支持使它成为当你不知道图像将在什么平台上显示时的安全默认选择。
PNG
最适合:截图、徽标、插画、带文字的图像、带透明度的图像。
压缩:无损。每个像素都被精确保留。 透明度:支持(alpha 通道)。 浏览器支持:100%。 典型文件大小:1200 万像素照片为 20–40 MB(不适合照片)。
当像素级完美的准确度很重要时使用 PNG——用于 UI 截图、图形素材,或任何你将多次编辑的图像。切勿在网站上将 PNG 用于照片;文件太大了。
WebP
最适合:希望文件比 JPG 小、格式灵活性比 PNG 更广的网页图像。
压缩:有损和无损两种模式都可用。 透明度:支持。 浏览器支持:所有现代浏览器(Chrome、Firefox、Safari 14+、Edge)。不支持 IE。 典型文件大小:在同等视觉质量下比 JPG 小 25–35%。
WebP 由 Google 创建,现在是大多数网页图像的推荐格式。如果你的受众使用现代浏览器,从 JPG 切换到 WebP 是在没有任何视觉代价的情况下减少页面重量的简单方法。
AVIF
最适合:最大压缩至关重要的高质量图像——主视觉图、大型产品照片。
压缩:有损和无损。 透明度:支持。 浏览器支持:Chrome 85+、Firefox 93+、Safari 16+。良好但不通用。 典型文件大小:在同等质量下比 JPG 小 40–50%。
AVIF 提供任何主流格式中最好的压缩。代价是编码较慢(我们的转换器对大文件可能需要几秒)以及浏览器支持略低于 WebP。
快速决策指南
网页用照片 → WebP(或为最大兼容性用 JPG) 带透明度的徽标或图标 → PNG(或 WebP) 现代网站的主视觉图 → AVIF 通过邮件分享的图像 → JPG 截图 → PNG 要分享的 iPhone 照片 → JPG(从 HEIC 转换)