@@ -4,7 +4,7 @@
 import fs from 'node:fs';
 import sharp from 'sharp';
 import { Bench } from 'tinybench';
-import { libraries } from './libs.js';
+import { libraries, referenceDecode, AVIF_QUALITY } from './libs.js';
 
 const lib = libraries.find(l => l.name === process.argv[2]);
 if (!lib) throw new Error(`unknown library ${process.argv[2]}, one of: ${libraries.map(l => l.name).join(', ')}`);
@@ -17,9 +17,14 @@ const files = {
 };
 files['photo.png'] = await sharp(files['photo.jpg']).png().toBuffer();
 files['photo.webp'] = await sharp(files['photo.jpg']).webp({ quality: 80 }).toBuffer();
+// (and AVIF by libaom, JPEG XL by libjxl: sharp's and jsquash's encoders at the benchmark's qualities)
+files['photo.avif'] = await sharp(files['photo.jpg']).avif({ quality: AVIF_QUALITY }).toBuffer();
+const rawOf = async file => { const { data, info } = await sharp(files[file]).ensureAlpha().raw().toBuffer({ resolveWithObject: true }); return { data, width: info.width, height: info.height }; };
+const pixels = { 'photo.jpg': await rawOf('photo.jpg'), 'graphic.png': await rawOf('graphic.png'), 'overlay.png': await rawOf('overlay.png') };
+files['photo.jxl'] = new Uint8Array(await (libraries.find(l => l.name === 'jsquash').encode.jxl)({ ...pixels['photo.jpg'], data: new Uint8ClampedArray(pixels['photo.jpg'].data) }));
 
 const speed = {}, sizes = {};
-const formatName = format => ({ jpeg: 'JPEG', png: 'PNG', webp: 'WebP' })[format];
+const formatName = format => ({ jpeg: 'JPEG', png: 'PNG', webp: 'WebP', avif: 'AVIF', jxl: 'JPEG XL' })[format];
 
 // collect: canvases (native memory) and Photon images (WebAssembly memory) hold their pixels outside the V8 heap and
 // only free them in finalizers that run on a later event-loop turn, which tinybench's loop never yields to. So between
@@ -37,10 +42,16 @@ async function measure(task, fn) {
 }
 
 const decode = data => Promise.resolve().then(() => lib.decode(data));
-const photo = await decode(files['photo.jpg']), overlay = await decode(files['overlay.png']);
+// (libraries without the inputs' formats get their pixels)
+const input = file => lib.fromPixels ? lib.fromPixels(pixels[file]) : decode(files[file]);
+const photo = await input('photo.jpg'), overlay = await input('overlay.png');
 
-for (const [task, file] of [['decode JPEG', 'photo.jpg'], ['decode PNG', 'photo.png'], ['decode WebP', 'photo.webp']])
-    if (await decode(files[file]).then(() => true, () => false)) await measure(task, () => decode(files[file]));
+// a format the library reads but not this file (PureJsImage's JPEG XL) is recorded as failing
+for (const [task, file, format] of [['decode JPEG', 'photo.jpg'], ['decode PNG', 'photo.png'], ['decode WebP', 'photo.webp'], ['decode AVIF', 'photo.avif', 'avif'], ['decode JPEG XL', 'photo.jxl', 'jxl']]) {
+    const error = await decode(files[file]).then(() => null, e => e);
+    if (!error) await measure(task, () => decode(files[file]));
+    else if (lib.decodes?.includes(format)) speed[task] = { error: String(error.message ?? error) };
+}
 for (const [format, encode] of Object.entries(lib.encode))
     await measure(`encode ${formatName(format)}`, () => encode(photo));
 for (const op of ['resize', 'rotate', 'blur', 'composite', 'crop', 'clone'])
@@ -58,11 +69,25 @@ if (lib.animation) {
     await measure('encode GIF', () => lib.animation.encode(animation));
 }
 
-// encoded sizes, with each library's default settings (JPEG at quality 80, WebP lossless)
+// encoded sizes, with each library's default settings (JPEG at quality 80, WebP lossless, AVIF and JPEG XL at the same
+// quality: with their PSNR, of the color over black, as libavif and libjxl decode them)
+const quality = {};
+const psnr = (a, b) => {
+    let se = 0;
+    for (let i = 0; i < a.length; i += 4) for (let c = 0; c < 3; c++) {
+        const d = a[i + c] * a[i + 3] / 255 - b[i + c] * b[i + 3] / 255;
+        se += d * d;
+    }
+    return Math.round(10 * Math.log10(255 * 255 * 3 * a.length / 4 / se) * 10) / 10;
+};
 for (const [name, file] of [['photo', 'photo.jpg'], ['graphic', 'graphic.png']]) {
-    const image = await decode(files[file]);
-    for (const [format, encode] of Object.entries(lib.encode)) sizes[`${name} ${formatName(format)}`] = (await encode(image)).length;
+    const image = await input(file);
+    for (const [format, encode] of Object.entries(lib.encode)) {
+        const encoded = new Uint8Array(await encode(image));
+        sizes[`${name} ${formatName(format)}`] = encoded.length;
+        if (format === 'avif' || format === 'jxl') quality[`${name} ${formatName(format)}`] = psnr(pixels[file].data, await referenceDecode(encoded, format));
+    }
 }
 if (lib.animation) sizes['animation GIF'] = (await lib.animation.encode(await lib.animation.decode(files['animation.gif']))).length;
 
-console.log(JSON.stringify({ speed, sizes }));
+console.log(JSON.stringify({ speed, sizes, quality }));
@@ -1,5 +1,5 @@
-// Measures what installing each library takes: npm install <package>@<version> in an empty project (the versions
-// installed here), then the apparent size of node_modules and the number of packages in it. Writes installs.json
+// Measures what installing each library takes: npm install <package>@<version> (all of a library's packages) in an
+// empty project (the versions installed here), then the apparent size of node_modules and the number of packages in it. Writes installs.json
 import { execFileSync } from 'node:child_process';
 import fs from 'node:fs';
 import os from 'node:os';
@@ -13,14 +13,14 @@ const size = dir => fs.readdirSync(dir, { withFileTypes: true }).reduce((sum, en
 
 const installs = {};
 for (const lib of libraries) {
-    const installed = JSON.parse(fs.readFileSync(new URL(`./node_modules/${lib.package}/package.json`, import.meta.url)));
+    const installed = (lib.packages ?? [lib.package]).map(p => JSON.parse(fs.readFileSync(new URL(`./node_modules/${p}/package.json`, import.meta.url))));
     const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'imagescript-bench-'));
     try {
         fs.writeFileSync(path.join(dir, 'package.json'), '{}');
-        execFileSync('npm', ['install', `${installed.name}@${installed.version}`, '--no-audit', '--no-fund', '--loglevel=error'], { cwd: dir, stdio: 'inherit' });
+        execFileSync('npm', ['install', ...installed.map(i => `${i.name}@${i.version}`), '--no-audit', '--no-fund', '--loglevel=error'], { cwd: dir, stdio: 'inherit' });
         const lock = JSON.parse(fs.readFileSync(path.join(dir, 'package-lock.json')));
         installs[lib.name] = {
-            package: `${installed.name}@${installed.version}`,
+            package: installed.map(i => `${i.name}@${i.version}`).join(' '),
             bytes: size(path.join(dir, 'node_modules')),
             // the lockfile also lists optional packages for other platforms, which aren't installed
             packages: Object.keys(lock.packages).filter(p => p.startsWith('node_modules/') && fs.existsSync(path.join(dir, p))).length
 
@@ -20,6 +20,21 @@ const photon = require('@silvia-odwyer/photon-node');
 const { createImageLibrary } = await import('purejsimage');
 const { allCodecs } = await import('purejsimage/codecs/all');
 const pureJsImage = createImageLibrary(allCodecs);
+// jsquash: Squoosh's libavif and libjxl builds (their threaded builds are off in Node: one thread), the modules given
+const jsquash = {};
+for (const [name, file] of [['avif/encode', 'avif/codec/enc/avif_enc.wasm'], ['avif/decode', 'avif/codec/dec/avif_dec.wasm'],
+    ['jxl/encode', 'jxl/codec/enc/jxl_enc.wasm'], ['jxl/decode', 'jxl/codec/dec/jxl_dec.wasm']]) {
+    const codec = await import(`@jsquash/${name}.js`);
+    await codec.init(await WebAssembly.compile(fs.readFileSync(new URL(`./node_modules/@jsquash/${file}`, import.meta.url))));
+    jsquash[name] = codec.default;
+}
+
+/** libavif's or libjxl's RGBA of an AVIF or JPEG XL (for the quality of the encoded files) */
+export const referenceDecode = async (data, format) => (await jsquash[`${format}/decode`](data)).data;
+
+// lossy AVIF and JPEG XL at the same nominal quality in every library (their scales differ: the file sizes come with
+// their PSNR)
+export const AVIF_QUALITY = 60, JXL_QUALITY = 90;
 
 // the same work in every library: halve the size (bilinear where it can be chosen), rotate by 30° (growing the
 // image to fit), blur with a radius/sigma of 5, place a semi-transparent overlay, cut out a quarter
@@ -33,13 +48,15 @@ const font = fs.readFileSync(FONT_FILE), svg = fs.readFileSync(SVG_FILE, 'utf8')
 const svgScale = SVG_WIDTH / Number(svg.match(/<svg[^>]*\swidth="(\d+)/)[1]);
 const svgAtWidth = svg.replace(/<svg[^>]*>/, tag => tag.replace(/\s(width|height)="(\d+)"/g, (_, name, value) => ` ${name}="${Math.round(value * svgScale)}"`));
 
-const imageScript = (IS, { version, package: pkg, kind, blur = true, webp = true, bilinear = true }) => ({
+const imageScript = (IS, { version, package: pkg, kind, blur = true, webp = true, bilinear = true, modern = true }) => ({
     name: `ImageScript ${version}`, package: pkg, kind,
+    ...modern && { decodes: ['avif', 'jxl'] },
     decode: data => IS.Image.decode(data),
     encode: {
         png: image => image.encode(),
         jpeg: image => image.encodeJPEG(80),
-        ...webp && { webp: image => image.encodeWebP() }
+        ...webp && { webp: image => image.encodeWebP() },
+        ...modern && { avif: image => image.encodeAVIF({ quality: AVIF_QUALITY }), jxl: image => image.encodeJXL({ quality: JXL_QUALITY }) }
     },
     resize: image => image.clone().resize(...RESIZE, bilinear ? IS.Image.RESIZE_BILINEAR : IS.Image.RESIZE_NEAREST_NEIGHBOR),
     rotate: image => image.clone().rotate(ANGLE),
@@ -71,7 +88,7 @@ const drawn = (width, height, draw) => {
 
 export const libraries = [
     imageScript(ImageScript, { version: '3', package: 'imagescript', kind: 'JavaScript' }),
-    imageScript(ImageScriptV1, { version: '1', package: 'imagescript-v1', kind: 'WebAssembly', blur: false, webp: false, bilinear: false }),
+    imageScript(ImageScriptV1, { version: '1', package: 'imagescript-v1', kind: 'WebAssembly', blur: false, webp: false, bilinear: false, modern: false }),
     {
         name: 'Jimp', package: 'jimp', kind: 'JavaScript',
         decode: data => Jimp.fromBuffer(data),
@@ -104,12 +121,14 @@ export const libraries = [
         // PureJsImage works on pipelines from encoded data to encoded data, without decoded images: a decoded image is
         // a BMP, its fastest uncompressed format (a BMP to BMP pipeline takes about 40 ms on the photo), and every
         // operation runs a pipeline from it back to a BMP, like sharp's raw pixels
-        name: 'PureJsImage', package: 'purejsimage', kind: 'JavaScript',
+        name: 'PureJsImage', package: 'purejsimage', kind: 'JavaScript', decodes: ['avif', 'jxl'],
         decode: async data => toBmp(await pureJsImage.open(data)),
         encode: {
             png: async image => (await pureJsImage.open(image)).png().toUint8Array(),
             jpeg: async image => (await pureJsImage.open(image)).jpeg({ quality: 80 }).toUint8Array(),
-            webp: async image => (await pureJsImage.open(image)).webp({ lossless: true }).toUint8Array()
+            webp: async image => (await pureJsImage.open(image)).webp({ lossless: true }).toUint8Array(),
+            // (it has no quality option)
+            avif: async image => (await pureJsImage.open(image)).avif().toUint8Array()
         },
         resize: async image => toBmp((await pureJsImage.open(image)).resize({ width: RESIZE[0], height: RESIZE[1], kernel: 'bilinear', fit: 'fill' })),
         rotate: async image => toBmp((await pureJsImage.open(image)).rotate(ANGLE, { background: 'transparent' })),
@@ -132,12 +151,13 @@ export const libraries = [
         clone: image => clonePhoton(image)
     },
     {
-        name: 'sharp', package: 'sharp', kind: 'native (libvips)',
+        name: 'sharp', package: 'sharp', kind: 'native (libvips)', decodes: ['avif'],
         decode: async data => toRaw(sharp(data).ensureAlpha()),
         encode: {
             png: image => pipeline(image).png().toBuffer(),
             jpeg: image => pipeline(image).jpeg({ quality: 80 }).toBuffer(),
-            webp: image => pipeline(image).webp({ lossless: true }).toBuffer()
+            webp: image => pipeline(image).webp({ lossless: true }).toBuffer(),
+            avif: image => pipeline(image).avif({ quality: AVIF_QUALITY }).toBuffer()
         },
         resize: image => toRaw(pipeline(image).resize(...RESIZE, { kernel: 'linear', fit: 'fill' })),
         rotate: image => toRaw(pipeline(image).rotate(ANGLE, { background: { r: 0, g: 0, b: 0, alpha: 0 } })),
@@ -156,6 +176,16 @@ export const libraries = [
                 .gif({ delay: info.delay, loop: info.loop }).toBuffer()
         }
     },
+    {
+        // AVIF and JPEG XL only: a decoded image is an ImageData, made from raw pixels for the other inputs
+        name: 'jsquash', package: '@jsquash/avif', packages: ['@jsquash/avif', '@jsquash/jxl'], kind: 'WebAssembly', decodes: ['avif', 'jxl'],
+        fromPixels: ({ data, width, height }) => ({ data: new Uint8ClampedArray(data), width, height, colorSpace: 'srgb' }),
+        decode: data => data[4] === 0x66 && data[5] === 0x74 ? jsquash['avif/decode'](data) : jsquash['jxl/decode'](data),
+        encode: {
+            avif: image => jsquash['avif/encode'](image, { quality: AVIF_QUALITY }),
+            jxl: image => jsquash['jxl/encode'](image, { quality: JXL_QUALITY })
+        }
+    },
     {
         name: '@napi-rs/canvas', package: '@napi-rs/canvas', kind: 'native (Skia)', collect: true,
         decode: async data => { const image = await canvas.loadImage(data); return drawn(image.width, image.height, ctx => ctx.drawImage(image, 0, 0)); },
 
@@ -7,6 +7,8 @@
     "bench": "node run.js && node installs.js && node report.js"
   },
   "dependencies": {
+    "@jsquash/avif": "2.1.1",
+    "@jsquash/jxl": "1.3.0",
     "@napi-rs/canvas": "1.0.11",
     "@silvia-odwyer/photon-node": "0.3.4",
     "image-js": "1.7.1",