Imagemin mit Grunt verwenden

Katja Hempenius
Katie Hempenius
X

Imagemin Grunt-Plug-in einrichten

Dieser Glitch enthält bereits grunt, grunt-cli und das grunt-contrib-imagemin-Plug-in. Um die Konfiguration für Imagemin hinzuzufügen, müssen Sie die Datei gruntfile.js bearbeiten.

  • Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  • Ersetzen Sie in gruntfile.js den Kommentar //Add configuration here durch diesen Codeblock:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

Dieser Codeblock teilt Grunt mit, welche Dateien mit Imagemin komprimiert werden sollen.

  • dynamic gibt an, dass die Liste der zu komprimierenden Dateien dynamisch generiert wird, indem die Dateinamen mit dem angegebenen Dateimuster abgeglichen werden.

  • Das Dateimuster {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} stimmt mit allen JPEG- und PNG-Bildern im Verzeichnis images/ überein.

  • Laden Sie die Imagemin-Aufgabe, indem Sie diese Zeile direkt vor grunt.registerTask(...) einfügen:
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • Fügen Sie abschließend Imagemin als Standard-Grint-Aufgabe hinzu. Ersetzen Sie dazu den Kommentar /* list plugins here */ durch 'imagemin'. Diese Zeile sollte jetzt wie folgt aussehen:
grunt.registerTask('default', ['imagemin']);

✔⁂ Einchecken

Die vollständige gruntfile.js-Datei sollte jetzt so aussehen:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Imagemin-Konfiguration anpassen

imagemin-pngquant ist ein Plug-in zum Festlegen von Komprimierungsqualitätsstufen. Wir haben diesem Projekt bereits imagemin-pngquant in der Datei package.json hinzugefügt, damit du sie zum Komprimieren deiner PNGs verwenden kannst. Um es zu verwenden, musst du das Plug-in deklarieren und eine Komprimierungsqualitätsstufe in deiner Gruntfile angeben.

  • Deklarieren Sie das Plug-in imagemin-pngquant, indem Sie diese Zeile oben in gruntfile.js einfügen:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Du kannst Einstellungen für die Komprimierung von PNG-Bildern festlegen, indem du dem Objekt imagemin ein options-Attribut hinzufügst. Das options-Attribut sollte so aussehen:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

Dieser Code weist Imagemin an, PNGs mit dem Pngquant-Plug-in zu komprimieren. Im Feld quality wird der Wertebereich min und max verwendet, um das Komprimierungsniveau zu bestimmen. 0 ist die niedrigste und 1 die höchste Stufe. Wenn Sie erzwingen möchten, dass alle Bilder bei 50% komprimiert werden, geben Sie 0.5 als Mindest- und Höchstwert an.

✔⁂ Einchecken

Ihre gruntfile.js-Datei sollte jetzt so aussehen:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Aber was ist mit JPEGs? Das Projekt verfügt auch über JPEG-Bilder, daher sollten Sie auch angeben, wie diese komprimiert werden.

Imagemin-Konfiguration anpassen (Fortsetzung)

Verwenden Sie das bereits installierte imagemin-mozjpeg-Plug-in, um JPEG-Bilder zu komprimieren.

  • Deklarieren Sie das Plug-in imagemin-mozjpeg, indem Sie diese Zeile an den Anfang Ihres gruntfile.js setzen.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • Als Nächstes fügen Sie dem Array im options-Objekt mozjpeg({quality: 50}) hinzu. Das Array sollte jetzt so aussehen:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔⁂ Einchecken

Ihre gruntfile.js-Datei sollte jetzt so aussehen:

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Grunt ausführen und Ergebnisse mit Lighthouse überprüfen

  1. Klicken Sie auf die Schaltfläche Tools.
  2. Klicken Sie dann auf die Schaltfläche Console.
  3. Führen Sie Grunt aus, indem Sie den folgenden Befehl in die Konsole eingeben:
grunt

Wenn Grunt abgeschlossen ist, sollte in der Konsole eine Meldung wie die folgende angezeigt werden:

Minified 6 images (saved 667 kB - 66.5%)

Juhu! Diese Ergebnisse sind viel besser.

Außerdem ist es eine gute Idee, die gerade vorgenommenen Änderungen mit Lighthouse zu überprüfen. Mit der Leistungsprüfung „Bilder effizient codieren“ von Lighthouse erfahren Sie, ob die JPEG-Bilder auf Ihrer Seite optimal komprimiert sind.

  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.
  • Führen Sie die Lighthouse-Leistungsprüfung (Lighthouse > Optionen > Leistung) für die Live-Version von Glitch aus und prüfen Sie, ob die Prüfung „Bilder effizient codieren“ bestanden wurde.

Prüfung zum effizienten Codieren von Images in Lighthouse bestehen

Fertig! Sie haben Imagemin verwendet, um die Bilder auf Ihrer Seite optimal zu komprimieren.