JPG / PNG / WebP

JPG、PNG 与 WebP 图片对比实验台

同一张图片,三种格式,在你的浏览器中实测。

静态 JPG、PNG 或 WebP,最多 10 MB、1200 万像素。文件留在本设备上。

输入图片每边最多 16,384 像素。

PNG 不使用画质滑块。JPEG 会用背景色填充透明区域。

三种输出使用相同尺寸,且不会放大原图。本实验台将长边限制为 1600 像素。

选择示例或自己的图片,然后比较三种格式。

原始图片

文件更小不一定代表图片更好。下载前,请检查文字边缘、渐变和透明区域。

大小变化以各结果与原文件比较得出。如果输出尺寸更小,其中也包含缩小尺寸带来的变化。

如何使用此工具

  1. 1

    选择内置原创示例,或设备中的静态 JPG、PNG、WebP。内置示例是生成的插画,不是实拍照片。

  2. 2

    设置对比尺寸、JPEG/WebP 画质和 JPEG 背景色,运行对比。三种输出采用相同尺寸。

  3. 3

    比较实际字节数和预览,下载文件,再按最终使用尺寸检查细节。

这里究竟在比较什么?

实验台从同一来源出发,用浏览器编码器生成三种格式,测量真实文件,不展示估算节省率或固定排名。PNG 不使用有损画质设置。JPEG 不能保留透明度,透明区域会填充为选定背景色。WebP 支持情况通过实际导出格式检查。

这是有处理上限的对比实验,不是全分辨率存档转换器。输入最多 10 MB、1200 万像素;处理长边最多 1600 像素,不放大小图。相同尺寸有助于比较,但缩小尺寸本身也是改变。请保留原文件。 输入图片每边最多 16,384 像素。

三种示例,观察三类问题

渐变插画便于观察色带和块状失真。它是刻意生成的图像,结果不能代表所有相机照片。小字与线条示例则便于检查边缘杂色和模糊:如果标签难以阅读,文件再小也可能不适用。

透明徽章用来检查格式保留了什么。先在棋盘格上观察轮廓,再改变 JPEG 背景。JPEG 出现白色矩形属于预期行为,并不意味着恢复了透明度。PNG 和 WebP 可以保留透明通道,但有损 WebP 仍可能改变颜色细节。

可复现的对比,不是通用评分

对比时保持来源、输出尺寸、画质值与 JPEG 背景一致。修改设置后重新运行,再比较新生成的文件。字节更少并不等于画质更好,不同编码器中相同的画质数值也不代表同等质量。

来源字节数属于原文件,输出字节数属于本次导出。已经优化的原图可能比所有结果都小。浏览器版本、编码器和示例文字渲染都会影响数值。需要复现或质疑结果时,请记录设置并保留下载文件。

按照最终用途选择下一步

表单只接受 JPG 时,应选择可读的 JPG,即使 WebP 更小。需要透明边缘的标志,可在实际背景和目标浏览器中比较 PNG 与 WebP。包含小字的截图,进一步降低画质前应先检查可读性。

尺寸或构图不合适时,使用尺寸调整或裁剪工具。上传有字节上限时,使用目标大小压缩,并核对真实输出是否达标。实验台用于比较格式,不保证目标大小、JPEG 无损转换或画质评分。

常见问题

为什么另一台设备的结果不同?

浏览器编码器和文字渲染可能不同。请在同一浏览器内,用相同来源与设置比较同一轮导出。

实验台会上传图片吗?

不会。应用在浏览器内存中处理图片,下载在本地生成;重新加载会清空实验台状态。

为什么转换后反而更大?

原文件可能已经高效编码。重新编码、保留透明度或改变格式都可能增加字节。如果新文件没有实际收益,可以保留原图。

参考资料与延伸阅读