El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Optimització d'Imatges

Següent ►
►

La optimització d'imatges és un pas crucial en el procés de construcció de qualsevol aplicació web moderna. Les imatges sovint representen una part significativa del pes total d'una pàgina web, i optimitzar-les pot millorar dràsticament el rendiment i la velocitat de càrrega del lloc. En aquest tema, aprendrem com utilitzar Webpack per optimitzar les imatges de manera eficient.

Objectius

  • Entendre la importància de l'optimització d'imatges.
  • Aprendre a configurar Webpack per optimitzar imatges.
  • Implementar plugins i loaders per a la compressió d'imatges.
  • Comparar diferents tècniques d'optimització.

Importància de l'Optimització d'Imatges

Les imatges no optimitzades poden:

  • Augmentar el temps de càrrega de la pàgina.
  • Consumir més ample de banda.
  • Afectar negativament l'experiència de l'usuari.
  • Penalitzar el SEO del lloc web.

Configuració de Webpack per Optimitzar Imatges

Instal·lació de Dependències

Per començar, necessitem instal·lar alguns paquets que ens ajudaran a optimitzar les imatges:

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

Configuració del Fitxer webpack.config.js

Afegirem la configuració necessària al nostre fitxer webpack.config.js per utilitzar aquests 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: true,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
};

Explicació del Codi

  • file-loader: Aquest loader permet importar fitxers d'imatge a JavaScript i moure'ls al directori de sortida.
  • image-webpack-loader: Aquest loader optimitza les imatges utilitzant diverses tècniques de compressió.

Opcions de image-webpack-loader

  • mozjpeg: Optimitza imatges JPEG.
  • optipng: Optimitza imatges PNG.
  • pngquant: Una altra eina per optimitzar imatges PNG amb diferents paràmetres de qualitat.
  • gifsicle: Optimitza imatges GIF.
  • webp: Converteix imatges a format WebP, que és més eficient en termes de compressió.

Comparació de Tècniques d'Optimització

Format d'Imatge Eina d'Optimització Avantatges Desavantatges
JPEG mozjpeg Alta compressió, manté qualitat Pot perdre qualitat en compressions altes
PNG optipng, pngquant Compressió sense pèrdua Fitxers més grans que JPEG
GIF gifsicle Suport per a animacions Compressió limitada
WebP webp Alta compressió, manté qualitat No suportat per tots els navegadors

Exercici Pràctic

Exercici

  1. Crea un projecte Webpack nou.
  2. Afegeix algunes imatges al directori src.
  3. Configura Webpack per optimitzar aquestes imatges utilitzant file-loader i image-webpack-loader.
  4. Comprova la mida dels fitxers d'imatge abans i després de la construcció.

Solució

  1. Crea el projecte i instal·la les dependències:
mkdir webpack-image-optimization
cd webpack-image-optimization
npm init -y
npm install webpack webpack-cli --save-dev
npm install image-webpack-loader file-loader --save-dev

  1. Afegeix imatges al directori src.

  2. Configura webpack.config.js com es mostra anteriorment.

  3. Executa Webpack:

npx webpack --mode production
  1. Compara la mida dels fitxers d'imatge a src i dist.

Conclusió

L'optimització d'imatges és essencial per millorar el rendiment de les aplicacions web. Utilitzant Webpack i els loaders adequats, podem automatitzar aquest procés i assegurar-nos que les nostres imatges estiguin sempre optimitzades. En el proper tema, explorarem altres tècniques d'optimització per a CSS.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats