Utilizzare Imagemin per comprimere le immagini

Katie Hempenius

Perché dovrebbe interessarti?

Le immagini non compresse gonfiano le pagine con byte non necessari. Poiché le immagini possono essere candidate per la Largest Contentful Paint (LCP), questi byte non necessari possono aumentare la durata del carico delle risorse dell'immagine, causando potenzialmente tempi LCP più lunghi.

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

Misura

Esegui Lighthouse per verificare la presenza di opportunità di miglioramento del caricamento della pagina comprimendo le immagini. Queste opportunità sono elencate in "Codifica efficiente delle immagini":

Immagine min

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

Plug-in

Imagemin è basato sui "plug-in". Un plug-in è un pacchetto npm che comprime un particolare formato dell'immagine (ad es. "mozjpeg" comprime i file JPEG). Formati delle immagini più diffusi potrebbero essere disponibili diversi plug-in.

Il fattore più importante da considerare nella scelta di un plug-in è se "perdita" o "lossless". Con la compressione senza perdita di dati, i dati non vengono persi. Con perdita la compressione riduce le dimensioni del file, ma a scapito però della possibile qualità. Se un plug-in non indica se è "con perdita di dati", o "lossless", tu può capire dalla sua API: se puoi specificare la qualità dell'immagine dell'output, è "con perdita di dati".

Per la maggior parte delle persone, i plug-in con perdita di dati sono la scelta migliore. Offrono molti maggiore riduzione delle dimensioni dei file ed è possibile personalizzare i livelli di compressione per soddisfare le tue esigenze. Nella tabella seguente sono elencati i plug-in Imagemin più diffusi. Questi non sono gli unici plug-in disponibili, ma sono tutte buone scelte per il tuo progetto.

Interfaccia a riga di comando Imagemin

L'interfaccia a riga di comando 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 del di testo.

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

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

Modulo npm Imagemin

Se usi uno di questi strumenti di creazione, dai un'occhiata ai codelab per Imagemin con webpack, gulp, o grugnito.

Puoi anche utilizzare Imagemin da solo come script Node. Questo codice utilizza il formato "imagemin-mozjpeg" plug-in per comprimere i file JPEG in una qualità di 50 (dove "0" indica il valore peggiore; "100" indica 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);
})();