Utiliser Imagemin avec webpack

Katie Hempenius

Pour suivre cet atelier de programmation, ouvrez ce Glitch dans un deuxième onglet.

Configurer le plug-in webpack Imagemin

Ce Glitch contient déjà webpack, webpack-cli et imagemin-webpack-plugin. Pour ajouter la configuration d'Imagemin, vous devez modifier votre fichier webpack.config.js.

Le webpack.config.js existant pour ce projet copie les images du répertoire images/ vers le répertoire dist/, mais ne les compresse pas.

• Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.

Remarque  : Pourquoi copier des images dans un nouveau dossier dist/ ? dist/ est l'abréviation de "distribution". Il est assez courant de séparer le code, les images, etc. d'origine de leurs versions distribuées, car ils peuvent être légèrement différents.

• Commencez par déclarer le plug-in Imagemin en ajoutant ce code en haut de webpack.config.js :

const ImageminPlugin = require('imagemin-webpack-plugin').default;

• Ensuite, ajoutez le code suivant en tant que dernier élément du tableau plugins[]. Cela ajoute Imagemin à la liste des plug-ins utilisés par webpack :

new ImageminPlugin()

Remarque  : Pourquoi l'ajouter à la fin du tableau ? En l'ajoutant à cet endroit, vous vous assurez qu'Imagemin s'exécute en dernier, après tous les autres plug-ins.

✔︎ Enregistrement

Votre fichier webpack.config.js complet devrait maintenant se présenter comme suit :

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
     new CopyWebpackPlugin([{
       from: 'img/**/**',
       to: path.resolve(__dirname, 'dist')
     }]),
     new ImageminPlugin()
  ]
}

Vous disposez maintenant d'une configuration webpack qui compresse les images à l'aide d'Imagemin.

Exécuter webpack

• Cliquez sur Terminal (remarque : si le bouton "Terminal" ne s'affiche pas, vous devrez peut-être utiliser l'option "Plein écran").
• Pour compresser vos images, exécutez webpack en saisissant la commande suivante dans la console :

webpack --config webpack.config.js --mode development

Mais que se passe-t-il si vous exécutez webpack en mode production ?

• Réexécutez webpack, mais cette fois en mode production :

webpack --config webpack.config.js --mode production

Cette fois, webpack affiche un avertissement vous informant que vos fichiers PNG, malgré une certaine compression, dépassent toujours la limite de taille recommandée. (Les modes development et production de webpack priorisent des éléments différents, c'est pourquoi cet avertissement ne s'affiche que lorsque vous exécutez webpack en mode production.)

Personnalisez notre configuration Imagemin pour corriger cet avertissement.

Personnaliser votre configuration Imagemin

Ajoutez des paramètres pour compresser les images PNG en transmettant l'objet 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 plus bas et 1 est le plus élevé. Pour forcer la compression de toutes les images à 50 % de qualité, transmettez 0.5 comme valeur minimale et maximale.

✔︎ Enregistrement

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

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'img/**/**',
        to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      })
  ]
}

Mais qu'en est-il des JPEG ? Le projet contient également des images JPEG. Vous devez donc également spécifier comment elles sont compressées.

Personnaliser votre configuration Imagemin (suite)

Au lieu d'utiliser le plug-in par défaut de imagemin-webpack-plugin pour la compression JPG (imagemin-jpegtran), utilisez le plug-in imagemin-mozjpeg. Contrairement à Jpegtran, Mozjpeg vous permet de spécifier une qualité de compression pour votre compression JPG. Nous avons déjà installé le plug-in Mozjpeg pour vous dans ce Glitch, mais vous devez modifier votre fichier webpack.config.js :

• Initialisez le plug-in imagemin-mozjpeg en ajoutant la ligne suivante en haut de votre fichier webpack.config.js :

const imageminMozjpeg = require('imagemin-mozjpeg');

• Ajoutez une propriété plugins à l'objet transmis à ImageminPlugin(), de sorte que l'objet ressemble désormais à ceci :

new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

Ce code indique à webpack de compresser les fichiers JPG à une qualité de 50 (0 étant la pire, 100 la meilleure) à l'aide du plug-in Mozjpeg.

Remarque  : Vous vous demandez pourquoi Mozjpeg est ajouté au tableau des plug-ins, mais pas Pngquant ? Bonne question !

Si vous ajoutez des paramètres pour un plug-in par défaut de imagemin-webpack-plugin, ils peuvent être ajoutés en tant que paire clé-objet sur l'objet transmis à ImageminPlugin(). Les paramètres de Pnquant en sont un bon exemple.

Toutefois, si vous ajoutez des paramètres pour des plug-ins non définis par défaut (par exemple, Mozjpeg), vous devez les ajouter en les incluant dans le tableau correspondant à la propriété plugins.

✔︎ Enregistrement

Le code devrait se présenter ainsi :

const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'img/**/**',
      to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
}

Réexécuter webpack et vérifier les résultats avec Lighthouse

• Dans la console, exécutez à nouveau webpack :

webpack --config webpack.config.js --mode production

Parfait ! Vos modifications devraient avoir résolu les avertissements webpack.

webpack vous avertit lorsque les images sont volumineuses, mais il ne peut pas vous indiquer si elles ne sont pas compressées ou si elles ne sont pas compressées. C'est pourquoi il est toujours judicieux d'utiliser Lighthouse pour vérifier vos modifications.

L'audit des 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 View App (Afficher l'application), puis sur Fullscreen (Plein écran) .
• Exécutez l'audit des performances Lighthouse (Lighthouse > Options > Performance) sur la version publiée de votre Glitch et vérifiez que l'audit Efficiently encode images (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.