Utiliser Imagemin pour compresser les images

Katie Hempenius

Quel est l'intérêt pour vous ?

Les images non compressées encombrent vos pages d'octets inutiles. Étant donné que les images peuvent s'inscrire au LCP (Largest Contentful Paint), ces octets inutiles peuvent ajouter un temps de chargement des ressources superflu, et donc des temps LCP plus longs.

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

Mesurer

Exécutez Lighthouse pour rechercher des possibilités d'amélioration du chargement des pages en compressant les images. Ces opportunités sont listées sous "Encoder efficacement les images":

Imagemin

Imagemin est un excellent choix pour la compression d'images, car il accepte une grande variété de formats d'image et s'intègre facilement aux scripts et aux outils de compilation. Imagemin est disponible en tant que CLI et 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 bonne alternative si vous souhaitez essayer Imagemin sans toucher au 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 les JPEG). Les formats d'image populaires peuvent proposer plusieurs plug-ins.

Lors du choix d'un plug-in, la chose la plus importante à prendre en compte est de savoir 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 n'indique pas s'il est "avec perte" ou "sans perte", son API vous le permet: si vous pouvez spécifier la qualité d'image de la sortie, elle est "avec perte".

Pour la plupart des utilisateurs, les plug-ins avec pertes constituent le meilleur choix. Ils permettent de réduire considérablement la taille des fichiers et vous pouvez personnaliser les niveaux de compression en fonction de vos besoins. Le tableau ci-dessous liste les plug-ins Imagemin les plus courants. Ce ne sont pas les seuls plug-ins disponibles, mais ils constituent tous de bons choix pour votre projet.

CLI Imagemin

La CLI Imagemin fonctionne avec cinq plug-ins 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 (qui écrase les fichiers d'origine):

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

Module npm Imagemin

Si vous utilisez l'un de ces outils de compilation, suivez les ateliers de programmation d'Imagemin avec webpack, gulp ou grunt.

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

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