Ottimizzazione delle immagini

L'ottimizzazione delle immagini riduce le dimensioni dei file e ne migliora la distribuzione senza peggiorare in modo percepibile la qualità, rendendo le pagine più rapide e meno esigenti in termini di banda.

Related workflow terms: Compressione delle immagini, Formato immagine.

Perché è importante

Le immagini sono spesso le risorse più pesanti di una pagina web. Se non vengono ottimizzate, rallentano il caricamento, aumentano i costi di banda e possono penalizzare il posizionamento. Google considera la velocità un segnale e le immagini contribuiscono spesso ai tempi più lunghi.

Per chi produce molti contenuti visivi, come screenshot per documentazione, prodotti e marketing, l'effetto si somma. Cento PNG non ottimizzati in una base di conoscenza possono aggiungere centinaia di megabyte inutili. Lo stesso contenuto ben preparato si carica prima, costa meno da servire e risulta più gradevole da consultare.

Ottimizzare non significa soltanto rimpicciolire: vuol dire consegnare l'immagine giusta, nel formato e nelle dimensioni adatti, nel modo più efficiente.

Tecniche di ottimizzazione

• Scelta del formato — PNG o WebP senza perdita per screenshot con testo; WebP con perdita o AVIF per fotografie; JPG come alternativa molto compatibile.
• Compressione — senza perdita per rimuovere ridondanze mantenendo la qualità, oppure con perdita per eliminare dati poco visibili.
• Ridimensionamento — servire l'immagine nelle misure in cui sarà mostrata. Un file largo 3000 pixel visualizzato a 800 spreca banda.
• Rimozione dei metadati — eliminare EXIF e altri dati non necessari alla visualizzazione, risparmiando qualche kilobyte per file. Valuta con attenzione i profili colore.
• Caricamento differito — rinviare le immagini fuori schermo finché la persona non si avvicina durante lo scorrimento.
• Immagini responsive — usare gli attributi srcset e sizes per fornire misure diverse in base allo schermo e alla risoluzione.

Ottimizzazione degli screenshot

Gli screenshot hanno ampie aree uniformi, testo nitido e bordi precisi. Queste caratteristiche favoriscono i formati senza perdita per la fedeltà visiva.

Spesso la tecnica migliore è semplice: acquisire subito nelle dimensioni e nel formato corretti. Alcuni strumenti permettono di definire formato, viewport e densità prima dell'acquisizione, evitando ridimensionamenti e conversioni.

Nei flussi in blocco, una pipeline può comprimere, convertire e ridimensionare centinaia di immagini in una sola esecuzione, senza intervento manuale.

Una buona regola consiste nel conservare un originale senza perdita e generare copie più piccole per blog, documentazione e social. La sorgente resta pulita e le pagine pubblicate rapide.

Errori comuni

• Ingrandire invece di ridurre. Aumentare una piccola immagine crea più pixel interpolati e sfocati, non più dettaglio. Acquisisci alla misura massima necessaria e riduci.
• Applicare compressione con perdita al testo. JPG crea artefatti su lettere e bordi. Usa una modalità senza perdita.
• Ottimizzare una volta e dimenticarsene. I nuovi contenuti riportano presto file pesanti. Inserisci il processo nell'acquisizione e nella pubblicazione.
• Ignorare le dimensioni di visualizzazione. Un file da 4000 pixel mostrato a 800 spreca banda. Adegua il file al contesto e servi misure responsive.