Imagemin mit Gulp verwenden

Katie Hempenius

Imagemin Gulp-Plug-in einrichten

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

• Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
• Initialisieren Sie zuerst das Plug-in gulp-imagemin. Fügen Sie dazu den folgenden Code am Anfang von gulpfile.js ein:

const imagemin = require('gulp-imagemin');

• Ersetzen Sie als Nächstes den Kommentar //Add tasks here in gulpfile.js durch diesen Codeblock:

gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

Mit diesem Code wird eine Gulp-Aufgabe hinzugefügt, die die Bilder im Verzeichnis images/ mithilfe von Imagemin komprimiert. Die ursprünglichen Images werden überschrieben und im selben images/-Verzeichnis gespeichert.

✔⁂ Einchecken

Ihre gulpfile.js-Datei sollte jetzt so aussehen:

const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('images/'))
});

Sie haben jetzt eine gulpfile.js, mit der Bilder komprimiert werden können.

Lauf-Galp

1. Klicken Sie auf die Schaltfläche Tools.
2. Klicken Sie dann auf die Schaltfläche Console.
3. Führen Sie Gulp aus, um Ihre Images zu komprimieren. Geben Sie dazu den folgenden Befehl in die Konsole ein:

gulp

Wenn Gulp abgeschlossen ist, sollte im Terminal eine Meldung wie die folgende angezeigt werden:

gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)

Eine Verbesserung der Dateigröße um 15% ist ein guter Anfang. Mit anderen Komprimierungseinstellungen sind jedoch weitere Verbesserungen möglich.

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. Deklarieren Sie das Plug-in und geben Sie in der Gulpfile-Datei eine Komprimierungsqualität an, um das Plug-in zu verwenden.

• Deklarieren Sie das Plug-in imagemin-pngquant, indem Sie diese Zeile oben in gulpfile.js einfügen:

const pngquant = require('imagemin-pngquant');

• Fügen Sie das imagemin-pngquant-Plug-in und seine Einstellungen hinzu. Übergeben Sie dazu das folgende Array an ImageminPlugin():

[pngquant({quality: [0.5, 0.5]})]

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 gulpfile.js-Datei sollte jetzt so aussehen:

const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]})
    ]))
    .pipe(gulp.dest('images/'))
});

Aber was ist mit JPG-Dateien? Das Projekt hat auch JPG-Bilder, die ebenfalls komprimiert werden müssen.

Imagemin-Konfiguration anpassen (Fortsetzung)

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

• Deklarieren Sie das Plug-in imagemin-mozjpeg, indem Sie diese Zeile an den Anfang Ihrer gulpfile.js setzen.

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

• Als Nächstes fügen Sie mozjpeg({quality: 50}) dem Array hinzu, das an ImageminPlugin() übergeben wird:

[
  pngquant({quality: [0.5, 0.5]}),
  mozjpeg({quality: 50})
]

✔⁂ Einchecken

Ihre gulpfile.js-Datei sollte jetzt so aussehen:

const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]}),
      mozjpeg({quality: 50})
    ]))
    .pipe(gulp.dest('images/'))
});

Gulp noch einmal ausführen und Ergebnisse mit Lighthouse überprüfen

• Gulp noch einmal ausführen:

gulp

Wenn Gulp abgeschlossen ist, sollte im Terminal eine Meldung wie die folgende angezeigt werden:

gulp-imagemin: 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 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.

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