Optimización de Imágenes PNG con Image Minimiser Webpack Plugin

Clase 13 de 22 • Curso de Webpack con Express.js, React.js y TypeScript

Resumen

¿Cómo optimizar imágenes PNG en tu proyecto con Webpack?

Aprender a optimizar imágenes es esencial para mejorar el rendimiento de tus aplicaciones web. Las imágenes mal optimizadas pueden causar tiempos de carga lentos y una experiencia de usuario deficiente. En esta guía, descubrirás cómo integrar y configurar un plugin en Webpack que te permitirá optimizar las imágenes PNG de manera efectiva.

¿Qué necesitas para empezar?

Para comenzar, asegúrate de tener preparado tu proyecto y sigue los pasos indicados:

Instalación del Plugin: Utilizaremos el image-minimiser-webpack-plugin y imagemin-optiPng.
```
npm install --save-dev image-minimiser-webpack-plugin imagemin-optiPng
```
Se instalan como dependencias de desarrollo para que puedas usarlas al construir tu proyecto.
Configuración Inicial: Al terminar de instalar, configura el plugin en tu entorno de desarrollo para observar los cambios en tiempo real.

¿Cómo configurar el plugin en Webpack?

Integración en Webpack: Trabaja sobre la configuración de desarrollo en tu archivo de Webpack.
Definición de constantes: Crea una constante para usar el plugin:
```
const ImageMinimizerPlugin = require('image-minimiser-webpack-plugin');
```
Asegúrate de que los assets sean identificables y elimina cualquier recurso innecesario que pueda interferir.
Configuración del plugin: En la sección de plugins, agrega una nueva instancia del plugin con las opciones adecuadas para PNG:
```
new ImageMinimizerPlugin({
  minimizerOptions: {
    plugins: [
      ['optipng', { optimizationLevel: 5 }],
    ],
  },
});
```
Esta configuración aplica un nivel de optimización por defecto que es eficiente para imágenes PNG.

¿Cómo comprobar la optimización?

Una vez configurado el plugin, es hora de ponerlo a prueba:

Construcción del proyecto: Ejecuta tu proyecto para comprobar el funcionamiento de la optimización.
```
npm run build
```
Verificación de resultados: Después de la construcción, verifica el tamaño reducido de tu archivo PNG. Según el ejemplo, una imagen de 25 KB se reduce a 9 KB, optimizando considerablemente el tamaño y proporcionando un mejor rendimiento.

¿Cuándo optimizar las imágenes?

Logos y medios esenciales: Integra imágenes que son fundamentales para tu aplicación como logos o imágenes claves.
Recursos de terceros: Evita optimizar imágenes que ya vienen procesadas desde un servicio CDN.
Rendimiento y experiencia de usuario: Asegura que la navegación en tu aplicación no sea lenta debido a imágenes pesadas.

¿Qué otras imágenes puedes optimizar?

Además de PNG, también puedes optimizar:

SVGs
GIFs
JPGs

Solo necesitas ajustar el plugin y configuraciones específicas para cada formato que uses.

Sigue explorando nuevas formas de optimizar tu aplicación y acompáñame en la siguiente clase, donde trabajaremos con TypeScript y su integración con Webpack, llevando tus proyectos a un nuevo nivel de eficiencia. ¡Cada paso que das hoy te lleva a ser un desarrollador más competente mañana!

Paolo Joaquin Pinto Perez

student•

++Optimización de imágenes con Webpack y CDN++

1.- instalamos los recursos:

npm install image-minimizer-webpack-plugin imagemin-optipng -D

En webpack.config.dev.js y luego en webpack.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// Debajo de minicssextractplugin o por esta área
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

y luego en plugins:

   new ImageMinimizerPlugin({
      minimizerOptions: {
        plugins: [
          ['optipng', { optimizationLevel: 5 }],
        ],
      },
    }),

IMPORTANTE: En rules habiamos agregado una regla para las imagenes.

      {
        test: /\.(png|jpg)$/,
        type: 'asset/resource',
      },

y debemos modificarla de la siguiente manera:

      {
        test: /\.(png|jpg)$/,
        type: 'asset',
      },

y npm run build && npm run start para verificar.

Miguel Ángel Peña Sánchez

student•

En el punto "3.- En plugins colocamos" hay un cambio de estructura, ya no se encuentra en "plugins", sino en "optimization".

optimization: {
    minimize: true,
    minimizer: [
      new CSSMinimizerPlugin(),
      new TerserPlugin(),
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            plugins: [
              ["optipng", { optimizationLevel: 5 }],
            ]
          }
        }
      }),
    ]
  },

Adicionalmente es requerido el package imagemin

npm imagemin -D

Juan David González Rodríguez

student•

Acá estamos solo optimizando imágenes sin pardina .png usando imagemin-optipng, pero si quieremos optimizar otras imagenes pueden instalar estos plugins:

Sin perdida => modo ++Lossless++

.png

npm install imagemin-optipng -D

.jpeg

npm install imagemin-jpegtran -D

.svg

npm install imagemin-svgo -D

.gif

npm install imagemin-gifsicle -D

Con perdida => modo ++Lossy++

.png

npm install imagemin-pngquant -D

.jpeg

npm install imagemin-mozjpeg -D

Para saber mas sobre la optimizacion de imagenes con webpack Optimize Image :D

Jose Ever Muñoz Muñoz

student•

Tuve que poner esta configuracion para que funcione:

&#x20; new ImageMinimizerPlugin({

&#x20;     minimizer: {

&#x20;       implementation: ImageMinimizerPlugin.imageminMinify,

&#x20;       options: {

&#x20;         plugins: \[

&#x20;           \['optipng', { optimizationLevel: 5 }],

&#x20;         ],

&#x20;       },

&#x20;     },

&#x20;   }),

Camilo Alexander Velandia Velandia

student•

Justo lo que necesitaba, excelente clase.

Juan David González Rodríguez

student•