El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Optimización de Imágenes

Siguiente ►
►

La optimización de imágenes es un paso crucial en el proceso de construcción de aplicaciones web eficientes. Las imágenes suelen ser uno de los recursos más pesados en una página web, y optimizarlas puede mejorar significativamente el rendimiento y la velocidad de carga. En esta sección, aprenderemos cómo optimizar imágenes utilizando Webpack.

Conceptos Clave

  1. Compresión de Imágenes: Reducir el tamaño de las imágenes sin perder calidad perceptible.
  2. Formatos de Imágenes: Utilizar formatos de imagen adecuados como JPEG, PNG, SVG, y WebP.
  3. Carga Diferida (Lazy Loading): Cargar imágenes solo cuando son necesarias, es decir, cuando están a punto de entrar en el viewport del usuario.

Configuración Básica

Instalación de Loaders

Para optimizar imágenes en Webpack, utilizaremos image-webpack-loader junto con file-loader o url-loader. Primero, instalemos estos loaders:

npm install --save-dev image-webpack-loader file-loader

Configuración del Archivo Webpack

A continuación, configuraremos nuestro archivo webpack.config.js para incluir estos loaders:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              // Optipng enabled: false will disable optipng
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
};

Explicación del Código

  • file-loader: Este loader se encarga de copiar las imágenes a la carpeta de salida (dist) y actualizar las referencias en el código.
  • image-webpack-loader: Este loader optimiza las imágenes utilizando varias herramientas de compresión.

Opciones de image-webpack-loader

  • mozjpeg: Optimiza imágenes JPEG.
  • optipng: Optimiza imágenes PNG.
  • pngquant: Otra herramienta para optimizar imágenes PNG.
  • gifsicle: Optimiza imágenes GIF.
  • webp: Convierte imágenes a formato WebP, que es un formato de imagen moderno que proporciona una compresión superior.

Ejemplo Práctico

Supongamos que tenemos una imagen src/images/logo.png. Con la configuración anterior, Webpack optimizará esta imagen y la copiará a la carpeta dist/images.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Image Optimization</title>
</head>
<body>
  <img src="images/logo.png" alt="Logo">
  <script src="bundle.js"></script>
</body>
</html>

Código JavaScript

import './images/logo.png';

Ejercicio Práctico

Ejercicio 1: Optimización de Imágenes

  1. Objetivo: Optimizar una imagen PNG y una imagen JPEG utilizando Webpack.
  2. Pasos:
    • Instala image-webpack-loader y file-loader.
    • Configura webpack.config.js para optimizar las imágenes.
    • Añade una imagen PNG y una imagen JPEG a tu proyecto.
    • Importa las imágenes en tu archivo JavaScript.
    • Verifica que las imágenes optimizadas se encuentran en la carpeta dist.

Solución

  1. Instalación de Loaders:
npm install --save-dev image-webpack-loader file-loader
  1. Configuración de webpack.config.js:
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
};

  1. Añadir Imágenes: Coloca logo.png y banner.jpg en la carpeta src/images.

  2. Importar Imágenes en index.js:

import './images/logo.png';
import './images/banner.jpg';
  1. Verificar Imágenes Optimizadas: Ejecuta Webpack y verifica que las imágenes optimizadas se encuentran en la carpeta dist/images.
npx webpack --config webpack.config.js

Conclusión

En esta sección, hemos aprendido cómo optimizar imágenes utilizando Webpack. La optimización de imágenes es esencial para mejorar el rendimiento de las aplicaciones web. Hemos cubierto la instalación y configuración de image-webpack-loader y file-loader, y hemos visto un ejemplo práctico de cómo optimizar imágenes en un proyecto Webpack. En la siguiente sección, exploraremos más técnicas de optimización para mejorar aún más el rendimiento de nuestras aplicaciones web.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados