无需登录 数据私有 本地保存

图片格式质量对比器 - PNG/JPEG/WebP/AVIF 主观评测

14
0
0
0
拖拽图片到此处，或点击上传
支持 JPG / PNG / WebP / AVIF / BMP / SVG 等常见格式
压缩质量
80% PNG 为无损格式，不受质量参数影响
原始图片 基准
原始图片 原始图片
--
--
PNG 无损
PNG 格式 原图对比 悬停查看原图 · 点击锁定
--
--
--
JPEG 有损
JPEG 格式 原图对比 悬停查看原图 · 点击锁定
--
--
--
WebP 有损
WebP 格式 原图对比 悬停查看原图 · 点击锁定
--
--
--
AVIF 有损
AVIF 格式 原图对比 悬停查看原图 · 点击锁定
--
--
--

上传一张图片，即可对比不同格式的质量与文件大小

常见问题与知识点
PNG、JPEG、WebP、AVIF 各有什么特点？

PNG：无损压缩，支持透明通道（Alpha），适合Logo、图标、截图等需要清晰边缘和透明背景的图片。文件通常较大。

JPEG：有损压缩，不支持透明，适合照片和复杂渐变色图片。在质量80%-90%时视觉损失几乎不可见，文件较小。

WebP：同时支持有损和无损，支持透明，压缩效率比JPEG高约25%-35%。现代浏览器均支持，是网页图片的优选格式。

AVIF：基于AV1编码，压缩效率最高，同等质量下文件最小。支持HDR和广色域，但编码较慢，浏览器支持正在快速普及（Chrome 85+、Firefox 93+）。

为什么我的浏览器不支持AVIF格式？
AVIF是较新的图片格式，需要浏览器底层支持AV1解码器。Chrome 85+、Edge 85+、Firefox 93+、Opera 71+ 已支持。Safari在iOS 16+/macOS 13+开始支持。如果您的浏览器不支持，该卡片会显示提示，您仍可使用PNG/JPEG/WebP格式。建议升级浏览器或使用Chrome获得完整体验。
有损压缩和无损压缩有什么区别？
有损压缩：通过丢弃人眼不易察觉的细节信息来减小文件大小。压缩率越高，丢失信息越多，画质越低。JPEG、有损WebP、AVIF属于此类。
无损压缩：在不丢失任何像素信息的前提下压缩文件，解压后与原图完全一致。PNG和无损WebP属于此类，文件通常比有损格式大。
如何为我的网站选择合适的图片格式？
推荐使用渐进增强策略：使用 <picture> 标签提供多种格式，浏览器自动选择支持的最佳格式。优先提供AVIF（最小），其次WebP，最后JPEG/PNG作为回退。对于照片类内容使用有损格式（WebP/AVIF），对于需要透明背景的图片使用PNG或无损WebP。
为什么PNG转换后文件反而变大了？
浏览器的Canvas PNG编码器通常生成PNG-24格式（真彩色+Alpha通道），压缩优化程度不及专业工具（如pngquant、optipng）。如果原图是经过优化的PNG-8或使用高效压缩算法的PNG，浏览器重新编码后的PNG可能会更大。这是正常现象，也说明了专业图片优化工具的价值。
这个工具的质量参数是如何影响图片的？
质量参数（5%-100%）控制有损格式（JPEG/WebP/AVIF）的压缩程度。数值越高，画质越好但文件越大；数值越低，文件越小但画质损失越明显。PNG是无损格式，不受此参数影响。建议JPEG使用75%-85%，WebP使用75%-90%，AVIF使用60%-80%即可获得良好效果。
🔧 相关工具