@@ -2,7 +2,14 @@
 
 ## 3.7.1
 
-### Fixes
+### Improvements
+
+- Optimized lossy WebP animations are smaller: like libwebp's, they leave out pixels that changed by up to a tolerance
+  from the quality (3 per channel at quality 85, 1 at 100), and make unchanged pixels transparent only in whole 8x8
+  blocks. Making each unchanged pixel transparent gave speckled alpha masks where most pixels change a little
+  (cross-fades), which could cost more than they saved. On six cross-faded radar-like animations at quality 85 the
+  files are 2% larger to 13% smaller than before and 7-46% smaller than unoptimized ones, at 0.1 dB PSNR below
+  unoptimized ones (before: 0.8-1 dB below); where nearly every pixel changes a little, they're 10x smaller.
 
 - Lossless WebPs, and lossy ones with alpha (most optimized animations), could be undecodable since 3.7.0 (#82): a
   prefix group whose code had a single symbol of 256 or more (a length code) took a bit per symbol instead of none.
 
@@ -59,7 +59,8 @@ export interface AnimationEncodeOptions {
 export interface WebPAnimationEncodeOptions extends AnimationEncodeOptions {
     /**
      * Lossy frames (0-100, like libwebp's quality: 75 is its default), much smaller than lossless ones. Without it the
-     * frames are lossless
+     * frames are lossless. Optimized lossy frames, like libwebp's, leave out 8x8 blocks that only changed a little (by
+     * up to 3 per channel at quality 85, 1 at 100)
      */
     quality?: number;
     /** How much effort lossy frames take (0-6), see {@link WebPEncodeOptions.effort}. Default: `2` */
@@ -296,7 +297,8 @@ export class Animation extends Array<Frame> {
             if (!Number.isInteger(effort) || effort < 0 || effort > 6) throw new RangeError(`effort must be an integer 0-6, not ${effort}`);
         }
 
-        const frames = optimize ? this.__optimized__({ replace: true, even: true, alpha: 'frame' }) : this.__webpFrames__();
+        const tolerance = quality === undefined ? undefined : webp.lossyTolerance(quality);
+        const frames = optimize ? this.__optimized__({ replace: true, even: true, alpha: 'frame', tolerance }) : this.__webpFrames__();
         return webp.encodeAnimation(frames, this.width, this.height, toPlays(this.loopCount), exifData(resolveMetadata(metadata)), quality, effort);
     }
 
 
@@ -379,6 +379,16 @@ export interface WebPEncodeFrame {
     pixels: Uint8Array;
 }
 
+/**
+ * How much a color channel of a lossy animation's pixel may change for it to count as unchanged (libwebp's
+ * QualityToMaxDiff: 1 at quality 100, 3 at 85, 31 at 0)
+ * @param quality 0-100
+ */
+export function lossyTolerance(quality: number): number {
+    const value = Math.sqrt(quality / 100);
+    return Math.max(1, Math.round(31 * (1 - value) + value));
+}
+
 /**
  * Encodes frames into an animated WebP, lossless or (with a quality) lossy. Frame offsets have to be even (the format
  * stores them halved)
 
@@ -58,6 +58,12 @@ export interface OptimizeOptions {
      * transparent, others the background color)
      */
     cover?: boolean;
+    /**
+     * For lossy frames (WebP): how much a color channel may change (at full alpha) for a pixel to count as unchanged,
+     * like libwebp's lossy animations. Unchanged pixels then only become transparent in whole 8x8 blocks (the alpha of
+     * scattered unchanged pixels costs more than leaving them as they are). Needs `replace`
+     */
+    tolerance?: number;
 }
 
 // what transparent pixels make an opaque frame cost: an alpha channel, 4 channels instead of 3 (or a palette entry
@@ -69,14 +75,14 @@ const ALPHA_COST = 4 / 3;
  * @param width The canvas width
  * @param height The canvas height
  */
-export function optimize(frames: InputFrame[], width: number, height: number, { replace, even, alpha, palette, cover }: OptimizeOptions): OptimizedFrame[] {
+export function optimize(frames: InputFrame[], width: number, height: number, { replace, even, alpha, palette, cover, tolerance }: OptimizeOptions): OptimizedFrame[] {
     const size = width * height * 4;
     // the input animation's canvas, and what the optimized animation shows after its last frame (and its disposal)
     const canvas = new Uint8Array(size), canvas32 = new Int32Array(canvas.buffer);
     const shown = new Uint8Array(size), shown32 = new Int32Array(shown.buffer);
     const output: OptimizedFrame[] = [];
 
-    const state: State = { canvas32, shown32, width, replace };
+    const state: State = { canvas32, shown32, width, replace, tolerance };
 
     // for a shared pixel format: whether the animation is opaque when all frames are stored dense, and the changes
     // from pixel to pixel all dense and as chosen
@@ -94,7 +100,7 @@ export function optimize(frames: InputFrame[], width: number, height: number, {
             return;
         }
         if (even) changed = evenArea(changed);
-        let area = sparse(state, changed);
+        let area = tolerance === undefined ? sparse(state, changed) : sparseBlocks(state, changed);
         let blend = true;
         if (area.unblendable && replace) blend = false;
         else if (area.unblendable) {
@@ -115,25 +121,31 @@ export function optimize(frames: InputFrame[], width: number, height: number, {
         // compresses better when the unchanged pixels are scattered (e.g. in videos): choose the one with fewer
         // changes from pixel to pixel, which estimates the compressed size well and costs a lot less than compressing
         // both. GIFs blend the dense area too (its unchanged pixels are the same or transparent in both), the others
-        // replace the area with it
+        // replace the area with it. Lossy frames are sparse whenever a block is unchanged (like libwebp's)
         const { x, y, width: w, height: h } = changed;
         const pixels = area.pixels;
         if (!output.length && (w !== width || h !== height)) opaque = false;
         if (!area.denseOpaque) opaque = false;
         const sparseCost = alpha === 'frame' && area.denseOpaque ? area.sparseChanges * ALPHA_COST : area.sparseChanges;
-        const dense = !blend || area.denseChanges < sparseCost
+        const dense = !blend || (tolerance !== undefined ? !area.unchangedBlocks : area.denseChanges < sparseCost
             || (palette !== undefined && colors(new Int32Array(pixels.buffer), w, { x: 0, y: 0, width: w, height: h }, palette + 1) > palette
-                && colors(canvas32, width, changed, palette + 1) <= palette);
+                && colors(canvas32, width, changed, palette + 1) <= palette));
         denseTotal += area.denseChanges;
         chosenTotal += dense ? area.denseChanges : area.sparseChanges;
         if (dense) {
             for (let row = 0; row < h; row++) pixels.set(canvas.subarray(((y + row) * width + x) * 4, ((y + row) * width + x + w) * 4), row * w * 4);
             if (replace) blend = false;
         }
-        for (let row = 0; row < h; row++) {
-            const start = ((y + row) * width + x) * 4;
-            shown.set(canvas.subarray(start, start + w * 4), start);
-        }
+        // (lossy frames keep showing the pixels of unchanged blocks as they were, with tolerance they can differ)
+        if (!dense && tolerance !== undefined) {
+            const pixels32 = new Int32Array(pixels.buffer);
+            for (let row = 0, k = 0; row < h; row++)
+                for (let p = (y + row) * width + x, end = p + w; p < end; p++, k++) if (pixels32[k] & ALPHA) shown32[p] = pixels32[k];
+        } else
+            for (let row = 0; row < h; row++) {
+                const start = ((y + row) * width + x) * 4;
+                shown.set(canvas.subarray(start, start + w * 4), start);
+            }
         output.push({ x, y, width: w, height: h, duration, dispose: false, blend, pixels });
     };
 
@@ -221,6 +233,18 @@ interface State {
     shown32: Int32Array;
     width: number;
     replace: boolean;
+    tolerance?: number;
+}
+
+/**
+ * Whether two pixels (their offsets in RGBA bytes) look the same within a tolerance, like libwebp's PixelsAreSimilar:
+ * the same alpha, and each color channel differs by at most the tolerance at full alpha
+ */
+function similar(a: Uint8Array, i: number, b: Uint8Array, j: number, tolerance: number): boolean {
+    const alpha = a[i + 3];
+    if (alpha !== b[j + 3]) return false;
+    const limit = tolerance * 255;
+    return Math.abs(a[i] - b[j]) * alpha <= limit && Math.abs(a[i + 1] - b[j + 1]) * alpha <= limit && Math.abs(a[i + 2] - b[j + 2]) * alpha <= limit;
 }
 
 // the area grown to even offsets (WebP stores them halved)
@@ -236,6 +260,65 @@ interface SparseArea {
     unblendable: Rect | null;
     /** whether the area as it is has no transparent pixels */
     denseOpaque: boolean;
+    /** lossy frames: how many blocks are unchanged (and transparent in the pixels) */
+    unchangedBlocks?: number;
+}
+
+// the size of the blocks lossy frames make transparent (libwebp's)
+const BLOCK = 8;
+
+/**
+ * For lossy frames: the area with the 8x8 blocks (from its top left) that didn't change, within the tolerance,
+ * transparent (their color is the average of what's shown, for the encoder's prediction). The other blocks are as they
+ * are, they can't be blended where they aren't opaque, unless transparent in both
+ */
+function sparseBlocks({ canvas32, shown32, width, tolerance = 0 }: State, { x, y, width: w, height: h }: Rect): SparseArea {
+    const canvas = new Uint8Array(canvas32.buffer), shown = new Uint8Array(shown32.buffer);
+    const pixels = new Uint8Array(w * h * 4), pixels32 = new Int32Array(pixels.buffer);
+    let left = w, right = -1, top = h, bottom = -1, translucent = 0, unchangedBlocks = 0;
+    for (let by = 0; by < h; by += BLOCK)
+        for (let bx = 0; bx < w; bx += BLOCK) {
+            const bw = Math.min(BLOCK, w - bx), bh = Math.min(BLOCK, h - by);
+            let unchanged = true;
+            for (let row = by; row < by + bh && unchanged; row++)
+                for (let p = (y + row) * width + x + bx, end = p + bw; p < end; p++) {
+                    const value = canvas32[p], before = shown32[p];
+                    if (value !== before && ((value | before) & ALPHA) !== 0 && !similar(canvas, p * 4, shown, p * 4, tolerance)) {
+                        unchanged = false;
+                        break;
+                    }
+                }
+
+            if (unchanged) {
+                unchangedBlocks++;
+                let r = 0, g = 0, b = 0;
+                for (let row = by; row < by + bh; row++)
+                    for (let p = ((y + row) * width + x + bx) * 4, end = p + bw * 4; p < end; p += 4) {
+                        r += shown[p]; g += shown[p + 1]; b += shown[p + 2];
+                    }
+                const n = bw * bh;
+                r = r / n | 0; g = g / n | 0; b = b / n | 0;
+                for (let row = by; row < by + bh; row++)
+                    for (let k = ((row * w) + bx) * 4, end = k + bw * 4; k < end; k += 4) {
+                        pixels[k] = r; pixels[k + 1] = g; pixels[k + 2] = b;
+                    }
+            }
+            for (let row = by; row < by + bh; row++)
+                for (let i = bx, k = row * w + bx, p = (y + row) * width + x + bx; i < bx + bw; i++, k++, p++) {
+                    const value = canvas32[p];
+                    translucent |= ~value & ALPHA;
+                    if (unchanged) continue;
+                    pixels32[k] = value;
+                    if ((value & ALPHA) !== ALPHA && ((value | shown32[p]) & ALPHA) !== 0) {
+                        if (i < left) left = i;
+                        if (i > right) right = i;
+                        if (row < top) top = row;
+                        if (row > bottom) bottom = row;
+                    }
+                }
+        }
+    const unblendable: Rect | null = right < 0 ? null : { x: x + left, y: y + top, width: right - left + 1, height: bottom - top + 1 };
+    return { pixels, sparseChanges: 0, denseChanges: 0, unblendable, denseOpaque: translucent === 0, unchangedBlocks };
 }
 
 /**
@@ -279,14 +362,15 @@ function sparse({ canvas32, shown32, width, replace }: State, { x, y, width: w,
 }
 
 /**
- * The bounding box of the changed pixels within an area. Searches from the edges inwards, so it stops early when much
+ * The bounding box of the changed pixels (within the tolerance) within an area. Searches from the edges inwards, so it stops early when much
  * changed
  */
-function bounds({ canvas32, shown32, width }: State, area: Rect): Rect | null {
+function bounds({ canvas32, shown32, width, tolerance }: State, area: Rect): Rect | null {
     const x0 = area.x, x1 = area.x + area.width, y0 = area.y, y1 = area.y + area.height;
+    const canvas = new Uint8Array(canvas32.buffer), shown = new Uint8Array(shown32.buffer);
     const test = (p: number): boolean => {
         const c = canvas32[p], s = shown32[p];
-        return c !== s && ((c | s) & ALPHA) !== 0;
+        return c !== s && ((c | s) & ALPHA) !== 0 && (tolerance === undefined || !similar(canvas, p * 4, shown, p * 4, tolerance));
     };
     const rowHas = (y: number, from: number, to: number): number => {
         for (let x = from, p = y * width + from; x < to; x++, p++) if (test(p)) return x;
 
@@ -162,4 +162,48 @@ const disc = (size, color) => new Image(size, size).fill((x, y) => {
                 panic(`screen recording: ${format} is ${size} bytes, the changes aren't stored alone`);
         }
     }
+
+    // lossy WebP: pixels that change by up to the tolerance count as unchanged, and unchanged pixels only become
+    // transparent in whole 8x8 blocks. A translucent layer over a textured map changes its color a little each frame
+    // (most pixels change by 1-2, scattered ones not at all), a box moves and one in the far corner changes its color
+    {
+        let seed = 5;
+        const random = () => (seed = Math.imul(seed, 1103515245) + 12345 >>> 0) / 2 ** 32;
+        const map = new Image(100, 60).fill((x, y) => {
+            const g = 150 + 40 * Math.sin(x / 9) * Math.cos(y / 13) + (random() - 0.5) * 30;
+            return Image.rgbaToColor(g | 0, g * 0.9 | 0, g * 0.8 | 0, 255);
+        });
+        const animation = new Animation(Array.from({length: 8}, (_, i) => {
+            const layer = new Image(100, 60).fill(x => x < 80 ? Image.rgbaToColor(i % 4, 180 + i * 7 % 5, 250 + i * 3 % 4, 150) : 0);
+            return Frame.from(map.clone().composite(layer).drawBox(5 + i * 10, 20, 12, 12, 0xff0000ff)
+                .drawBox(90, 50, 6, 6, Image.rgbaToColor(0, i * 30, 0, 255)), 50);
+        }));
+
+        const tolerance = 3;
+        const frames = animation.__optimized__({replace: true, even: true, alpha: 'frame', tolerance});
+        if (frames.length !== animation.length) panic(`lossy WebP: ${frames.length} frames instead of ${animation.length}, the box moves in each`);
+        for (const [i, f] of frames.entries()) {
+            if (i && !f.blend) panic(`lossy WebP: frame ${i} isn't sparse`);
+            // the transparent pixels of each block (from the frame's top left): all or none
+            for (let by = 0; by < f.height; by += 8)
+                for (let bx = 0; bx < f.width; bx += 8) {
+                    let transparent = 0, count = 0;
+                    for (let y = by; y < Math.min(by + 8, f.height); y++)
+                        for (let x = bx; x < Math.min(bx + 8, f.width); x++, count++) if (!f.pixels[(y * f.width + x) * 4 + 3]) transparent++;
+                    if (transparent && transparent !== count) panic(`lossy WebP: frame ${i} has a partly transparent block at ${bx},${by}`);
+                }
+        }
+        // what the frames show is within the tolerance of the animation
+        const png = await import('../dist/codecs/png.js');
+        const shown = png.compositeAnimation({width: 100, height: 60, frames: frames.map(f => ({...f, dispose: f.dispose ? 1 : 0}))});
+        shown.forEach(({pixels}, i) => {
+            const expected = animation[i].bitmap;
+            for (let k = 0; k < pixels.length; k++)
+                if (Math.abs(pixels[k] - expected[k]) > tolerance) panic(`lossy WebP: frame ${i} differs by ${Math.abs(pixels[k] - expected[k])} at pixel ${k >> 2}`);
+        });
+        // and it's smaller than without optimizing (storing the scattered unchanged pixels as transparent made it larger)
+        const optimized = await animation.encodeWebP({quality: 85}), plain = await animation.encodeWebP({quality: 85, optimize: false});
+        if (optimized.length >= plain.length / 2) panic(`lossy WebP: ${optimized.length} bytes optimized, ${plain.length} without`);
+        if ((await Animation.decode(optimized)).length !== animation.length) panic('lossy WebP: the optimized animation doesn\'t decode');
+    }
 })();