You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
2 Hrs
22 Min
26 Seg

Optimización de imágenes con Webpack y CDN

13/22
Resources

How to optimize PNG images in your project with Webpack?

Learning how to optimize images is essential to improve the performance of your web applications. Poorly optimized images can cause slow loading times and a poor user experience. In this guide, you will discover how to integrate and configure a plugin in Webpack that will allow you to optimize PNG images effectively.

What do you need to get started?

To get started, make sure you have your project ready and follow the steps below:

  1. Plugin Installation: we will use the image-minimiser-webpack-plugin and imagemin-optiPng.

    npm install --save-dev image-minimiser-webpack-plugin imagemin-optiPng

    They are installed as development dependencies so you can use them when building your project.

  2. Initial Configuration:When you finish installing, configure the plugin in your development environment to observe the changes in real time.

How to configure the plugin in Webpack?

  1. Webpack Integration:Work on the development configuration in your Webpack file.

  2. Constants definition:Create a constant to use the plugin:

    const ImageMinimizerPlugin = require('image-minimiser-webpack-plugin');

    Make sure the assets are identifiable and remove any unnecessary resources that may interfere.

  3. Plugin configuration:In the plugins section, add a new instance of the plugin with the appropriate options for PNG:

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

    This configuration applies a default optimization level that is efficient for PNG images.

How to check the optimization?

Once the plugin is configured, it is time to put it to the test:

  1. Project build:run your project to test the optimization performance.

    npm run build
  2. Checking results:After the build, check the reduced size of your PNG file. According to the example, a 25 KB image is reduced to 9 KB, significantly optimizing the size and providing better performance.

When to optimize images?

  • Logos and essential media: Integrate images that are fundamental to your application such as logos or key images.
  • Third-party resources: Avoid optimizing images that are already processed from a CDN service.
  • Performance and user experience: Ensure that navigation in your application is not slow due to heavy images.

What other images can you optimize?

In addition to PNGs, you can also optimize

  • SVGs
  • GIFs
  • JPGs

You just need to adjust the plugin and specific settings for each format you use.

Keep exploring new ways to optimize your application and join me in the next class, where we will work with TypeScript and its integration with Webpack, taking your projects to a new level of efficiency. Every step you take today leads you to be a more competent developer tomorrow!

Contributions 3

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

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.

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 😄

Justo lo que necesitaba, excelente clase.