Configura el complemento Imagemin Grunt
Este Glitch ya contiene grunt
, grunt-cli
y grunt-contrib-imagemin
. Para agregar la configuración de Imagemin, deberás editar tu
gruntfile.js
.
- Haz clic en Remix para editar para que el proyecto se pueda editar.
- 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 será de forma dinámica. generado por la coincidencia de los nombres de archivo 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 del directorioimages/
.
- Para cargar la tarea Imagemin, agrega esta línea inmediatamente antes
grunt.registerTask(...)
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- Por último, reemplaza el comentario
/* list plugins here */
por'imagemin'
para agregar Imagemin como la tarea de Grunt predeterminada. Esa línea ahora debería verse de la siguiente manera:
grunt.registerTask('default', ['imagemin']);
✔︎ Registro
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 niveles de calidad de compresión.
Ya agregamos imagemin-pngquant
a este proyecto en package.json
para comprimir tus 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 tugruntfile.js
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
- Agrega una propiedad
options
a la configuración para comprimir imágenes PNGimagemin
. Esa propiedadoptions
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 PNG mediante el complemento Pngquant. El
El campo quality
usa los rangos de valores min
y max
para determinar la
nivel de compresión: 0 es el más bajo y 1 el más alto. Para forzar todas las imágenes
se comprima al 50% de calidad, pasa 0.5
como el valor mínimo y máximo.
✔︎ Registro
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é pasa con los JPEG? El proyecto también tiene imágenes JPEG, por lo que debes especificar también se comprimen.
Personaliza la configuración de Imagemin (continuación)
Usa el complemento imagemin-mozjpeg
, que ya se instaló, para lo siguiente:
comprimir imágenes JPEG.
- Para declarar el complemento
imagemin-mozjpeg
, coloca esta línea en la parte superior de tugruntfile.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 objetooptions
. Ahora, el array debería verse de la siguiente manera:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔︎ Registro
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']);
Corre, Grunt y verificar resultados con Lighthouse
- Haz clic en el botón Herramientas.
- Luego, haz clic en el botón Consola.
- Para ejecutar Grunt, ingresa el siguiente comando en la consola:
grunt
Cuando se complete Grunt, deberías ver un mensaje como este en la consola:
Minified 6 images (saved 667 kB - 66.5%)
¡Hip, hip, hurra! Los resultados son mucho mejores.
Por último, es buena idea usar Lighthouse para verificar los cambios que en la nube. "Codifica imágenes de forma eficiente" de Lighthouse la auditoría de rendimiento 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
- Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Rendimiento) ver la versión publicada de tu Glitch y verificar que la sección " imágenes" se aprobó la auditoría.
¡Listo! Usaste Imagemin para comprimir de manera óptima las imágenes en tu página.