Utiliser Imagemin avec Gulp

Katie Hempenius
Katie Hempenius
X

Configurer le plug-in Imagemin Gulp

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

  • Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
  • Tout d'abord, initialisez le plug-in gulp-imagemin en ajoutant le code suivant en haut de gulpfile.js:
const imagemin = require('gulp-imagemin');
  • Ensuite, remplacez le commentaire //Add tasks here dans gulpfile.js par ce bloc de code:
gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

Ce code ajoute une tâche Gulp qui utilise Imagemin pour compresser les images dans le répertoire images/. Les images d'origine sont écrasées et enregistrées dans le même répertoire images/.

✔✔ Enregistrement

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

const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('images/'))
});

Vous disposez désormais d'un gulpfile.js qui peut être utilisé pour compresser des images.

Exécuter Gulp

  1. Cliquez sur le bouton Outils.
  2. Cliquez ensuite sur le bouton Console.
  3. Exécutez Gulp pour compresser vos images en saisissant la commande suivante dans la console:
gulp

Une fois Gulp terminé, un message semblable à celui-ci doit s'afficher dans le terminal:

gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)

Une amélioration de 15% de la taille des fichiers est un bon début. Toutefois, d'autres améliorations peuvent être apportées en utilisant différents paramètres de compression.

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 gulpfile.

  • Déclarez le plug-in imagemin-pngquant en ajoutant cette ligne en haut de votre gulpfile.js:
const pngquant = require('imagemin-pngquant');
  • Ajoutez le plug-in imagemin-pngquant (et ses paramètres) en transmettant le tableau suivant à ImageminPlugin():
[pngquant({quality: [0.5, 0.5]})]

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 gulpfile.js devrait maintenant se présenter comme suit :

const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]})
    ]))
    .pipe(gulp.dest('images/'))
});

Qu'en est-il des fichiers JPG ? Le projet comporte également des images JPG qui doivent également être compressées.

Personnaliser votre configuration Imagemin (suite)

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

  • Déclarez le plug-in imagemin-mozjpeg en plaçant cette ligne en haut de votre gulpfile.js.
const mozjpeg = require('imagemin-mozjpeg');
  • Ensuite, ajoutez mozjpeg({quality: 50}) au tableau transmis à ImageminPlugin():
[
  pngquant({quality: [0.5, 0.5]}),
  mozjpeg({quality: 50})
]

✔✔ Enregistrement

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

const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]}),
      mozjpeg({quality: 50})
    ]))
    .pipe(gulp.dest('images/'))
});

Réexécutez Gulp et vérifiez les résultats avec Lighthouse

  • Réexécutez Gulp:
gulp

Une fois Gulp terminé, un message semblable à celui-ci doit s'afficher dans le terminal:

gulp-imagemin: 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 peut vous indiquer 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.