PNG-Optimierer in Node.js im Vergleich

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande · Bio anzeigen

Die Optimierung von PNG-Bildern ist ein entscheidender Schritt, um die Web-Performance zu verbessern. Da große Bilddateien Websites verlangsamen können, stehen Entwicklern mehrere Tools zur Verfügung, um PNGs effektiv zu komprimieren. In diesem Beitrag vergleichen wir drei beliebte PNG-Optimierungstools, die sich gut in Node.js integrieren lassen: pngquant, OptiPNG und sharp.

Überblick über die Tools

Pngquant

pngquant ist ein Kommandozeilen-Werkzeug, das verlustbehaftete Komprimierung auf PNG-Bilder anwendet. Es kann Dateigrößen deutlich reduzieren und dabei eine nahezu originalgetreue visuelle Qualität bewahren. Es ist für Linux, macOS und Windows verfügbar und in vielen Pipelines zur Bildverarbeitung beliebt.

Optipng

OptiPNG ist ein verlustfreier Optimierer für PNG-Dateien. Es komprimiert Bilddaten ohne jeden Qualitätsverlust neu. Zwar erreicht es womöglich nicht die aggressive Reduktion der Dateigröße von pngquant, doch ist es ideal für Szenarien, in denen jedes einzelne Pixel erhalten bleiben muss.

Sharp

Sharp ist eine hochperformante Node.js-Bibliothek für die Bildverarbeitung, einschließlich der PNG-Optimierung. Statt externe Kommandozeilen-Werkzeuge aufzurufen, läuft sharp direkt in Ihrer Node.js-Umgebung und bietet eine einheitliche API zum Zuschneiden, zur Größenänderung und zum Komprimieren von Bildern.

Installation

Verwenden Sie Node.js 22.12 oder neuer. Installieren Sie OptiPNG mit dem Paketmanager Ihrer Plattform sowie die unten aufgeführten Node.js-Pakete. pngquant-bin liefert eine eigene ausführbare pngquant-Datei mit, deren Version von Ihrer Systeminstallation abweichen kann:

# Ubuntu/Debian
apt-get install pngquant optipng

# macOS
brew install pngquant optipng

# Node.js
npm install sharp@0.35 pngquant-bin@9 pretty-bytes@7

Tools in Ihren Node.js-Workflow integrieren

Fügen Sie die folgenden JavaScript-Blöcke in eine einzige Datei .mjs ein. Sie teilen sich Importe und Hilfsfunktionen. Verwenden Sie unterschiedliche Pfade für Eingabe und Ausgabe: Diese Beispiele überschreiben bei wiederholten Durchläufen ihre benannten Ausgabedateien. Wählen Sie daher Pfade, die ausschließlich für generierte Bilder vorgesehen sind.

Pngquant über Child-Prozesse verwenden

Verwenden Sie execFile von Node.js zusammen mit pngquant-bin für eine bessere Fehlerbehandlung und plattformübergreifende Unterstützung:

import { execFile } from 'node:child_process'
import pngquant from 'pngquant-bin'

function optimizeWithPngquant(inputFile, outputFile) {
  console.time('pngquant-optimization')

  return new Promise((resolve, reject) => {
    execFile(
      pngquant,
      ['--quality=65-80', '--strip', '--speed=3', '--force', '--output', outputFile, '--', inputFile],
      (error) => {
        console.timeEnd('pngquant-optimization')

        if (error?.code === 99) {
          // pngquant writes no output when it cannot meet the minimum quality.
          resolve(inputFile)
          return
        }
        if (error) {
          reject(new Error('Pngquant optimization failed', { cause: error }))
          return
        }
        resolve(outputFile)
      },
    )
  })
}

Die Qualitätseinstellung von pngquant⁠ kann zum Exit-Code 99 führen, wenn die Mindestqualität nicht erreicht werden kann. In diesem Fall gibt die Funktion den ursprünglichen Eingabepfad zurück; eine Ausgabe aus einem früheren Durchlauf fließt nicht in den Vergleich dieses Durchlaufs ein.

Optipng über Child-Prozesse verwenden

Binden Sie OptiPNG mit sauberer Fehlerbehandlung und Performance-Messung ein:

import { promisify } from 'node:util'

const execFilePromise = promisify(execFile)

async function optimizeWithOptipng(inputFile, outputFile) {
  console.time('optipng-optimization')

  try {
    await execFilePromise('optipng', [
      '-o7', '-clobber', '-strip', 'all', '-out', outputFile, '--', inputFile,
    ])
    console.timeEnd('optipng-optimization')
    return outputFile
  } catch (error) {
    console.timeEnd('optipng-optimization')
    throw new Error('OptiPNG optimization failed', { cause: error })
  }
}

sharp für die Optimierung im selben Prozess verwenden

Dieses Sharp-Beispiel erzeugt ein verlustbehaftetes Paletten-PNG, vergleichbar mit pngquant. Für verlustfreie Komprimierung lassen Sie quality, palette und effort weg und behalten compressionLevel: 9 bei. Vergleichen Sie die Ergebnisse anhand Ihrer eigenen Bilder; eine Optimierung garantiert keine kleinere Datei:

import sharp from 'sharp'

async function optimizeWithSharp(inputFile, outputFile) {
  console.time('sharp-optimization')

  try {
    await sharp(inputFile)
      .png({
        quality: 80,
        compressionLevel: 9,
        palette: true,
        effort: 10,
      })
      .toFile(outputFile)

    console.timeEnd('sharp-optimization')
    return outputFile
  } catch (error) {
    console.timeEnd('sharp-optimization')
    throw new Error('Sharp optimization failed', { cause: error })
  }
}

Vergleich der Dateigrößen

Verwenden Sie dieses robuste Vergleichswerkzeug, um die Ergebnisse der Optimierung zu bewerten:

import fs from 'node:fs'
import prettyBytes from 'pretty-bytes'

function compareFiles(files) {
  const results = files.map((file) => {
    try {
      const stats = fs.statSync(file)
      return {
        file: file,
        size: stats.size,
        prettySize: prettyBytes(stats.size),
      }
    } catch (error) {
      return {
        file: file,
        error: `Could not read file: ${error.message}`,
      }
    }
  })

  return results.sort((a, b) => (a.size ?? Infinity) - (b.size ?? Infinity))
}

async function compareOptimizations(inputFile) {
  const results = await Promise.all([
    optimizeWithPngquant(inputFile, 'output-pngquant.png'),
    optimizeWithOptipng(inputFile, 'output-optipng.png'),
    optimizeWithSharp(inputFile, 'output-sharp.png'),
  ])

  const comparison = compareFiles([...new Set([inputFile, ...results])])

  console.table(comparison)
}

compareOptimizations('input.png').catch((error) => {
  console.error(error.message)
  process.exitCode = 1
})

Bewährte Verfahren für die Optimierung

Wenn Sie die Bildoptimierung in Ihren Workflow einbauen:

• Nutzen Sie Worker-Threads für die Stapelverarbeitung großer Bildmengen
• Implementieren Sie eine saubere Fehlerbehandlung und Retries
• Überwachen Sie den Speicherverbrauch bei der Verarbeitung großer Bilder
• Erwägen Sie progressives Laden für die Auslieferung im Web
• Prüfen Sie WebP als moderne Alternative zu PNG
• Sorgen Sie für ein sauberes Aufräumen temporärer Dateien
• Ergänzen Sie Logging und Monitoring für Produktivumgebungen

Das richtige Tool auswählen

Jeder Optimierer bietet eigene Vorteile:

• pngquant: Am besten geeignet für aggressive verlustbehaftete Komprimierung bei minimalen sichtbaren Auswirkungen
• OptiPNG: Ideal für verlustfreie Optimierung, wenn der Erhalt der Qualität entscheidend ist
• sharp: Hervorragend für integrierte Workflows zur Bildverarbeitung bei guter Performance

Berücksichtigen Sie bei der Auswahl einer Lösung für Ihre Projekte Faktoren wie die Anforderungen an die Bildqualität, die Verarbeitungsgeschwindigkeit und die Komplexität der Integration.

Fazit

Die PNG-Optimierung ist entscheidend für die Web-Performance. Moderne Tools wie pngquant, OptiPNG und sharp bieten leistungsfähige Möglichkeiten, eine effiziente Bildoptimierung in Node.js-Anwendungen umzusetzen. Jedes Tool hat eigene Stärken, und wenn Sie sie mit Ihren konkreten Bildbeständen testen, finden Sie die optimale Lösung für Ihre Anforderungen.

Transloadit nutzt pngquant im Robot /image/optimize , um eine effiziente Bildverarbeitung im großen Maßstab sicherzustellen.