图像和照片·图像转换器和压缩器
色度子采样:为什么 JPEG 会模糊红色文本和细彩色线条
· 工作原理
图像格式 jpeg 图像质量
JPEG 和有损 WebP 以低于亮度的分辨率存储颜色,这在照片中不可见,但在红色文本中很明显。这篇文章解释了 4:2:0 子采样、编码器为何这样做,以及当颜色边缘很重要时如何选择格式。
红色标签变得模糊,而黑色文本保持清晰 - 这种症状直接指向色度子采样
红色标签可能比相邻的深色文本更柔和,即使两者在屏幕截图中都是清晰的矢量。该症状值得研究,但它本身并不能识别精确的色度子采样模式。 ToolAcre 解码源代码,将像素绘制到画布上,并向浏览器请求 JPEG 或 WebP 字节;由此产生的边缘是证据,而编码器的私人决策则不是。
从一张受控图像开始,在一个背景上包含狭窄的红色、蓝色、灰色和黑色笔划。保持其尺寸不变,导出每个目标一次并以本机像素大小检查下载。如果只有有损输出涂抹饱和边界,则意味着格式选择。如果每个输出都是软的,首先检查是否发生了调整大小,因为计划将任何更改的尺寸分类为重新采样。
亮度和色度:将像素分割为亮度和颜色 - YCbCr 变换以及编码器将两者分开的原因
该大纲描述了亮度和色度变换,但此存储库中没有出现变换代码。该应用程序向浏览器编码器提供解码后的 RGBA 像素,并且从不接收单独的亮度或颜色平面。因此,它可以记录实际的区别(有损输出可能会丢弃可见细节),而无需假装揭示浏览器的系数计算或内部颜色表示。
该边界改变了缺陷报告的编写方式。记录源 MIME 类型、目标 MIME 类型、质量、原始和输出尺寸、浏览器以及显示受影响边缘的裁剪。不要声明特定通道已减半,除非编码器检查证明这一点。可以再现精确的观察结果;借用的关于隐藏实现设置的解释可能会让维护者转向他们没有的控件。
可以观察到颜色细节损失,但此存储库未实现或公开 YCbCr 转换
熟悉的 4:4:4、4:2:2 和 4:2:0 标签不是此界面中的控件。 `encodeCanvas` 仅传递 MIME 类型,对于 JPEG 或 WebP,传递标准化质量值。面板和转换计划都不包含二次采样字段。将这些模式呈现为可选择的部分将与发货的产品相矛盾,因此有用的教训是缺乏该选择。
当需要颜色边缘保真度时,请选择一条可以检查其结果的路径,而不是假设滑块中的模式。 PNG 是可用的无损编码器,当尺寸保持固定时保持 alpha。 JPEG 和 ToolAcre 的 WebP 输出在每种质量上都被明确描述为有损。这种由源支持的区别足以选择更安全的候选图表,而无需发布不受支持的支持矩阵。
浏览器编码器不公开 4:4:4、4:2:2 或 4:2:0 选择器
照片将细节分布在纹理、光照和不规则边界上,因此颜色边缘的微小变化可能不像单像素界面规则那样明显。这是一种检查启发式方法,而不是声称人类视觉遵循 ToolAcre 中编码的比率。该应用程序不会计算感知相似性、对内容进行分类或证明查看者不会看到损坏。
使用代表性材料。对于充满彩色类型的设计系统来说,单独的肖像是一个糟糕的测试,而单独的合成图表对于照片库来说是一个糟糕的代理。转换器报告测量的字节大小并提供第一个结果的前后预览,但接受应包括以实际布局打开文件。预览缩放可以准确隐藏正在检查的边界损坏。
照片可能比图形更好地隐藏色边损失;这里没有断言视觉模型
图形在硬过渡中集中含义:红色警告下划线、图表中的蓝色系列或白色上的彩色文本。当相邻样本在有损编码期间混合或舍入时,边缘可能会出现渗色,即使其位置未改变。调整大小添加了另一种机制,因为 `drawImage` 在编码之前以高平滑度重新绘制源。
通过在第一次比较时保持尺寸不变来分离这些机制。如果 PNG 保持清晰,而 JPEG 和 WebP 软化,则有损编码阶段是差异化因素。接下来重复进行有意的调整大小,以了解重新采样会增加什么。这种两步实验比一起改变质量、尺寸和格式更强大,因为每一轮中只有一个决定发生变化。
浏览器编码器可以让您控制什么 - 质量数字但没有子采样开关,以及为什么有损 WebP 始终是 4:2:0
ToolAcre 为浏览器提供了一个从 0.01 到 1(对于 JPEG 和 WebP)的质量编号。它不提供颜色采样、转换表或编码器工作的开关。该工作手册声称有损 WebP 始终是一种命名的子采样模式,这超出了检查的实现范围,因此本文故意不重复它作为产品保证。
对隐藏编码器选择的实际响应不是寻找未记录的复选框。比较实际输出,保留源,并在精确的彩色边缘比较小的文件更重要时选择 PNG。如果生产管道需要指定的采样模式,请使用其记录的 API 公开它的编码器;画布便利 API 无法满足它从不接受的契约。
该工具仅通过质量检查;编码器的子采样策略仍然隐藏
构建一张 1200-by-800 测试图,其中包含红色和蓝色细对角线、深色标签、平滑的中性渐变和一个透明角。将其导出而不调整大小为 PNG、JPEG 和 WebP。存储库无法预测字节总数或确切的伪影,因此请写下面板显示的测量结果,而不是在测试计划中插入承诺的百分比。
在 100% 处,将彩色笔划与深色控件进行比较,并检查透明角是否幸存。 PNG 应通过支持的无损编码器保留 alpha; JPEG 接收选定的遮罩,因为它无法存储 Alpha; WebP 保留 alpha,但仍标记为有损。这三个可见的结果测试了不同的属性,并避免将“较小”视为“更好”的同义词。
要点:按内容选择格式 — 当颜色边缘必须保持清晰时,图像转换器和压缩器如何让您导出与 PNG 相同的图像
格式选择不能保证每个下游应用程序将如何渲染颜色、缩放图像或缩放图像以进行显示。 ToolAcre 也不公开其输出中的子采样元数据或提供像素差异度量。这些遗漏意味着最终检查属于目标页面、文档或应用程序,而不仅仅是转换面板内。
对于饱和文本和窄颜色规则,从无损候选开始,并通过直接检查证明任何有损替换的合理性。图像转换器和压缩器使这种比较可以在一台设备上重复:相同的源、固定尺寸、三种输出格式和测量的字节。结果(而不是共享滑块编号或假定的二次采样模式)应该决定发布什么。