Zuletzt aktualisiert: 11. September

Bilder ohne Qualitätsverlust in Rust mit Oxipng optimieren

Tim Koschützki

Mitgründer · Berlin, Deutschland ·

Schnell ladende Seiten wirken flott, verbrauchen weniger Bandbreite und ranken besser in der Suche – doch Bilder sind oft die schwersten Assets einer Website. Verlustfreie Bildoptimierung behebt das, ohne die visuelle Qualität zu beeinträchtigen. In diesem DevTip erfahren Sie, wie Sie das mit Oxipng erreichen, einem rasend schnellen Rust-Tool für PNG-Komprimierung.

Warum Bildoptimierung wichtig ist

Kleinere Bilddateien führen zu kürzeren Ladezeiten, niedrigeren Bandbreitenkosten und besseren Core Web Vitals. Ist die Komprimierung verlustfrei, bleibt die pixelgenaue Wiedergabetreue erhalten, was für UI-Assets, Icons und Archivgrafiken entscheidend ist.

Oxipng: schnelle und effiziente PNG-Optimierung

Oxipng ist ein in Rust geschriebener Optimierer, der Legacy-Werkzeuge wie OptiPNG verbessert, indem er moderne Nebenläufigkeit und algorithmische Kniffe nutzt.

Wichtige Funktionen

Verlustfreie PNG-Komprimierung
Multithreading zur Nutzung mehrerer CPU-Kerne
Automatisierte Heuristiken, die optimale Einstellungen wählen
Einfache CLI- und Bibliotheks-APIs für unkomplizierte Automatisierung
Größenreduktionen, die vom Bild und seiner bestehenden Komprimierung abhängen

Systemanforderungen

Rust 1.74.0 oder neuer (zum Bauen aus dem Quellcode)
Builds ohne das Flag --release können sehr langsam sein; nutzen Sie für den Produktiveinsatz Release-Builds

Oxipng installieren

Sie können Oxipng mit dem Paketmanager von Rust oder mit gängigen Systempaketmanagern installieren:

# Via cargo (rust's package manager)
cargo install oxipng

# Via package managers
# On distributions that provide an oxipng package (otherwise use cargo above)
apt-get install oxipng
# For macOS (using homebrew)
brew install oxipng

Eine einzelne PNG-Datei optimieren

oxipng -o 4 image.png

Das Flag -o legt die Optimierungsstufe fest (0–6). Höhere Stufen strengen sich mehr an, um zusätzliche Bytes herauszuholen, was mehr CPU-Zeit kostet. Stufe 4 ist oft ein guter Kompromiss.

Multithreading steuern

Oxipng nutzt standardmäßig mehrere CPU-Kerne. Begrenzen Sie die Anzahl der Threads, wenn Sie sich einen Build-Rechner teilen:

# Use at most four threads
oxipng -o 4 --threads 4 image.png

Verwenden Sie --pretend (-P), um mögliche Einsparungen zu messen, ohne Dateien zu schreiben. Führen Sie Benchmarks mit Ihren eigenen Assets durch, bevor Sie eine Optimierungsstufe für Commit-Hooks oder CI/CD wählen.

Fortgeschrittene Nutzung

Einen Ordner stapelweise verarbeiten

Sie können find mit oxipng kombinieren, um alle PNG-Dateien in einem Verzeichnis und seinen Unterverzeichnissen zu optimieren:

find ./images -type f -name "*.png" -exec oxipng -o 4 {} +

Dieser Befehl findet alle Dateien, die auf .png enden, im Verzeichnis ./images und führt darauf oxipng mit Optimierungsstufe 4 (-o 4) aus. Dabei werden die Dateien direkt überschrieben; bewahren Sie eine Sicherung der Originale auf.

Metadaten bewahren

Oxipng fordert standardmäßig kein Entfernen von Metadaten an. Stattdessen bewahrt --preserve nach Möglichkeit Dateiberechtigungen und Zeitstempel. Um diese Dateiattribute zu erhalten:

oxipng -o 4 --preserve image.png

Oxipng in Ihren Rust-Code einbetten

Sie können Oxipng auch als Bibliothek in Ihren Rust-Anwendungen verwenden. Fügen Sie es zunächst als Abhängigkeit in Ihrer Cargo.toml hinzu:

[dependencies]
oxipng = "9.0" # Check crates.io for the latest version

Anschließend können Sie seine Optimierungsfunktionen programmatisch aufrufen:

use oxipng::{optimize, InFile, OutFile, Options};
use std::path::PathBuf;

fn main() -> Result<(), oxipng::PngError> {
    let input_path = PathBuf::from("input.png");
    // OutFile::None performs a dry run; from_path writes to a separate file.
    let output_path = OutFile::from_path(PathBuf::from("output.png"));
    // Use optimization level 4
    let options = Options::from_preset(4);

    optimize(&InFile::Path(input_path), &output_path, &options)?;
    println!("Optimization successful!");

    Ok(())
}

Dieses Beispiel optimiert input.png mit der Voreinstellungsstufe 4 und speichert das Ergebnis in output.png. Eine Fehlerbehandlung ist für mehr Robustheit enthalten.

Anwendungen in der Praxis

Webentwicklung: PNG-Assets automatisch während des Build-Prozesses optimieren, damit Websites schneller laden.
Spieleentwicklung: Die Größe von Textur-Atlanten und UI-Elementen ohne sichtbare Verluste reduzieren.
CI/CD-Pipelines: Einen Optimierungsschritt ergänzen, damit alle committeten PNGs komprimiert sind.
Content-Management-Systeme (CMS): Oxipng einbinden, um von Nutzern hochgeladene Bilder im laufenden Betrieb zu optimieren.

Transloadit für die Optimierung mehrerer Formate nutzen

Oxipng eignet sich hervorragend für PNGs, doch vielleicht brauchen Sie eine Lösung für verschiedene Formate wie JPEG, GIF, WebP und SVG. Der Robot 🤖 /image/optimize von Transloadit bietet eine effiziente Bildoptimierung, die diese Formate unterstützt. Er kann Dateigrößen deutlich reduzieren (oft um bis zu 80 %) und dabei die visuelle Qualität erhalten, wobei Formaterkennung und Optimierungseinstellungen automatisch übernommen werden. Er lässt sich einfach über die REST API oder SDKs integrieren.

Ob Sie Oxipng direkt in Ihre Rust-Projekte integrieren oder einen gehosteten Dienst wie Transloadit für eine breitere Formatunterstützung nutzen: Verlustfreie Bildoptimierung ist ein unkomplizierter Weg, die Performance zu verbessern. Probieren Sie Oxipng aus und machen Sie Ihre PNGs noch heute schlanker.