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épertoireimages/
.
- 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 votregruntfile.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'objetimagemin
. 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 votregruntfile.js
.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Ajoutez ensuite
mozjpeg({quality: 50})
au tableau dans l'objetoptions
. 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
- Cliquez sur le bouton Outils.
- Cliquez ensuite sur le bouton Console.
- 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 .
- 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.