Cómo usar Imagemin con Grunt

Katie Hempenius
Katie Hempenius
X

Configura el complemento Imagemin Grunt

Esta Glitch ya contiene grunt, grunt-cli y el complemento grunt-contrib-imagemin. Para agregar la configuración de Imagemin, deberás editar tu archivo gruntfile.js.

  • Haz clic en Remix to Edit para que el proyecto sea editable.
  • En gruntfile.js, reemplaza el comentario //Add configuration here por este bloque de código:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

Este bloque de código le indica a Grunt qué archivos se deben comprimir con Imagemin.

  • dynamic indica que la lista de archivos para comprimir se generará de forma dinámica cuando los nombres de archivo coincidan con el patrón de archivo especificado.

  • El patrón del archivo {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} coincidirá con todas las imágenes JPEG y PNG en el directorio images/.

  • Para cargar la tarea Imagemin, agrega esta línea inmediatamente antes de grunt.registerTask(...):
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • Por último, agrega Imagemin como la tarea de Grunt predeterminada y reemplaza el comentario /* list plugins here */ por 'imagemin'. Ahora, esa línea debería verse de la siguiente manera:
grunt.registerTask('default', ['imagemin']);

✔︎ Revisión

El archivo gruntfile.js completo debería verse de la siguiente manera:

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']);

Personaliza la configuración de Imagemin

imagemin-pngquant es un complemento para especificar los niveles de calidad de compresión. Ya agregamos imagemin-pngquant a este proyecto en el archivo package.json de modo que puedas usarlo para comprimir los archivos PNG. Para usarlo, declara el complemento y especifica un nivel de calidad de compresión en tu Gruntfile.

  • Para declarar el complemento imagemin-pngquant, agrega esta línea a la parte superior de tu gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Para agregar opciones de configuración a fin de comprimir imágenes PNG, agrega una propiedad options al objeto imagemin. La propiedad options debería verse de la siguiente manera:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

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 gruntfile.js ahora debería verse de la siguiente manera:

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']);

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)

Usa el complemento imagemin-mozjpeg, que ya se instaló, para comprimir imágenes JPEG.

  • Para declarar el complemento imagemin-mozjpeg, coloca esta línea en la parte superior de tu gruntfile.js.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • A continuación, agrega mozjpeg({quality: 50}) al array en el objeto options. Ahora, ese array debería verse de la siguiente manera:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ Revisión

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

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']);

Ejecuta Grunt y verifica los resultados con Lighthouse

  1. Haz clic en el botón Herramientas.
  2. Luego, haz clic en el botón de la consola.
  3. Para ejecutar Grunt, escribe el siguiente comando en la consola:
grunt

Cuando Grunt se complete, deberías ver un mensaje como este en la consola:

Minified 6 images (saved 667 kB - 66.5%)

¡Hip, hip, hurra! Estos resultados son mucho mejores.

Por último, es una buena idea usar Lighthouse para verificar los cambios que acabas de realizar. La auditoría de rendimiento de "Codifica imágenes de manera eficiente" de Lighthouse te permitirá 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 pantalla completa.
  • Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Rendimiento) en la versión publicada de tu Glitch y verifica que se haya aprobado la auditoría "Codifica imágenes de manera 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.