Bilder mit Imagemin komprimieren

Katie Hempenius

Was hat das mit mir zu tun?

Unkomprimierte Bilder blähen Ihre Seiten mit unnötigen Bytes auf. Da Bilder Kandidaten für Largest Contentful Paint (LCP) sein können, können diese unnötigen Bytes die Ladezeit der Bildressource verlängern, was möglicherweise zu längeren LCP-Zeiten führt.

Das Foto rechts ist 40% kleiner als das links, sieht für den durchschnittlichen Nutzer aber wahrscheinlich identisch aus.

Messen

Führen Sie Lighthouse aus, um nach Möglichkeiten zur Verbesserung des Seitenaufbaus durch Komprimieren von Bildern zu suchen. Diese Möglichkeiten sind unter „Bilder effizient codieren“ aufgeführt:

Imagemin

Imagemin ist eine ausgezeichnete Wahl für die Bildkomprimierung, da es eine Vielzahl von Bildformaten unterstützt und sich problemlos in Build-Skripts und Build-Tools integrieren 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 CLI 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. komprimiert „mozjpeg“ JPEGs). Für beliebte Bildformate stehen möglicherweise mehrere Plug-ins zur Auswahl.

Das Wichtigste bei der Auswahl eines Plug-ins ist, ob es „verlustbehaftet“ oder „verlustfrei“ ist. Bei der verlustfreien Komprimierung gehen keine Daten verloren. Bei der verlustbehafteten Komprimierung wird die Dateigröße reduziert, aber möglicherweise auch die Bildqualität. Wenn in der Beschreibung eines Plug-ins nicht angegeben ist, ob es „verlustbehaftet“ oder „verlustfrei“ ist, können Sie das anhand der API erkennen: Wenn Sie die Bildqualität der Ausgabe angeben können, ist es „verlustbehaftet“.

Für die meisten Nutzer sind verlustbehaftete Plug-ins die beste Wahl. Sie bieten deutlich größere Einsparungen bei der Dateigröße und Sie können die Komprimierungsstufen an Ihre Bedürfnisse anpassen. In der folgenden Tabelle sind beliebte Imagemin-Plug-ins aufgeführt. Das sind nicht die einzigen verfügbaren Plug-ins, aber sie wären alle eine gute Wahl für Ihr Projekt.

Imagemin CLI

Die Imagemin CLI funktioniert mit 5 verschiedenen Plug-ins: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant und imagemin-svgo. Imagemin verwendet das entsprechende Plug-in basierend auf dem Bildformat der Eingabe.

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

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

Imagemin npm-Modul

Wenn Sie Imagemin mit einem Bundler verwenden möchten, prüfen Sie, ob für den ausgewählten Bundler ein Plug-in verfügbar ist. Webpack ist beispielsweise ein beliebter Bundler, der Imagemin gut unterstützt. Weitere Informationen zur Verwendung von Imagemin mit Webpack finden Sie in diesem Codelab.

Sie können Imagemin auch allein als Node-Skript verwenden. Dieser Code verwendet das Plug-in „imagemin-mozjpeg“, um JPEG-Dateien mit einer Qualität von 50 zu komprimieren („0“ ist die schlechteste und „100“ die beste Qualität):

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);
})();