Compressione Batch di Immagini per Sviluppatori Web | Bulk Image Compressor

Published December 18, 2025

Le immagini sono gli asset più pesanti sulla maggior parte dei siti web. In una pagina media, rappresentano dal 40 al 60% del peso totale. Se sei uno sviluppatore web e non comprimi le immagini, stai distribuendo pagine gonfiate per quanto pulito possa essere il tuo codice.

La domanda non è se comprimere. È dove nel tuo flusso di lavoro la compressione dovrebbe avvenire e quale strumento si adatta a ogni situazione.

Dove si inserisce la compressione delle immagini in un flusso di lavoro di sviluppo

Ci sono tre punti principali in cui puoi comprimere le immagini durante lo sviluppo:

Prima del commit. Ottimizzi le immagini localmente prima che entrino nel controllo versione. Questo mantiene il repository snello e significa che ogni ambiente (staging, produzione, macchine di altri sviluppatori) riceve automaticamente le versioni ottimizzate.

Durante la build. Strumenti di build come Vite o webpack gestiscono la compressione come parte della pipeline degli asset. Le immagini sorgente rimangono a piena qualità nel repository e il processo di build genera versioni ottimizzate per il deployment.

A livello di CDN. Servizi come Cloudflare, Imgix o Cloudinary trasformano e comprimono le immagini al volo in base al dispositivo e al browser che le richiede.

Ogni approccio ha dei compromessi e puoi combinarli.

Strumenti online vs plugin di build

Per un’operazione rapida e una tantum, come comprimere un batch di screenshot per un post del blog o ottimizzare un set di icone, uno strumento online è l’opzione più veloce. Apri Bulk Image Compressor, carica i tuoi file, regola la qualità e scarica. Fatto in meno di un minuto.

I plugin di build gestiscono l’ottimizzazione continua automaticamente. Ecco come appare nella pratica.

Vite

Gli utenti di Vite possono usare vite-plugin-imagemin o plugin simili:

// 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] },
    }),
  ],
};

Questo comprime le immagini durante vite build. I file sorgente rimangono invariati. La directory di output riceve le versioni ottimizzate.

webpack

Con webpack, image-minimizer-webpack-plugin fa lo stesso lavoro:

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 },
            },
          },
        },
      }),
    ],
  },
};

Quando usare l’uno o l’altro

Usa uno strumento online quando:

Stai aggiungendo alcune immagini a un progetto e vuoi ottimizzarle subito
Stai lavorando con contenuti da un cliente o designer che ha inviato file non ottimizzati
Il tuo progetto non ha una fase di build (HTML statico, siti semplici)
Vuoi controllare visivamente i risultati della compressione prima del commit

Usa i plugin di build quando:

Il tuo progetto ha già una pipeline di build
Più sviluppatori contribuiscono con immagini e vuoi un’ottimizzazione coerente
Hai bisogno di conversione di formato (ad esempio, generare versioni WebP automaticamente)
Vuoi immagini sorgente a piena qualità nel repository per un’eventuale rielaborazione futura

Ottimizzazione delle immagini in CI/CD

I plugin di build vengono eseguiti durante le build locali, ma puoi anche aggiungere l’ottimizzazione delle immagini alla tua pipeline CI/CD. Questo intercetta le immagini non ottimizzate che sfuggono, indipendentemente da chi le ha committate.

Un approccio semplice è eseguire uno script nella tua pipeline CI che controlla le dimensioni dei file immagine:

# Fallisce la build se un'immagine è più grande di 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 "Trovate immagini troppo grandi. Comprimi prima di distribuire."
  exit 1
fi

Per la compressione automatizzata in CI, strumenti come sharp-cli o imagemin-cli possono elaborare le immagini come passaggio di build. Questo garantisce che nulla vada in produzione non compresso.

Lazy loading e immagini reattive

La compressione da sola non basta. Anche il modo in cui carichi le immagini è importante.

Il lazy loading rimanda le immagini fuori schermo fino a quando l’utente non scorre fino a esse. Aggiungi loading="lazy" a ogni immagine sotto la piega. Non applicare il lazy loading all’immagine hero o a qualsiasi contenuto visibile al caricamento iniziale della pagina, poiché danneggerebbe il tuo punteggio Largest Contentful Paint.

Le immagini reattive servono dimensioni diverse in base alla larghezza dello schermo. Un telefono non ha bisogno di un’immagine da 2400px pensata per un monitor desktop. Usa gli attributi srcset e sizes per permettere al browser di scegliere la versione giusta:

<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 prodotto"
  width="1600"
  height="1067"
  loading="lazy"
>

Genera queste varianti di dimensione come parte del tuo processo di build o con uno strumento batch prima del caricamento.

Consegna tramite CDN

Una CDN (Content Delivery Network) serve le immagini da server geograficamente vicini ai tuoi visitatori. Questo riduce la latenza, ma alcune CDN vanno oltre con l’ottimizzazione delle immagini al volo.

Cloudflare Image Resizing può ridimensionare e convertire le immagini in WebP o AVIF automaticamente in base al browser del visitatore. Non devi generare varianti tu stesso.

Imgix e Cloudinary sono CDN di immagini dedicate. Carichi una sorgente di alta qualità e loro generano qualsiasi dimensione, formato e qualità richiedi tramite parametri URL. Questo è potente ma aggiunge un costo per immagine.

Per la maggior parte dei progetti, comprimere le immagini prima del caricamento e servirle tramite una CDN standard (Cloudflare, Fastly, AWS CloudFront) è sufficiente. Le CDN di immagini dedicate hanno senso quando hai migliaia di immagini caricate dagli utenti e hai bisogno di ridimensionamento dinamico. Per capire perché la compressione è importante per il web, la nostra guida sul perché le immagini del sito web hanno bisogno di compressione copre le basi.

Errori comuni che gli sviluppatori commettono

Commettare immagini non ottimizzate. Un JPEG da 5MB nel tuo repository rimane nella cronologia git per sempre, anche se lo sostituisci in seguito. Comprimi prima del commit.

Usare PNG per le fotografie. I PNG sono pensati per grafica, screenshot e immagini con trasparenza. Una fotografia salvata come PNG è tipicamente da 3 a 5 volte più grande della stessa immagine come JPEG o WebP. Usa il formato giusto per il tipo di contenuto. Consulta la nostra guida al confronto dei formati per i dettagli.

Saltare gli attributi di larghezza e altezza. Senza dimensioni esplicite, il browser non sa quanto spazio riservare per un’immagine fino a quando non viene caricata. Questo causa spostamenti del layout, danneggiando il tuo punteggio CLS e infastidendo gli utenti.

Troppa compressione. Portare la qualità al 30 o 40% per ottenere file minuscoli produce artefatti visibili. Per le immagini web, una qualità dal 75 all’82% raggiunge il giusto equilibrio tra dimensione e aspetto.

Ignorare le dimensioni dell’immagine. Comprimere una foto da 4000px all’80% di qualità è positivo, ma se viene visualizzata a 600px di larghezza sulla tua pagina, stai comunque inviando molti più pixel del necessario. Ridimensiona prima alle dimensioni di visualizzazione, poi comprimi.

Non usare WebP. Il supporto dei browser per WebP è ormai universale. Se servi ancora esclusivamente JPEG e PNG, stai rinunciando a un risparmio del 25-35% sulla dimensione dei file.

Un approccio pratico

Per la maggior parte dei progetti web, ecco cosa funziona bene:

Ridimensiona e comprimi le immagini prima del commit, usando uno strumento online come Bulk Image Compressor o uno script locale.
Aggiungi un plugin di build come rete di sicurezza per intercettare qualsiasi cosa sia sfuggita.
Usa lazy loading e immagini reattive nel tuo HTML.
Servi tramite una CDN.

Non devi fare tutti e quattro dal primo giorno. Inizia con il primo passo. Già solo quello farà una differenza notevole nei tempi di caricamento della tua pagina.

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