Perché dovrebbe interessarti?
Le immagini non compresse appesantiscono le pagine con byte non necessari. Poiché le immagini possono essere candidate per Largest Contentful Paint (LCP), questi byte non necessari possono aumentare la durata del caricamento delle risorse dell'immagine, con conseguenti tempi LCP più lunghi.
La foto a destra è il 40% più piccola di quella a sinistra, ma probabilmente apparirebbe identica all'utente medio.
|
|
|
|---|
Misura
Esegui Lighthouse per verificare se ci sono opportunità per migliorare il caricamento della pagina comprimendo le immagini. Queste opportunità sono elencate in "Codifica efficiente delle immagini":
Imagemin
Imagemin è una scelta eccellente per la compressione delle immagini perché supporta un'ampia varietà di formati di immagine e si integra facilmente con gli script e gli strumenti di build. Imagemin è disponibile sia come CLI sia come modulo npm. In genere, il modulo npm è la scelta migliore perché offre più opzioni di configurazione, ma la CLI può essere un'alternativa valida se vuoi provare Imagemin senza toccare il codice.
Plug-in
Imagemin è basato su "plug-in". Un plug-in è un pacchetto npm che comprime un particolare formato di immagine (ad es. "mozjpeg" comprime i JPEG). I formati di immagine più diffusi potrebbero avere più plug-in tra cui scegliere.
La cosa più importante da considerare quando scegli un plug-in è se è "lossy" o "lossless". Nella compressione lossless, nessun dato viene perso. La compressione lossy riduce le dimensioni del file, ma a scapito della possibile riduzione della qualità dell'immagine. Se un plug-in non indica se è "lossy" o "lossless", puoi capirlo dalla sua API: se puoi specificare la qualità dell'immagine dell'output, allora è "lossy".
Per la maggior parte delle persone, i plug-in lossy sono la scelta migliore. Offrono un risparmio di dimensioni dei file significativamente maggiore 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 sarebbero tutti ottimi per il tuo progetto.
| Formato immagine | Plug-in lossy | Plug-in lossless |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
CLI Imagemin
La CLI Imagemin funziona con 5 plug-in diversi: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant e imagemin-svgo. Imagemin utilizza il plug-in appropriato in base al formato dell'immagine di input.
Per comprimere le immagini nella directory "images/" e salvarle nella stessa directory, esegui il seguente comando (sovrascrive i file originali):
$ imagemin images/* --out-dir=images
Modulo npm Imagemin
Se vuoi utilizzare Imagemin con un bundler, verifica se il bundler scelto ha un plug-in disponibile. Ad esempio, webpack è un bundler diffuso che supporta molto bene Imagemin. Puoi scoprire di più su come utilizzare Imagemin con webpack in questo codelab.
Puoi anche utilizzare Imagemin da solo come script Node. Questo codice utilizza il plug-in "imagemin-mozjpeg" per comprimere i file JPEG a una qualità di 50 ("0" è la peggiore, "100" è la migliore):
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);
})();