Utiliser Imagemin avec webpack

Katie Hempenius
Katie Hempenius
X

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 pour modifier votre fichier webpack.config.js.

Le fichier webpack.config.js existant pour ce projet a copié des images à partir de images/ vers le répertoire dist/, mais il n'a pas été avant de les compresser.

  • Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
  • 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;
  • Ajoutez ensuite le code suivant en tant que dernier élément du tableau plugins[]. Ce Ajoute Imagemin à la liste des plug-ins utilisés par Webpack:
new ImageminPlugin()

✔✔ Arrivée

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 des 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 section console:
webpack --config webpack.config.js --mode development

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

  • Exécutez à nouveau webpack, mais cette fois en mode production:
webpack --config webpack.config.js --mode production

Cette fois-ci, webpack affiche un avertissement vous informant que votre fichier PNG Malgré une certaine compression, les fichiers dépassent toujours la taille maximale recommandée. (Les modes development et production de webpack donnent la priorité à différentes choses, ce qui 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 de compression des 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. La Le champ quality utilise une plage de valeurs min et max pour déterminer niveau de compression : 0 est le plus bas et 1 le plus élevé. Pour forcer toutes les images à être compressée avec une qualité de 50 %, transmettez 0.5 comme valeurs minimale et maximale.

✔✔ Arrivée

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 spécifier ainsi que leur compression.

Personnaliser votre configuration Imagemin (suite)

Au lieu d'utiliser le plug-in par défaut de imagemin-webpack-plugin pour la compression au format 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 devrez Modifiez votre fichier webpack.config.js:

  • Initialisez le plug-in imagemin-mozjpeg en ajoutant la ligne suivante au niveau de 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 maintenant à 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 correspond à la pire qualité, 100 est la meilleure version) en utilisant le plug-in Mozjpeg.

Si vous ajoutez des paramètres pour un plug-in qui est un plug-in par défaut imagemin-webpack-plugin, vous pouvez les ajouter en tant que paire clé/objet sur l'objet transmis à ImageminPlugin(). Les paramètres de Pnquant sont un bon exemple cette étape.

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

✔✔ Arrivée

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 le 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 corrigé les avertissements webpack.

Webpack vous avertit en cas d'images volumineuses, mais ne peut pas vous indiquer si des images non compressés ou sous-compressés. C'est pourquoi il est toujours une bonne idée d'utiliser Lighthouse pour vérifier vos modifications.

"Encoder efficacement les images" de Lighthouse l'audit de performances peut vous indiquer les images JPEG de votre page sont compressées de manière optimale.

  • Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite 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'option Encoder efficacement images s'est correctement déroulée.

Réussite "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.