Compressió d'imatges per lots per a desenvolupadors web | Bulk Image Compressor

Published December 18, 2025

Les imatges són els actius més pesats a la majoria de llocs web. En una pàgina mitjana, representen entre el 40 i el 60% del pes total. Si ets desenvolupador web i no comprimeixes les imatges, estàs enviant pàgines inflades per molt net que sigui el teu codi.

La qüestió no és si comprimir. És on hauria de passar la compressió en el teu flux de treball i quina eina s’adapta millor a cada situació.

On encaixa la compressió d’imatges en un flux de treball de desenvolupament

Hi ha tres punts principals on pots comprimir imatges durant el desenvolupament:

Abans del commit. Optimitzes les imatges localment abans que entrin al control de versions. Això manté el repositori lleuger i significa que tots els entorns (staging, producció, màquines d’altres desenvolupadors) reben les versions optimitzades automàticament.

Durant el build. Eines de build com Vite o webpack gestionen la compressió com a part del pipeline d’actius. Les imatges font es queden amb qualitat completa al repositori, i el procés de build genera versions optimitzades per al desplegament.

A la capa CDN. Serveis com Cloudflare, Imgix o Cloudinary transformen i comprimeixen imatges sobre la marxa segons el dispositiu i el navegador que ho sol·liciten.

Cada enfocament té compromisos, i els pots combinar.

Eines en línia vs plugins de build

Per a una tasca ràpida i puntual, com comprimir un lot de captures de pantalla per a una entrada de blog o optimitzar un conjunt d’icones, una eina en línia és l’opció més ràpida. Obre Bulk Image Compressor, posa els fitxers, ajusta la qualitat i descarrega. Fet en menys d’un minut.

Els plugins de build gestionen l’optimització contínua automàticament. Així és com es veu a la pràctica.

Vite

Els usuaris de Vite poden utilitzar vite-plugin-imagemin o plugins similars:

// vite.config.js
import imagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    imagemin({
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      pngquant: { quality: [0.7, 0.8] },
    }),
  ],
};

Això comprimeix les imatges durant vite build. Els fitxers font es queden intactes. El directori de sortida rep les versions optimitzades.

webpack

Amb webpack, image-minimizer-webpack-plugin fa la mateixa feina:

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

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
            },
          },
        },
      }),
    ],
  },
};

Quan utilitzar cadascun

Utilitza una eina en línia quan:

Estàs afegint un grapat d’imatges a un projecte i les vols optimitzades ara mateix
Estàs treballant amb contingut d’un client o dissenyador que ha enviat fitxers sense optimitzar
El teu projecte no té un pas de build (HTML estàtic, llocs senzills)
Vols comprovar visualment els resultats de la compressió abans de fer commit

Utilitza plugins de build quan:

El teu projecte ja té un pipeline de build
Diversos desenvolupadors contribueixen amb imatges i vols una optimització consistent
Necessites conversió de format (p. ex., generar versions WebP automàticament)
Vols les imatges font a qualitat completa al repositori per a un possible reprocessament futur

Optimització d’imatges a CI/CD

Els plugins de build s’executen durant els builds locals, però també pots afegir optimització d’imatges al teu pipeline de CI/CD. Això detecta imatges no optimitzades que s’escapen, independentment de qui les hagi commitejat.

Una aproximació senzilla és executar un script al teu pipeline de CI que comprovi les mides dels fitxers d’imatge:

# Fer fallar el build si alguna imatge és més gran de 500KB
find public/images -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -size +500k | tee oversized.txt
if [ -s oversized.txt ]; then
  echo "S'han trobat imatges massa grans. Comprimeix abans de desplegar."
  exit 1
fi

Per a compressió automatitzada a CI, eines com sharp-cli o imagemin-cli poden processar imatges com un pas del build. Això garanteix que res arribi a producció sense comprimir.

Lazy loading i imatges responsives

La compressió sola no és suficient. Com carregues les imatges també importa.

Lazy loading ajorna les imatges que no es veuen fins que l’usuari es desplaça fins a elles. Afegeix loading="lazy" a cada imatge que estigui per sota del plec. No facis lazy loading de la imatge hero ni de cap contingut visible a la càrrega inicial de la pàgina, ja que això perjudicarà la teva puntuació Largest Contentful Paint.

Imatges responsives serveixen mides diferents segons l’amplada de pantalla. Un telèfon no necessita una imatge de 2400px pensada per a un monitor d’escriptori. Utilitza els atributs srcset i sizes per permetre que el navegador triï la versió adequada:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="Foto del producte"
  width="1600"
  height="1067"
  loading="lazy"
>

Genera aquestes variants de mida com a part del teu procés de build o amb una eina per lots abans de pujar.

Lliurament via CDN

Una CDN (Xarxa de Lliurament de Continguts) serveix imatges des de servidors geogràficament propers als teus visitants. Això redueix la latència, però algunes CDN van més enllà amb optimització d’imatges sobre la marxa.

Cloudflare Image Resizing pot redimensionar i convertir imatges a WebP o AVIF automàticament segons el navegador del visitant. No necessites generar variants tu mateix.

Imgix i Cloudinary són CDN d’imatges dedicades. Puges una font d’alta qualitat, i elles generen la mida, el format i la qualitat que sol·licitis mitjançant paràmetres d’URL. Això és potent però afegeix un cost per imatge.

Per a la majoria de projectes, comprimir les imatges abans de pujar-les i servir-les a través d’una CDN estàndard (Cloudflare, Fastly, AWS CloudFront) és suficient. Les CDN d’imatges dedicades tenen sentit quan tens milers d’imatges pujades per usuaris i necessites redimensionament dinàmic. Per contextualitzar per què la compressió és important per a la web, la nostra guia sobre per què les imatges web necessiten compressió cobreix els fonaments.

Errors comuns que cometen els desenvolupadors

Fer commit d’imatges no optimitzades. Un JPEG de 5MB al teu repositori es queda a l’historial de git per sempre, encara que el substitueixis més tard. Comprimeix abans de fer commit.

Utilitzar PNG per a fotografies. Els PNG estan pensats per a gràfics, captures de pantalla i imatges amb transparència. Una fotografia desada com a PNG sol ser de 3 a 5 vegades més gran que la mateixa imatge com a JPEG o WebP. Utilitza el format adequat per al tipus de contingut. Consulta la nostra guia de comparació de formats per a més detalls.

Ometre els atributs d’amplada i alçada. Sense dimensions explícites, el navegador no sap quant espai reservar per a una imatge fins que es carrega. Això provoca canvis de layout, que perjudiquen la teva puntuació CLS i molesten els usuaris.

Sobrecomprimirl. Baixar la qualitat al 30 o 40% per obtenir fitxers petits produeix artefactes visibles. Per a imatges web, una qualitat del 75 al 82% aconsegueix l’equilibri correcte entre mida i aparença.

Ignorar les dimensions de la imatge. Comprimir una foto de 4000px al 80% de qualitat és bo, però si es mostra a 600px d’amplada a la teva pàgina, estàs enviant molts més píxels dels necessaris. Redimensiona primer a les dimensions de visualització i després comprimeix.

No utilitzar WebP. El suport del navegador per a WebP és universal ara. Si encara serveixes JPEG i PNG exclusivament, estàs deixant sobre la taula un estalvi de mida de fitxer del 25 al 35%.

Un enfocament pràctic

Per a la majoria de projectes web, això és el que funciona bé:

Redimensiona i comprimeix les imatges abans de fer commit, utilitzant una eina en línia com Bulk Image Compressor o un script local.
Afegeix un plugin de build com a xarxa de seguretat per detectar qualsevol cosa que s’hagi escapat.
Utilitza lazy loading i imatges responsives al teu HTML.
Serveix a través d’una CDN.

No necessites fer els quatre des del primer dia. Comença amb el primer pas. Això sol ja farà una diferència notable en els temps de càrrega de les teves pàgines.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor