Come ridimensionare e ritagliare immagini per il web

Ridimensionare e ritagliare suonano come la stessa cosa, ma risolvono problemi diversi — e usarli bene è spesso un guadagno di velocità più grande della sola compressione. Questa guida spiega la differenza, perché le immagini sovradimensionate danneggiano e come dimensionare correttamente le immagini per il web.

Ridimensionare vs. ritagliare

• Ridimensionare (Resizing) cambia le dimensioni dell'intera immagine, mantenendola tutta — la ingrandisci o la rimpicciolisci.
• Ritagliare (Cropping) taglia via una parte dell'immagine per tenere solo una regione — cambi cosa c'è nell'inquadratura, non solo la sua dimensione.

Una foto profilo è un buon esempio: ritagli un quadrato attorno al viso, poi ridimensioni quel quadrato fino alla dimensione di visualizzazione.

Perché le immagini sovradimensionate rallentano le pagine

Una foto appena uscita da un telefono può essere larga 4.000 pixel. Se viene mostrata in una colonna da 800 pixel, il browser scarica cinque volte più pixel di quanti potrà mai mostrarne, poi li rimpicciolisce al volo. È banda sprecata e una pagina più lenta a fronte di zero beneficio visivo. Ridimensionare l'immagine circa alla dimensione a cui viene mostrata è spesso il singolo risparmio di dimensione file più grande disponibile — spesso più della compressione.

Mantieni il rapporto d'aspetto

Il rapporto d'aspetto (aspect ratio) è la proporzione tra larghezza e altezza. Ridimensiona entrambe le dimensioni dello stesso fattore e l'immagine resta senza distorsioni; cambiane solo una e si stira o si schiaccia. La maggior parte degli strumenti «blocca» il rapporto per impostazione predefinita — lascialo bloccato a meno che tu non voglia distorcere di proposito. Se serve una forma diversa (diciamo, un banner largo da una foto verticale), ritaglia al nuovo rapporto invece di stirare.

Quanto grandi devono essere le immagini?

• Abbina la larghezza dell'immagine allo spazio che riempie — misura il contenitore.
• Per una visualizzazione nitida su schermi ad alta densità (Retina), esporta a circa 2× la dimensione di visualizzazione, poi comprimi.
• Non ingrandire — ingrandire un'immagine piccola aggiunge solo sfocatura; non può inventare dettaglio.

Mettere tutto insieme

Un buon ordine di operazioni è ritaglia → ridimensiona → comprimi. Il ridimensionatore di immagini gestisce ritaglio e ridimensionamento in un passaggio con il rapporto d'aspetto bloccato, poi passa al compressore di immagini per abbassare la dimensione del file. Leggi la guida alla compressione per quanto spingere la qualità, e i formati immagine spiegati per scegliere prima il formato giusto.