Se usó la API de Cloud Translation para traducir esta página.

Cómo usar Imagemin con webpack

Katie Hempenius

Configura el complemento webpack de Imagemin

Esta falla ya contiene webpack, webpack-cli y imagemin-webpack-plugin. Para agregar la configuración de Imagemin, deberás editar tu archivo webpack.config.js.

El webpack.config.js existente para este proyecto copió imágenes del directorio images/ al directorio dist/, pero no las comprimió.

Haz clic en Remix to Edit para que el proyecto sea editable.

Nota: ¿Por qué deberías copiar imágenes a una carpeta dist/ nueva? dist/ es la versión abreviada de "distribution" y es una práctica bastante común mantener el código original, las imágenes, etc. separados de sus versiones distribuidas, ya que pueden ser ligeramente diferentes.

Primero, agrega este código en la parte superior de webpack.config.js para declarar el complemento Imagemin:

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

A continuación, agrega el siguiente código como el último elemento del array plugins[]. De esta manera, se agrega Imagemin a la lista de complementos que usa Webpack:

new ImageminPlugin()

✔︎ Revisión

Tu archivo webpack.config.js completo ahora debería verse de la siguiente manera:

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()
  ]
}

Ahora tienes una configuración de webpack que comprime imágenes con Imagemin.

Ejecuta Webpack

Haz clic en Terminal. (Nota: Si no aparece el botón Terminal, es posible que debas usar la opción Pantalla completa).
Para comprimir tus imágenes, ejecuta webpack escribiendo el siguiente comando en la consola:

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

Pero ¿qué sucede si ejecutas webpack en modo de producción?

Vuelve a ejecutar webpack, pero esta vez en modo de producción:

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

Esta vez, webpack muestra una advertencia que te indica que tus archivos PNG, a pesar de ciertos tipos de compresión, aún superan el límite de tamaño recomendado. (Los modos development y production de webpack priorizan diferentes cosas, por lo que solo ves esta advertencia mientras ejecutas webpack en modo de producción).

Personaliza la configuración de Imagemin para corregir esta advertencia.

Personaliza la configuración de Imagemin

Para agregar parámetros de configuración para comprimir imágenes PNG, pasa el siguiente objeto a ImageminPlugin():

{pngquant: ({quality: [0.5, 0.5]})}

Este código le indica a Imagemin que comprima los archivos PNG mediante el complemento Pngquant. El campo quality usa un rango de valores min y max para determinar el nivel de compresión: 0 es el más bajo y 1 es el más alto. Para forzar la compresión de todas las imágenes al 50% de calidad, pasa 0.5 como el valor mínimo y máximo.

✔︎ Revisión

Tu archivo webpack.config.js ahora debería verse de la siguiente manera:

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]}),
      })
  ]
}

Pero ¿qué sucede con los JPEG? El proyecto también tiene imágenes JPEG, por lo que también debes especificar cómo se comprimen.

Cómo personalizar la configuración de Imagemin (continuación)

En lugar de usar el complemento predeterminado de imagemin-webpack-plugin para la compresión de JPG (imagemin-jpegtran), usa el complemento imagemin-mozjpeg. A diferencia de Jpegtran, Mozjpeg te permite especificar una calidad de compresión para tu formato JPG. Ya instalamos el complemento Mozjpeg por ti en esta Glitch, pero deberás editar el archivo webpack.config.js:

Para inicializar el complemento imagemin-mozjpeg, agrega la siguiente línea en la parte superior del archivo webpack.config.js:

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

Agrega una propiedad plugins al objeto que se pasó a ImageminPlugin(), de modo que el objeto ahora se vea de la siguiente manera:

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

Este código le indica a Webpack que comprima los archivos JPG en una calidad de 50 (0 es el peor; 100 es la mejor) con el complemento Mozjpeg.

Si quieres agregar parámetros de configuración para un complemento que es un complemento predeterminado de imagemin-webpack-plugin, se puede agregar como un par clave-objeto en el objeto que se pasa a ImageminPlugin(). La configuración para Pnquant es un buen ejemplo de esto.

Sin embargo, si agregas parámetros de configuración para complementos no predeterminados (por ejemplo, Mozjpeg), debes incluirlos en el array correspondiente a la propiedad plugins.

✔︎ Revisión

Tu código debería verse de la siguiente manera:

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})]
    })
  ]
}

Vuelve a ejecutar webpack y verifica los resultados con Lighthouse

En la consola, vuelve a ejecutar webpack:

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

¡Hip, hip, hurra! Los cambios deberían haber corregido las advertencias de webpack.

webpack te advierte sobre las imágenes grandes, pero no puede indicarte si estas no están comprimidas o no están comprimidas. Por eso, siempre es una buena idea usar Lighthouse para verificar los cambios.

La auditoría de rendimiento de "Codifica imágenes de manera eficiente" de Lighthouse puede ayudarte a saber si las imágenes JPEG de tu página están comprimidas de manera óptima.

Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Options > Performance) en la versión publicada de tu Glitch y verifica que se haya aprobado la auditoría Codifica imágenes de forma eficiente.

Se aprobó la auditoría "Codifica las imágenes de manera eficiente" en Lighthouse

¡Listo! Utilizaste Imagemin para comprimir las imágenes de tu página de forma óptima.