Utilizzare Imagemin per comprimere le immagini

Katie Hempenius

Perché dovrebbe interessarti?

Le immagini non compresse gonfiano le pagine di byte inutili. Poiché le immagini possono essere candidate per Largest Contentful Paint (LCP), questi byte non necessari possono aumentare il tempo di caricamento delle risorse non necessario, con un conseguente allungamento dei tempi di LCP.

La foto a destra è più piccola del 40% rispetto a quella a sinistra, ma probabilmente sarebbe identica all'utente medio.

Misura

Esegui Lighthouse per verificare la presenza di opportunità per migliorare il caricamento della pagina comprimendo le immagini. Queste opportunità sono elencate nella sezione "Codifica in modo efficace le immagini":

Imagemin

Imagemin è un'ottima scelta per la compressione delle immagini perché supporta un'ampia varietà di formati delle immagini ed è facilmente integrata con script e strumenti di creazione. Imagemin è disponibile sia come CLI sia come modulo npm. In genere, il modulo npm è la scelta migliore perché offre più opzioni di configurazione, ma l'interfaccia a riga di comando può essere una buona alternativa se vuoi provare Imagemin senza toccare alcun codice.

Plug-in

Imagemin si basa sui "plug-in". Un plug-in è un pacchetto npm che comprime un determinato formato dell'immagine (ad es. "mozjpeg" comprime i file JPEG, Per i formati delle immagini più diffusi è possibile scegliere tra più plug-in.

L'aspetto più importante da considerare nella scelta di un plug-in è se è "con perdita di dati" o "senza perdita di dati". Nella compressione senza perdita di dati, i dati non vanno persi. La compressione con perdita di dati riduce le dimensioni dei file, ma a scapito della possibile riduzione della qualità delle immagini. Se un plug-in non indica se è "con perdita di dati " o"senza perdita di dati ", puoi dirlo dall'API: se puoi specificare la qualità dell'immagine dell'output, significa che è con perdita di dati.

Per la maggior parte delle persone, i plug-in con perdita di dati sono la scelta migliore. Offrono maggiori risparmi nelle dimensioni dei file e puoi personalizzare i livelli di compressione in base alle tue esigenze. La tabella seguente elenca i plug-in Imagemin più diffusi. Questi non sono gli unici plug-in disponibili, ma sono tutti ottimi esempi per il tuo progetto.

interfaccia a riga di comando di Imagemin

L'interfaccia a riga di comando di Imagemin funziona con cinque diversi plug-in: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant e imagemin-svgo. Imagemin utilizza il plug-in appropriato in base al formato dell'immagine dell'input.

Per comprimere le immagini nella directory "images/" e salvarle nella stessa directory, esegui questo comando (sovrascrive i file originali):

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

Modulo npm di Imagemin

Se usi uno di questi strumenti di creazione, controlla i codelab per Imagemin con webpack, gulp o grunt.

Puoi anche utilizzare Imagemin da solo come script dei nodi. Questo codice utilizza il plug-in "imagemin-mozjpeg" per comprimere i file JPEG in una qualità 50 ("0" è il valore peggiore e "100" è il valore massimo):

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