PNG-Optimierer in Node.js vergleichen

(
  mkdir png-compare &&
  cd png-compare &&
  printf '{"private":true,"type":"module","packageManager":"yarn@4.12.0"}\n' > package.json &&
  touch yarn.lock &&
  YARN_ENABLE_GLOBAL_CACHE=false YARN_ENABLE_SCRIPTS=true YARN_NODE_LINKER=node-modules \
    corepack yarn add --exact sharp@0.35.3 pngquant-bin@9.0.0 pngjs@7.0.0
)

import { execFile } from 'node:child_process'
import { createHash } from 'node:crypto'
import { mkdir, readFile, writeFile } from 'node:fs/promises'
import { join, resolve } from 'node:path'
import { promisify } from 'node:util'

import { PNG } from 'pngjs'
import pngquant from 'pngquant-bin'
import sharp from 'sharp'

const execFilePromise = promisify(execFile)
type Pixels = { width: number; height: number; data: Uint8Array }

function decodePng(bytes: Buffer): Pixels {
  const image = PNG.sync.read(bytes, { checkCRC: true })
  // Hidden RGB is not rendered, and decoders represent tRNS keys differently.
  for (let index = 0; index < image.data.length; index += 4) {
    if (image.data[index + 3] === 0) image.data.fill(0, index, index + 3)
  }
  return image
}

function checkInput(bytes: Buffer): void {
  if (bytes[24] !== 8 || ![2, 6].includes(bytes[25])) {
    throw new Error('Use an 8-bit RGB or RGBA PNG')
  }
  for (let offset = 8; offset + 12 <= bytes.length;) {
    const length = bytes.readUInt32BE(offset)
    const type = bytes.toString('ascii', offset + 4, offset + 8)
    if (['acTL', 'iCCP', 'gAMA', 'cHRM', 'sRGB', 'eXIf'].includes(type)) {
      throw new Error(`Unsupported input chunk: ${type}; use an unprofiled static PNG`)
    }
    offset += length + 12
  }
}

function pixelMetrics(before: Pixels, after: Pixels) {
  if (before.width !== after.width || before.height !== after.height) {
    throw new Error('Output dimensions differ from the input')
  }
  let changedPixels = 0
  let squaredError = 0
  let maxAlphaError = 0
  for (let index = 0; index < before.data.length; index += 4) {
    const alphaBefore = before.data[index + 3] / 255
    const alphaAfter = after.data[index + 3] / 255
    maxAlphaError = Math.max(maxAlphaError, Math.abs(alphaBefore - alphaAfter) * 255)
    if (before.data.subarray(index, index + 4).some((value, channel) =>
      value !== after.data[index + channel])) changedPixels++
    for (const background of [0, 255]) {
      for (let channel = 0; channel < 3; channel++) {
        const a = before.data[index + channel] * alphaBefore + background * (1 - alphaBefore)
        const b = after.data[index + channel] * alphaAfter + background * (1 - alphaAfter)
        squaredError += (a - b) ** 2
      }
    }
  }
  return {
    changedPixels,
    rmse: Number(Math.sqrt(squaredError / (before.width * before.height * 6)).toFixed(3)),
    maxAlphaError: Math.round(maxAlphaError),
  }
}

async function optimizeWithPngquant(input: string, output: string, quality: string) {
  try {
    await execFilePromise(pngquant, [
      `--quality=${quality}`, '--strip', '--speed=3', '--output', output, '--', input,
    ])
    return output
  } catch (error) {
    if (error instanceof Error && 'code' in error && error.code === 99) return null
    throw new Error('pngquant failed', { cause: error })
  }
}

async function optimizeWithOptipng(input: string, output: string) {
  await execFilePromise('optipng', ['-o7', '-strip', 'all', '-out', output, '--', input])
  return output
}

async function optimizeWithSharp(input: string, output: string, palette: boolean) {
  await sharp(input)
    .png(palette
      ? { compressionLevel: 9, adaptiveFiltering: true, palette: true, quality: 80, effort: 10 }
      : { compressionLevel: 9, adaptiveFiltering: true, palette: false })
    .toFile(output)
  return output
}

async function main(): Promise<void> {
  const [inputArgument, directoryArgument, quality = '65-80', ...extra] = process.argv.slice(2)
  const range = /^(\d{1,3})-(\d{1,3})$/.exec(quality)
  if (!inputArgument || !directoryArgument || extra.length || !range ||
    Number(range[1]) > Number(range[2]) || Number(range[2]) > 100) {
    throw new Error('Usage: node compare.mts INPUT.png NEW_DIRECTORY [MIN-MAX]')
  }
  const input = resolve(inputArgument)
  const directory = resolve(directoryArgument)
  const original = await readFile(input)
  const before = decodePng(original)
  checkInput(original)
  const versions = {
    node: process.version,
    sharp: sharp.versions.sharp,
    libvips: sharp.versions.vips,
    pngquant: (await execFilePromise(pngquant, ['--version'])).stdout.trim(),
    optipng: (await execFilePromise('optipng', ['-version'])).stdout.trim().split('\n')[0],
  }
  await mkdir(directory)
  const jobs = [
    { name: 'pngquant', lossless: false, settings: `quality=${quality}, speed=3`, run:
      (output: string) => optimizeWithPngquant(input, output, quality) },
    { name: 'optipng', lossless: true, settings: '-o7 -strip all', run:
      (output: string) => optimizeWithOptipng(input, output) },
    { name: 'sharp-full', lossless: true, settings: 'compressionLevel=9, adaptiveFiltering=true, palette=false', run:
      (output: string) => optimizeWithSharp(input, output, false) },
    { name: 'sharp-palette', lossless: false, settings: 'quality=80, effort=10, compressionLevel=9, adaptiveFiltering=true', run:
      (output: string) => optimizeWithSharp(input, output, true) },
  ]
  const results = []
  for (const job of jobs) {
    const start = performance.now()
    const file = await job.run(join(directory, `${job.name}.png`))
    const ms = Number((performance.now() - start).toFixed(1))
    if (file === null) {
      results.push({ name: job.name, status: 'refused', settings: job.settings, ms })
      continue
    }
    const encoded = await readFile(file)
    const metrics = pixelMetrics(before, decodePng(encoded))
    if (job.lossless && metrics.changedPixels !== 0) {
      throw new Error(`${job.name}: decoded pixels changed`)
    }
    results.push({ name: job.name, status: 'encoded', file, settings: job.settings,
      bytes: encoded.length, ms, ...metrics })
  }
  const report = {
    input: { file: input, bytes: original.length, width: before.width, height: before.height,
      sha256: createHash('sha256').update(original).digest('hex') },
    versions,
    results,
  }
  const reportFile = join(directory, 'results.json')
  await writeFile(reportFile, `${JSON.stringify(report, null, 2)}\n`, { flag: 'wx' })
  console.table(results)
  console.log(`Report: ${reportFile}`)
}

main().catch((error: unknown) => {
  console.error(`Comparison failed for ${process.argv[2] ?? '(no input)'}:`,
    error instanceof Error ? error.message : error)
  process.exitCode = 1
})

import { mkdir, writeFile } from 'node:fs/promises'

import { PNG } from 'pngjs'

async function main(): Promise<void> {
  await mkdir('fixtures')
  const size = 256
  for (const name of ['gradient', 'line-art', 'alpha']) {
    const data = Buffer.alloc(size * size * 4)
    for (let y = 0; y < size; y++) {
      for (let x = 0; x < size; x++) {
        const index = (y * size + x) * 4
        const line = x % 32 < 2 || y % 32 < 2
        const color = x < 128 ? [30, 110, 220] : [230, 70, 40]
        const rgb = name === 'gradient' ? [x, y, Math.floor((x + y) / 2)]
          : name === 'line-art' ? (line ? [0, 0, 0] : (y < 128 ? color : [255, 255, 255]))
          : color
        data.set(rgb, index)
        data[index + 3] = name === 'alpha' ? (x < 64 ? 0 : x < 192 ? 128 : 255) : 255
      }
    }
    const bytes = PNG.sync.write({ width: size, height: size, data }, { deflateLevel: 1 })
    await writeFile(`fixtures/${name}.png`, bytes, { flag: 'wx' })
  }
}

main().catch((error: unknown) => {
  console.error(error instanceof Error ? error.message : error)
  process.exitCode = 1
})

node make-fixtures.mts &&
node compare.mts fixtures/gradient.png results-gradient &&
node compare.mts fixtures/line-art.png results-line-art &&
node compare.mts fixtures/alpha.png results-alpha

node compare.mts fixtures/gradient.png results-strict 100-100