繁體中文

圖片和照片 · 瀏覽器圖片和繪圖編輯器

無損 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 語義。

當交付物是用於共享、審查或進一步普通編輯的實用圖片時使用它。當檔案保真度、區塊保存或元資料保證很重要時,保留來源並選擇格式感知的無損實用程式。測量最終尺寸並檢查可見細節;這些檢查描述了您收到的檔案,而不假裝每個瀏覽器編碼器都進行相同的位元組級交易。