Adatta la dimensione al punto in cui viene mostrata
Guarda lo spazio più largo che l'immagine riempirà nella pagina. Un banner a tutta larghezza può richiedere circa 1600-2000 pixel. Un'immagine all'interno della colonna di un articolo ne richiede spesso 800-1200. Una piccola miniatura può averne bisogno solo di qualche centinaio. Gli strumenti per sviluppatori del browser o le impostazioni del tema di solito indicano la larghezza visualizzata. Se non la conosci, una larghezza di 1200 pixel è una scelta sicura molto comune per l'immagine di un articolo.
Tieni conto degli schermi nitidi
Gli schermi ad alta densità mostrano più dettagli per pixel. Per le immagini importanti, usare circa il doppio della larghezza visualizzata le mantiene nitide. Per le immagini ordinarie, la larghezza visualizzata è sufficiente. Raddoppiare la dimensione quadruplica più o meno il numero di pixel, quindi fallo solo dove la nitidezza conta. Le foto con dettagli fini ne traggono più vantaggio rispetto a grafiche semplici o sfondi sfocati.
Mantieni le proporzioni
Cambia solo la larghezza o solo l'altezza e lascia che l'altra si adegui. Forzare entrambe a valori fissi deforma persone e cerchi. Quando ti serve una forma precisa, ritaglia invece di stirare. Ad esempio, per trasformare una foto 4:3 in un quadrato, ritagliala prima a quadrato e poi ridimensionala alla larghezza che ti serve.
Riduci, non ingrandire
Rimpicciolire un'immagine funziona bene. Ingrandirla non può aggiungere dettagli, quindi appare sfocata. Se ti serve un'immagine più grande, parti da un originale più grande. Se l'originale è piccolo, spesso è meglio mostrarlo più piccolo che stirarlo.
Un esempio pratico
Supponi di avere una foto di 4000x3000 scattata con il telefono per un articolo di blog la cui colonna di testo è larga 800 pixel. Ridimensionala a 800x600, oppure a 1600x1200 se la vuoi nitida sugli schermi ad alta densità. In entrambi i casi il numero di pixel scende parecchio rispetto all'originale, e la compressione può poi ridurre ulteriormente il file. Le cifre sono illustrative e il risparmio reale dipende dall'immagine.
Un secondo caso è una griglia di miniature in cui ogni immagine appare larga circa 300 pixel. Caricare lì foto a dimensione piena rende la pagina pesante senza alcun vantaggio visibile. Ridimensionare ciascuna a circa 300-600 pixel di larghezza mantiene la griglia veloce e nitida. Le immagini dei prodotti sono simili: se il modello del negozio le mostra larghe 600 pixel, una versione da 1200 pixel è di solito più che sufficiente anche per gli schermi nitidi, mentre un originale da 5000 pixel aggiunge solo tempo di download.
I banner principali richiedono più attenzione. Riempiono tutta la larghezza, quindi controlla il layout più largo che supporti ed evita di mettere testo essenziale dentro l'immagine, dove il ritaglio sugli schermi piccoli potrebbe tagliarlo.
Procedura passo dopo passo
- Trova la larghezza con cui l'immagine viene mostrata nella tua pagina.
- Decidi se vuoi 1x o circa 2x quella larghezza.
- Apri l'originale, non una copia già rimpicciolita.
- Imposta la larghezza e mantieni bloccato il rapporto d'aspetto.
- Ritaglia prima se ti serve una forma diversa.
- Comprimi l'immagine ridimensionata per il web.
- Controllala su un telefono e su uno schermo desktop.
- Sostituisci la vecchia immagine nella pagina e ricarica per verificare che sia tutto a posto.
Errori comuni
- Affidarsi al browser per rimpicciolire un'immagine enorme, così i visitatori scaricano comunque tutto.
- Impostare sia la larghezza sia l'altezza e schiacciare l'immagine.
- Ingrandire una piccola immagine per riempire un banner.
- Ridimensionare più volte una copia già compressa.
- Dimenticare di conservare l'originale.
- Usare un'unica misura per tutte le immagini della pagina invece di adattarla a ciascun spazio.
Lista di controllo rapida
- Larghezza visualizzata nota
- Dimensione impostata a 1x o circa 2x di essa
- Proporzioni mantenute
- Originale intatto
- Compressione dopo il ridimensionamento
Suggerimento: dai al file ridimensionato un nome chiaro, ad esempio con la larghezza alla fine, così potrai distinguerlo dall'originale in seguito.
Ridimensiona e comprimi con DoneImg
Apri lo strumento di ridimensionamento di DoneImg, aggiungi l'immagine e inserisci la larghezza che ti serve. Il lavoro lo fa il tuo browser, quindi nulla viene caricato. Poi apri lo strumento di compressione per ridurre le dimensioni del file e scarica il risultato. Ripeti la stessa larghezza per ogni immagine di una galleria, così la pagina appare coerente e si carica in modo prevedibile. Guarda sempre l'anteprima prima di scaricare e conserva l'originale intatto. Se ti serve una forma diversa, usa lo strumento di ritaglio prima di ridimensionare.
Meglio ridimensionare o comprimere per primo?
Prima ridimensiona, perché con meno pixel il compressore ha meno da fare e il file risulta più piccolo.
Ridimensionare abbassa la qualità?
Rimpicciolire un'immagine la mantiene nitida alla nuova dimensione, ma poi non potrai riingrandirla senza sfocature, quindi conserva l'originale.