Utilizzo di Imagemin con Gulp

Katie Hempenius
Katie Hempenius
X

Configurazione del plug-in Gulp Imagemin

Questo Glitch contiene già gulp, gulp-cli e il plug-in gulp-imagemin. Per aggiungere la configurazione per Imagemin, devi modificare il file gulpfile.js.

  • Fai clic su Remix per modificare per rendere il progetto modificabile.
  • Innanzitutto, inizializza il plug-in gulp-imagemin aggiungendo questo codice all'inizio di gulpfile.js:
const imagemin = require('gulp-imagemin');
  • Dopodiché sostituisci il commento //Add tasks here in gulpfile.js con questo blocco di codice:
gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

Questo codice aggiunge un'attività Gulp che utilizza Imagemin per comprimere le immagini nella directory images/. Le immagini originali vengono sovrascritte e salvate nella stessa directory images/.

✔︎ Check-in

Il file gulpfile.js ora dovrebbe avere il seguente aspetto:

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

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

Ora hai un gulpfile.js che può essere utilizzato per comprimere le immagini.

Gulp per la corsa

  1. Fai clic sul pulsante Strumenti.
  2. Quindi, fai clic sul pulsante Console.
  3. Esegui Gulp per comprimere le immagini digitando il seguente comando nella console:
gulp

Al termine del processo Gulp, nel terminale dovrebbe essere visualizzato un messaggio simile al seguente:

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

Un miglioramento del 15% delle dimensioni del file è un buon inizio; tuttavia, è possibile apportare ulteriori miglioramenti utilizzando impostazioni di compressione diverse.

Personalizza la configurazione di Imagemin

imagemin-pngquant è un plug-in per specificare i livelli di qualità della compressione. Abbiamo già aggiunto imagemin-pngquant a questo progetto nel file package.json per consentirti di utilizzarlo per comprimere i file PNG. Per utilizzarlo, dichiara il plug-in e specifica un livello di qualità di compressione nel gulpfile.

  • Dichiara il plug-in imagemin-pngquant aggiungendo questa riga nella parte superiore di gulpfile.js:
const pngquant = require('imagemin-pngquant');
  • Aggiungi il plug-in imagemin-pngquant (e le relative impostazioni) passando il seguente array a ImageminPlugin():
[pngquant({quality: [0.5, 0.5]})]

Questo codice indica a Imagemin di comprimere i PNG utilizzando il plug-in Pngquant. Il campo quality utilizza un intervallo di valori min e max per determinare il livello di compressione: 0 è il più basso e 1 il più alto. Per forzare la compressione di tutte le immagini con una qualità al 50%, trasmetti 0.5 come valore minimo e massimo.

✔︎ Check-in

Il file gulpfile.js ora dovrebbe avere il seguente aspetto:

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/'))
});

E per quanto riguarda i file JPG? Il progetto contiene anche immagini JPG, che devono essere compresse.

Personalizzare la configurazione di Imagemin (continua)

Utilizza il plug-in imagemin-mozjpeg, che è già stato installato, per comprimere le immagini JPG.

  • Dichiara il plug-in imagemin-mozjpeg inserendo questa riga nella parte superiore del tuo gulpfile.js.
const mozjpeg = require('imagemin-mozjpeg');
  • Quindi, aggiungi mozjpeg({quality: 50}) all'array passato a ImageminPlugin():
[
  pngquant({quality: [0.5, 0.5]}),
  mozjpeg({quality: 50})
]

✔︎ Check-in

Il file gulpfile.js ora dovrebbe avere il seguente aspetto:

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/'))
});

Esegui di nuovo Gulp e verifica i risultati con Lighthouse

  • Esegui di nuovo Gulp:
gulp

Al termine del processo Gulp, nel terminale dovrebbe essere visualizzato un messaggio simile al seguente:

gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)

Ottimo. Questi risultati sono molto migliori.

Infine, è consigliabile utilizzare Lighthouse per verificare le modifiche apportate.

Il controllo delle prestazioni "Codifica in modo efficiente delle immagini" di Lighthouse può indicare se le immagini JPEG sulla pagina sono compresse in modo ottimale.

  • Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero schermo intero.
  • Esegui il controllo delle prestazioni di Lighthouse (Lighthouse > Opzioni > Prestazioni) sulla versione dal vivo di Glitch e verifica che il controllo "Codifica in modo efficiente delle immagini" sia stato superato.

Superare il controllo "Codifica le immagini in modo efficiente" in Lighthouse

Success! Hai utilizzato Imagemin per comprimere in modo ottimale le immagini sulla pagina.