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 degulpfile.js
:
const imagemin = require('gulp-imagemin');
- Ensuite, remplacez le commentaire
//Add tasks here
dansgulpfile.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
- Cliquez sur le bouton Outils.
- Cliquez ensuite sur le bouton Console.
- 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 votregulpfile.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 votregulpfile.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 .
- 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.
Opération réussie. Vous avez utilisé Imagemin pour compresser de manière optimale les images de votre page.