简体中文

图像和照片·浏览器图像和绘图编辑器

无损 JPEG 裁剪与浏览器裁剪:为什么会发生重新编码

· 背景

图像编辑 画布 浏览器处理

无损 jpeg 裁剪与浏览器裁剪的抽象光栅插图:为什么会发生重新编码
原始 ToolAcre 矢量图

命令行工具可以裁剪 JPEG 而不解码它,但只能在 8- 或 16- 像素网格上;浏览器编辑器会解码并重新编码。这篇文章解释了为什么这两种方法都存在,以及如何在必须重新编码时限制质量损失。

两种裁剪,两种文件大小 - 同一个矩形以两种方式切割会产生不同的文件,原因在于 JPEG 格式本身

两个 JPEG 裁剪可以具有相同的维度,但仍会产生不同的字节序列。当编码器写入不同的表、标头、量化值或元数据时,矩形可以是相同的。关键的区别在于所采取的路径。无损 JPEG 实用程序有时可以重新排列压缩块,而此编辑器会解码图像,将像素复制到其栅格图层中,并要求 canvas.toBlob 编码新文件。

通过重复而不是不可替代的扫描来测试这种区别。裁剪一个矩形,将其导出,然后比较尺寸、可见边缘和测量的斑点大小。 JPEG 质量传递给浏览器编码器; PNG 不接收有损质量参数,并且 WebP 遵循自己的浏览器编解码器。下载的是新的编码,而不是去掉角的原始压缩流。

JPEG 是如何组织的 — 8×8 块、最小编码单元以及为什么网格对于切割很重要

JPEG 将转换后的图像信息存储在 8-by-8 块中,并通过采样和文件组织形成更大的编码单元。该网格对于专门的无损操作很重要,因为只有当其边缘与文件已包含的结构对齐时,切割才可能是干净的。它是有用的格式上下文,而不是声称浏览器编辑器公开块坐标或理解最小编码单元。

编辑器的裁剪工具在解码像素上的源矩形中进行思考。因此,它可以表示任意选择,包括位于 JPEG 块边界之间的选择,但源不公开子采样控制、块对齐或字节级保存。结果是方便的几何自由度,但代价是在绘制像素后返回编码器。

JPEG块结构是后台上下文;该编辑器不会解析或裁剪压缩块

jpegtran 等工具代表了另一种交易:它可以在 JPEG 结构上进行操作,而无需首先将每个块转换为普通像素。当裁剪边缘适合相关块网格时,该工具可以丢弃完整区域,同时保持剩余压缩数据完整或避免完全有损重新编码。该工作流程位于该编辑器之外,并且不应由通用浏览器裁剪按钮暗示。

无损并不意味着任意。块对齐工具可能会限制裁剪矩形,并且元数据处理仍然需要自己的验证。编辑器做出了不同的选择:它在解码图像上为用户提供了一个自由矩形,将该矩形复制到新的图层画布中,然后对结果进行编码。当需要字节保存或块级归档行为时,请使用专用的 JPEG 实用程序。

无损 JPEG 裁剪不在此实现范围内,需要不同的工具

画布编辑是为像素构建的,而不是 JPEG 变换系数。浏览器将图像加载为 HTML 图像,编辑器将选定的源矩形复制到新的图层画布中,并合成可见栅格以供导出。该设计接受任何裁剪几何形状,并让相同的工作流程处理绘图、文本和其他图层。这也意味着原始的 JPEG 块不再是导出材料。

导出会话时,canvas.toBlob 会向浏览器请求新的 PNG、JPEG 或 WebP 文件。对于 JPEG 下载,这是解码和编辑的栅格的浏览器重新编码。源代码不公开最小编码单元对齐、系数复制、子采样选择或有关元数据和配置文件的保证。该行为是有意的光栅编辑,而不是无损块裁剪。

浏览器裁剪解码像素,复制矩形并重新编码合成

对于网络图像来说,一次重新编码可能是可以接受的,但其成本取决于来源、裁剪、浏览器编码器、选择的质量和内容。精细的文本、半色调扫描、清晰的线条艺术和重复的对比边缘可以比随意的照片更快地揭示变化。避免为丢失分配固定的百分比或保证文件大小的减少:存储库没有提供这样的承诺。

尽可能将工作流程保留为一次有意导出。重新打开 JPEG 下载、进行另一次光栅编辑并再次对其进行编码会增加出现伪影的机会,而导出 PNG 可能会更改大小和格式权衡,而不是保留 JPEG 字节。以有用的放大倍率比较实际输出,保留源,并选择目标的格式和质量,而不是相信通用数字。

重新编码结果取决于编码器;不承诺固定尺寸或质量百分比

使用扫描页面作为实际比较。保留原件,记下其尺寸和文件大小,然后在编辑器中标记所需的矩形。以所选质量将作物导出为 JPEG 一次,并检查小字体、直边框和纸张纹理。输出尺寸回答页面是否被修剪;目视检查可以回答新光栅是否仍然有用。

无损块感知实用程序将是一个单独的实验:它可能只接受对齐的边缘并避免解码页面,而浏览器裁剪则接受您绘制的矩形。不要将两者进行比较,就好像它们具有相同的保证一样。在这里,canvas.toBlob 生成一个新文件,并且源不承诺字节标识、元数据保留、配置文件保留或固定质量成本。

已完成检查:比较尺寸和可见细节,无需保留字节

该比较专门针对 JPEG 输入和浏览器光栅裁剪。 PNG 具有不同的压缩行为,并且在此编辑器中不会收到有损质量参数。 WebP 遵循其自己的浏览器编解码器。旋转、元数据重写、ICC 处理和专门的无损 JPEG 转换是单独的问题;一种格式的成功导出并不能解决另一种格式的问题。

同样的注意事项也适用于档案声明。该编辑器不公开最小编码单元对齐、子采样控制、无损旋转操作或嵌入元数据保留的保证。如果源必须保持结构完整,请保留它并使用格式感知工具。如果目标是具有任意矩形的方便的新图片,则浏览器工作流程更直接适合。

要点:了解您正在进行哪项交易 — 浏览器图像和绘图编辑器如何裁剪设备上的任何矩形,以及无损工具何时更适合归档工作

交易很简单:该编辑器执行光栅裁剪,然后执行新的浏览器编码。它对图像进行解码,将选定的矩形复制到其图层画布中,合成可见结果,并使用 canvas.toBlob 作为请求的格式。这为您提供了设备上的任意裁剪,但它不会保留原始压缩字节流或声明无损 JPEG 语义。

当交付物是用于共享、审阅或进一步普通编辑的实用图像时使用它。当档案保真度、块保存或元数据保证很重要时,保留源并选择格式感知的无损实用程序。测量最终尺寸并检查可见细节;这些检查描述了您收到的文件,而不假装每个浏览器编码器都进行相同的字节级交易。