Bilder mit Imagemin komprimieren

Katie Hempenius

Warum ist das wichtig?

Bei unkomprimierten Bildern werden Ihre Seiten mit unnötigen Bytes überladen. Da Bilder Kandidaten für Largest Contentful Paint (LCP) sein können, können diese unnötigen Byte zu einer unnötigen Ladezeit von Ressourcen führen, was zu längeren LCP-Zeiten führen kann.

Das Foto auf der rechten Seite ist 40% kleiner als das linke, würde aber für einen durchschnittlichen Nutzer wahrscheinlich identisch aussehen.

Messen

Führen Sie Lighthouse aus, um nach Möglichkeiten zu suchen, die Seitenladezeit durch Komprimieren von Bildern zu verbessern. Diese Empfehlungen sind unter „Bilder effizient codieren“ aufgeführt:

Min. Image

Imagemin ist eine hervorragende Wahl für die Bildkomprimierung, da es eine Vielzahl von Bildformaten unterstützt und sich leicht in Build-Scripts und Build-Tools einbinden lässt. Imagemin ist sowohl als CLI als auch als npm-Modul verfügbar. Im Allgemeinen ist das npm-Modul die beste Wahl, da es mehr Konfigurationsoptionen bietet. Die Befehlszeile kann jedoch eine gute Alternative sein, wenn Sie Imagemin ausprobieren möchten, ohne Code zu ändern.

Plug‑ins

Imagemin basiert auf „Plug-ins“. Ein Plug-in ist ein npm-Paket, das ein bestimmtes Bildformat komprimiert (z.B. „mozjpeg“ für JPEGs). Gängige Bildformate bieten möglicherweise mehrere Plug-ins zur Auswahl.

Der wichtigste Punkt bei der Auswahl eines Plug-ins ist, ob es „verlustbehaftet“ oder „verlustfrei“ ist. Bei der verlustfreien Komprimierung gehen keine Daten verloren. Die verlustbehaftete Komprimierung verringert die Dateigröße, allerdings auf Kosten einer Reduzierung der Bildqualität. Wenn in einem Plug-in nicht angegeben ist, ob es „verlustbehaftet“ oder „verlustfrei“ ist, können Sie dies an der API erkennen: Wenn Sie die Bildqualität der Ausgabe angeben können, gilt sie als „verlustbehaftet“.

Für die meisten Nutzer sind verlustbehaftete Plug-ins die beste Wahl. Damit lässt sich die Dateigröße erheblich sparen und Sie können die Komprimierungsstufen an Ihre Anforderungen anpassen. In der folgenden Tabelle sind gängige Imagemin-Plug-ins aufgeführt. Dies sind nicht die einzigen verfügbaren Plug-ins, aber sie sind alle eine gute Wahl für Ihr Projekt.

Imagemin-Befehlszeile

Die Imagemin-Befehlszeile funktioniert mit fünf verschiedenen Plug-ins: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant und imagemin-svgo. Imagemin verwendet je nach Bildformat der Eingabe das geeignete Plug-in.

Führen Sie den folgenden Befehl aus, um die Images im Verzeichnis „images/“ zu komprimieren und im selben Verzeichnis zu speichern (überschreibt die Originaldateien):

$ imagemin images/* --out-dir=images

Imagemin-npm-Modul

Wenn Sie eines dieser Build-Tools verwenden, können Sie die Codelabs für Imagemin mit webpack, gulp oder grunt bezahlen.

Sie können Imagemin auch alleine als Knotenskript verwenden. Dieser Code verwendet das Plug-in „imagemin-mozjpeg“, um JPEG-Dateien auf eine Qualität von 50 zu komprimieren, wobei „0“ die schlechteste, „100“ die beste Qualität ist:

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();