PNG encoder: leave rows unfiltered where that compresses better

The paeth filter shrinks photos by about a third, but graphics often
compress better unfiltered, since repeated shapes stay the same bytes:
the benchmark's graphic was 20% larger paeth filtered (25% at level 6),
potato.png 36-42%. 32 rows of every 512 are compressed both ways at the
target level and the smaller wins (images of at most 32 rows: the smaller
whole). Graphics get 17-29% smaller and faster, photos are unchanged and
take about 8% longer. encode() and the APNG frames share compressRows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lfv41PqHEGbU7SLg5onpG1

Author: matmen

CHANGELOG.md

@@ -14,6 +14,9 @@
   block and its quarters cost about the same: files about 2% smaller at the default effort, encoding about 20% slower.
 - AVIF encoding with `effort: 2` also chooses smaller transforms within blocks (transform depth): files about 1% smaller
   (up to 4% for graphics), encoding about 10% slower.
+- PNG (and APNG) encoding leaves the rows unfiltered when that compresses better than the paeth filter, as it often
+  does for graphics and screenshots: their files are up to 30% smaller (and encoded faster), decided by compressing
+  samples of the rows both ways. Photos stay as they were, encoding them takes about 8% longer.
 
 ### Performance
 

src/codecs/png.ts

@@ -65,15 +65,6 @@ const ADAM7 = [[0, 0, 8, 8], [4, 0, 8, 8], [0, 4, 4, 8], [2, 0, 4, 4], [0, 2, 2,
  * @param data Raw pixel data, rows packed MSB first for depths below 8
  */
 export async function encode(data: Uint8Array, { text, width, height, channels, depth = 8, level = 0, palette, transparency, filter: filterRows = false }: EncodeOptions): Promise<Uint8Array> {
-    const rowBytes = Math.ceil(width * channels * depth / 8);
-    let filtered: Uint8Array;
-    if (filterRows) filtered = filter(data, rowBytes, height, Math.max(1, channels * depth / 8));
-    else {
-        // prefix every row with filter type 0 (none)
-        filtered = new Uint8Array(height * (rowBytes + 1));
-        for (let y = 0; y < height; y++) filtered.set(data.subarray(y * rowBytes, (y + 1) * rowBytes), y * (rowBytes + 1) + 1);
-    }
-
     const header = new Uint8Array(13);
     const view = new DataView(header.buffer);
     view.setUint32(0, width);
@@ -85,7 +76,7 @@ export async function encode(data: Uint8Array, { text, width, height, channels,
     if (palette) chunks.push(chunk(PLTE, palette));
     if (transparency) chunks.push(chunk(tRNS, transparency));
     chunks.push(...textChunks(text));
-    chunks.push(chunk(IDAT, await compressAsync(filtered, level)));
+    chunks.push(chunk(IDAT, await compressRows(data, width, height, channels, depth, level, filterRows)));
 
     chunks.push(chunk(IEND, new Uint8Array(0)));
     return concat([HEAD, ...chunks]);
@@ -106,15 +97,12 @@ function textChunks(text: EncodeOptions['text']): Uint8Array[] {
     return chunks;
 }
 
-/**
- * Filters every row with the paeth filter. Picking a filter per row (libpng's heuristic) costs twice as much and
- * compresses within 0.1% of it for photos, graphics and gradients alike
- */
-function filter(data: Uint8Array, rowBytes: number, height: number, bpp: number): Uint8Array {
-    const out = new Uint8Array(height * (rowBytes + 1));
+/** Filters rows y0 to y1 with the paeth filter */
+function filter(data: Uint8Array, rowBytes: number, y0: number, y1: number, bpp: number): Uint8Array {
+    const out = new Uint8Array((y1 - y0) * (rowBytes + 1));
 
-    for (let y = 0; y < height; y++) {
-        const row = y * rowBytes, o = y * (rowBytes + 1) + 1;
+    for (let y = y0; y < y1; y++) {
+        const row = y * rowBytes, o = (y - y0) * (rowBytes + 1) + 1;
         out[o - 1] = 4;
 
         // the first row has no row above, the first pixel of every row no left neighbour
@@ -136,6 +124,39 @@ function filter(data: Uint8Array, rowBytes: number, height: number, bpp: number)
     return out;
 }
 
+/** Prefixes rows y0 to y1 with filter type 0 (none) */
+function prefix(data: Uint8Array, rowBytes: number, y0: number, y1: number): Uint8Array {
+    const out = new Uint8Array((y1 - y0) * (rowBytes + 1));
+    for (let y = y0; y < y1; y++) out.set(data.subarray(y * rowBytes, (y + 1) * rowBytes), (y - y0) * (rowBytes + 1) + 1);
+    return out;
+}
+
+const SAMPLE_ROWS = 32, SAMPLE_STEP = 512;
+
+/**
+ * Filters (or just prefixes) the rows and compresses them. Filtered rows are paeth filtered, or not at all if that
+ * compresses better: photos shrink by about a third filtered, but graphics often compress better unfiltered (their
+ * repeated shapes stay the same bytes), by up to 40%. Decided by compressing samples both ways, 32 rows of every 512
+ * (about 8% more time); picking a filter per row (libpng's heuristic) costs twice as much and does worse for graphics
+ */
+async function compressRows(data: Uint8Array, width: number, height: number, channels: number, depth: number, level: number, filterRows: boolean): Promise<Uint8Array> {
+    const rowBytes = Math.ceil(width * channels * depth / 8), bpp = Math.max(1, channels * depth / 8);
+    if (!filterRows) return compressAsync(prefix(data, rowBytes, 0, height), level);
+    // (small images: the smaller of both)
+    if (height <= SAMPLE_ROWS) {
+        const [unfiltered, filtered] = await Promise.all([compressAsync(prefix(data, rowBytes, 0, height), level), compressAsync(filter(data, rowBytes, 0, height, bpp), level)]);
+        return unfiltered.length < filtered.length ? unfiltered : filtered;
+    }
+    const unfilteredSamples: Uint8Array[] = [], filteredSamples: Uint8Array[] = [];
+    for (let y = Math.min((SAMPLE_STEP - SAMPLE_ROWS) >> 1, (height - SAMPLE_ROWS) >> 1); y < height; y += SAMPLE_STEP) {
+        const end = Math.min(height, y + SAMPLE_ROWS);
+        unfilteredSamples.push(prefix(data, rowBytes, y, end));
+        filteredSamples.push(filter(data, rowBytes, y, end, bpp));
+    }
+    const [unfiltered, filtered] = await Promise.all([compressAsync(concat(unfilteredSamples), level), compressAsync(concat(filteredSamples), level)]);
+    return compressAsync(unfiltered.length < filtered.length ? prefix(data, rowBytes, 0, height) : filter(data, rowBytes, 0, height, bpp), level);
+}
+
 function chunk(type: number, body: Uint8Array): Uint8Array {
     const out = new Uint8Array(body.length + 12);
     const view = new DataView(out.buffer);
@@ -281,8 +302,8 @@ const aligned = (rgba: Uint8Array): Uint8Array => rgba.byteOffset % 4 ? rgba.sli
 
 /**
  * Encodes 8-bit RGBA pixels into a PNG with the smallest lossless color type (see {@link pixelFormat}).
- * Rows of non-palette images are paeth filtered (unless the data isn't compressed), palette indices aren't
- * filtered (like libpng recommends)
+ * Rows of non-palette images are paeth filtered where that compresses better (unless the data isn't compressed),
+ * palette indices aren't filtered (like libpng recommends)
  */
 export async function encodeRGBA(rgba: Uint8Array, width: number, height: number, level: number, text?: EncodeOptions['text']): Promise<Uint8Array> {
     rgba = aligned(rgba.subarray(0, width * height * 4));
@@ -291,17 +312,6 @@ export async function encodeRGBA(rgba: Uint8Array, width: number, height: number
     return encode(format.convert(rgba, width, height), { width, height, level, text, channels, depth, palette, transparency, filter: level > 0 && !palette });
 }
 
-// filters (or just prefixes) the rows and compresses them
-async function compressRows(data: Uint8Array, width: number, height: number, channels: number, depth: number, level: number, filterRows: boolean): Promise<Uint8Array> {
-    const rowBytes = Math.ceil(width * channels * depth / 8);
-    let filtered: Uint8Array;
-    if (filterRows) filtered = filter(data, rowBytes, height, Math.max(1, channels * depth / 8));
-    else {
-        filtered = new Uint8Array(height * (rowBytes + 1));
-        for (let y = 0; y < height; y++) filtered.set(data.subarray(y * rowBytes, (y + 1) * rowBytes), y * (rowBytes + 1) + 1);
-    }
-    return compressAsync(filtered, level);
-}
 
 export interface APNGEncodeFrame {
     x: number;