Utiliser Imagemin pour compresser les images

Katie Hempenius

En quoi cela vous concerne-t-il ?

Les images non compressées surchargent vos pages d'octets inutiles. Étant donné que les images peuvent être candidates pour le LCP (Largest Contentful Paint), ces octets inutiles peuvent augmenter la durée de chargement des ressources de l'image, ce qui peut entraîner des temps LCP plus longs.

La photo de droite est 40 % plus petite que celle de gauche, mais elle semble probablement identique à l'utilisateur moyen.

Mesurer

Exécutez Lighthouse pour identifier les possibilités d'améliorer le chargement des pages en compressant les images. Ces opportunités sont listées sous "Encoder les images de manière efficace" :

Imagemin

Imagemin est un excellent choix pour la compression d'images, car il est compatible avec un large éventail de formats d'images et s'intègre facilement aux scripts de compilation et aux outils de compilation. Imagemin est disponible en tant que CLI et en tant que module npm. En règle générale, le module npm est le meilleur choix, car il offre plus d'options de configuration, mais la CLI peut être une alternative appropriée si vous souhaitez essayer Imagemin sans modifier le code.

Plug-ins

Imagemin repose sur des "plug-ins". Un plug-in est un package npm qui compresse un format d'image particulier (par exemple, "mozjpeg" compresse des JPEG). Il existe plusieurs plug-ins pour les formats d'image populaires.

Le point le plus important à prendre en compte lors du choix d'un plug-in est s'il est "avec perte" ou "sans perte". Avec la compression sans perte, aucune donnée n'est perdue. La compression avec perte réduit la taille des fichiers, mais au détriment de la qualité de l'image. Si un plug-in ne précise pas s'il est "avec perte" ou "sans perte", vous pouvez le savoir grâce à son API : si vous pouvez spécifier la qualité de l'image de la sortie, il s'agit d'un plug-in "avec perte".

Pour la plupart des utilisateurs, les plug-ins avec perte sont la meilleure option. Ils offrent des économies de taille de fichier nettement plus importantes, et vous pouvez personnaliser les niveaux de compression en fonction de vos besoins. Le tableau ci-dessous liste les plug-ins Imagemin populaires. Il ne s'agit pas des seuls plug-ins disponibles, mais ils constituent tous de bons choix pour votre projet.

CLI Imagemin

La CLI Imagemin fonctionne avec cinq plugins différents : imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant et imagemin-svgo. Imagemin utilise le plug-in approprié en fonction du format d'image de l'entrée.

Pour compresser les images du répertoire "images/" et les enregistrer dans le même répertoire, exécutez la commande suivante (elle écrase les fichiers d'origine) :

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

Module npm Imagemin

Si vous souhaitez utiliser Imagemin avec un bundler, vérifiez si un plug-in est disponible pour le bundler de votre choix. Par exemple, webpack est un bundler populaire compatible avec Imagemin. Pour en savoir plus sur l'utilisation d'Imagemin avec webpack, consultez cet atelier de programmation.

Vous pouvez également utiliser Imagemin seul en tant que script Node. Ce code utilise le plug-in "imagemin-mozjpeg" pour compresser les fichiers JPEG avec une qualité de 50 ('0' étant la pire et '100' la meilleure) :

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