Dateigröße von Bildern ohne Verluste reduzieren

Dateigröße von Bildern ohne Verluste reduzieren mit ImageOptim

2014 waren Webseiten im Schnitt knapp unter 2MB groß, davon haben Bilder fast 64% ausgemacht. Die restlichen ~36% sind HTML, JS, CSS und Sonstiges. Das liegt zum einen daran, dass oft sehr viele Bilder verwendet werden, zum anderen daran, dass die Bilder nicht optimal abgespeichert worden sind. Es ist schon mal nicht schlecht, wenn man Bilder in Photoshop für Web speichert, aber das allein reicht nicht aus.

Es gibt eine Reihe von Tools, die Dateigrößen zusätzlich reduzieren. Dabei kann man zwischen Werkzeugen unterscheiden, die die Qualität mehr oder weniger sichtbar verringern (lossy) und Werkzeugen, die Dateigrößen optimieren, ohne die Qualität zu beeinflussen (lossless). Programme, die lossy komprimieren sind zum Beispiel MozJPEG, JPEGmini, TinyPNG, pngquant oder ImageAlpha.

Möchte man die Dateigröße reduzieren, macht es sicher Sinn eines der Tools zu verwenden. Wenn man aber keine Einbußen bei der Qualität machen möchte, sollte man zumindest ImageOptim verwenden. ImageOptim optimiert lossless, also ohne dass Pixelinformation verändert wird.

ImageOptim gibt es leider nur für OS X. Eine Alternative für Windows ist FileOptimizer. Eine Liste von weiteren Tools gibt es in einem Artikel von Addy Osmani.

Wie viel kann man bei verlustfreier Komprimierung sparen?

Ich habe testweise vier Bilder vorbereitet:

  • jpg, 722 KB, Foto von PixaBay
  • jpg, 662 KB, gleiches Foto aber mit Photoshop mit 65% Qualität für Web gespeichert
  • gif, 170 KB, Screenrecording mit LICEcap
  • png, 34 KB, Screenshot nativ mit OS X

Nach der Optimierung konnte ich ohne Qualitätsverlust insgesamt 133 KB sparen.

  • jpg, 668 KB (7,5% gespart)
  • jpg, 624 KB (5,8%)
  • gif, 145 KB (15%)
  • png, 18 KB (46,3%)

ImageOptim kann man auf verschiedenste Arten nutzen. Vier davon habe ich mir angesehen.

ImageOptim Desktopapp

Dateigröße von Bildern ohne Verluste reduzieren mit ImageOptim

ImageOptim gibt es als Desktopapp für OS X. Es ist nicht über den App Store verfügbar, sondern nur über die Website des Entwicklers.

Man öffnet die App, zieht Bilder hinein und wartet bis die Optimierung abgeschlossen ist. Wichtig: Die Originalbilder bleiben nicht erhalten.

ImageOptim Website

ImageOptim-CLI

ImageOptim-CLI

Das gleiche kann man auch über die Kommandozeile machen ohne eine App öffnen zu müssen. Dafür muss man ImageOptim-CLI via npm installieren.

npm install -g imageoptim-cli

Danach kann man die Dateien in einem Ordner mit folgendem Befehl optimieren (vorausgesetzt man hat die ImageOptim Desktopapp installiert).

imageoptim -d ~/Pfad/zu/meinem/Ordner

Ohne irgendwelche Optionen anzugeben, ist das Ergebnis ähnlich wie bei der Desktopapp Variante (134 KB). Hat man ImageAlpha und JPEGmini auch noch installiert, kann man diese mit ImageOptim-CLI ebenfalls ausführen.

Mit ImageAlpha

imageoptim -a -d ~/Pfad/zu/meinem/Ordner

Mit ImageAlpha und JPEGmini

imageoptim -a -j -d ~/Pfad/zu/meinem/Ordner 

ImageOptim-CLI auf GitHub

ImageOptim Workflow für Alfred

ImageOptim Alfred Workflow

Praktischerweise gibt es auch einen Alfred Workflow, der ImageOptimCLI ausführt.

Nach dem Download, sucht man nach Dateien oder Ordnern mit Alfred (find Ordnername), drückt dann Strg um die Actions aufzurufen und wählt Optimize Images.

ImageOptim Workflow for Alfred app auf GitHub

ImageOptim Gulp Plugin

Selbstverständlich gibt es auch ein Gulp Plugin für ImageOptim (für Grunt natürlich auch), das man in den eigenen Workflow sehr einfach integrieren kann.

Installation

npm install gulp-imageoptim --save-dev

Der Task

var gulp = require('gulp'),
    imageOptim = require('gulp-imageoptim');

gulp.task('imgopt', function() {
    return gulp.src('dev/images/**/*')
        .pipe(imageOptim.optimize())
        .pipe(gulp.dest('dist/images'));
});

Ein fertiges und funktionierendes Beispiel habe ich auf GitHub geladen.

Resümee

Unsere Websites sind zu fett, deswegen müssen wir alle Möglichkeiten nutzen, um Performance zu optimieren. Auch wenn man „nur ein paar KB“ gutmacht, ist es wichtig die Dateigröße von Bildern so stark es geht zu reduzieren. Dafür gibt es eine Reihe von Werkzeugen, die mit oder ohne Qualitätsverlust arbeiten. Das beste Ergebnis erzielt man, wenn man beides macht. Dabei ist nur die Reihenfolge wichtig: Zuerst lossy komprimieren und dann erst lossless.

Manuel Matuzovic

Frontend Developer aus Wien.

4 Kommentare zu “Dateigröße von Bildern ohne Verluste reduzieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *