Utiliser Imagemin avec Grunt

Katie Hempenius
Katie Hempenius
X

Configurer le plug-in Imagemin Grunt

Ce Glitch contient déjà grunt, grunt-cli et le plug-in grunt-contrib-imagemin. Pour ajouter la configuration d'Imagemin, vous devez modifier votre fichier gruntfile.js.

  • Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
  • Dans gruntfile.js, remplacez le commentaire //Add configuration here par ce bloc de code:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

Ce bloc de code indique à Grunt quels fichiers doivent être compressés avec Imagemin.

  • dynamic indique que la liste des fichiers à compresser sera générée de manière dynamique en faisant correspondre les noms de fichiers au format de fichier spécifié.

  • Le format de fichier {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} correspond à toutes les images JPEG et PNG du répertoire images/.

  • Chargez la tâche Imagemin en ajoutant cette ligne juste avant grunt.registerTask(...):
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • Enfin, ajoutez Imagemin comme tâche Grunt par défaut en remplaçant le commentaire /* list plugins here */ par 'imagemin'. Cette ligne devrait maintenant se présenter comme suit:
grunt.registerTask('default', ['imagemin']);

✔✔ Enregistrement

Le fichier gruntfile.js complet devrait maintenant se présenter comme suit:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Personnaliser votre configuration Imagemin

imagemin-pngquant est un plug-in permettant de spécifier les niveaux de qualité de compression. Nous avons déjà ajouté imagemin-pngquant à ce projet dans le fichier package.json afin que vous puissiez l'utiliser pour compresser vos fichiers PNG. Pour l'utiliser, déclarez le plug-in et spécifiez un niveau de qualité de compression dans votre fichier Gruntfile.

  • Déclarez le plug-in imagemin-pngquant en ajoutant cette ligne en haut de votre gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Ajoutez des paramètres pour compresser les images PNG en ajoutant une propriété options à l'objet imagemin. Cette propriété options devrait se présenter comme suit:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

Ce code indique à Imagemin de compresser les fichiers PNG à l'aide du plug-in Pngquant. Le champ quality utilise une plage de valeurs min et max pour déterminer le niveau de compression : 0 est le niveau le plus bas et 1 le plus élevé. Pour forcer la compression de toutes les images à 50% de qualité, transmettez 0.5 en tant que valeur minimale et maximale.

✔✔ Enregistrement

Votre fichier gruntfile.js devrait maintenant se présenter comme suit :

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Mais qu'en est-il des JPEG ? Le projet contient également des images JPEG. Vous devez donc également spécifier leur mode de compression.

Personnaliser votre configuration Imagemin (suite)

Utilisez le plug-in imagemin-mozjpeg, qui a déjà été installé, pour compresser les images JPEG.

  • Déclarez le plug-in imagemin-mozjpeg en plaçant cette ligne en haut de votre gruntfile.js.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • Ajoutez ensuite mozjpeg({quality: 50}) au tableau dans l'objet options. Ce tableau devrait maintenant se présenter comme suit:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔✔ Enregistrement

Votre fichier gruntfile.js devrait maintenant se présenter comme suit :

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Faites grogner et vérifiez les résultats avec Lighthouse

  1. Cliquez sur le bouton Outils.
  2. Cliquez ensuite sur le bouton Console.
  3. Exécutez Grunt en saisissant la commande suivante dans la console:
grunt

Lorsque Grunt a terminé, un message semblable à celui-ci doit s'afficher dans la console:

Minified 6 images (saved 667 kB - 66.5%)

Parfait ! Ces résultats sont bien meilleurs.

Enfin, nous vous recommandons d'utiliser Lighthouse pour vérifier les modifications que vous venez d'apporter. L'audit de performances "Encoder efficacement les images" de Lighthouse vous permet de savoir si les images JPEG de votre page sont compressées de manière optimale.

  • Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.
  • Exécutez l'audit de performances Lighthouse (Lighthouse > Options > Performance) sur la version en ligne de votre Glitch et vérifiez que l'audit "Encoder efficacement les images" a été réussi.

Réussir l'audit "Encoder efficacement les images" dans Lighthouse

Opération réussie. Vous avez utilisé Imagemin pour compresser de manière optimale les images de votre page.