Una fotografia può essere perfetta, ma non essere adatta al web.
Il problema non è soltanto la qualità dell’immagine. Contano anche le dimensioni, il ritaglio, il formato e il peso del file.
Una stessa fotografia può essere utilizzata come immagine principale di una pagina, come card, come elemento verticale o in altri contesti. E ogni destinazione può richiedere una preparazione diversa.
Prima di esportare un’immagine, quindi, bisogna capire come verrà utilizzata.
Come preparare un’immagine per un sito senza perdere qualità e senza appesantirlo
01 — Prima di Photoshop: dove deve andare l’immagine?
Prima ancora di aprire Photoshop, bisogna sapere dove finirà l’immagine.
Una fotografia destinata a una hero della homepage non ha necessariamente le stesse esigenze di una fotografia utilizzata in una card o in un’immagine verticale.
La domanda da porsi è:
Qual è il ruolo che questa immagine avrà nella pagina?
Da questa scelta dipenderanno il rapporto dell’immagine, l’inquadratura, le dimensioni e, infine, il peso del file.
02 — Ritagliare non significa semplicemente tagliare
Partiamo dalla stessa fotografia e immaginiamola utilizzata in tre contesti diversi.
La fotografia è la stessa, ma l’inquadratura cambia.
Formato orizzontale
Formato quadrato
Formato verticale
Clicca sulle immagini per visualizzarle a dimensione reale.
Non conviene quindi semplicemente ridimensionare un’immagine: quando cambia il suo utilizzo, può essere necessario ripensare prima il ritaglio.
03 — Compressione: quanto può pesare un’immagine?
La compressione serve a ridurre il peso del file mantenendo una qualità visiva adeguata all’utilizzo previsto.
A parità di immagine e dimensioni, il peso può cambiare molto in base al livello di qualità scelto durante l’esportazione.
Il punto non è ottenere il file più piccolo possibile, ma trovare il giusto equilibrio tra qualità dell’immagine e peso del file.
Molto Alta – 815 KB
Alta – 467 KB
Bassa – 222 KB
Clicca sulle immagini per visualizzarle a dimensione reale.
Non serve quindi scegliere sempre la qualità massima: l’obiettivo è trovare il miglior compromesso tra resa visiva e peso del file.
04 — Formato: JPEG, PNG o WebP?
Anche il formato influisce sul peso e sulla resa dell’immagine.
Non esiste un formato migliore in assoluto: la scelta dipende dal tipo di immagine e da come verrà utilizzata.
JPEG è adatto soprattutto alle fotografie e alle immagini con molte sfumature e variazioni di colore.
PNG è utile quando servono trasparenza o una resa precisa di elementi grafici, testi e immagini con pochi colori.
WebP permette spesso di ottenere file più leggeri mantenendo una buona qualità, ed è oggi un formato molto utilizzato sul web.
La scelta del formato è quindi parte della preparazione dell’immagine: non si tratta semplicemente di “salvare una foto”, ma di scegliere il modo più adatto per portarla sul web.
05 — Destinazione: dove verrà utilizzata l’immagine?
La stessa fotografia può essere utilizzata in contesti molto diversi: come immagine principale di una pagina, all’interno di una card, in una sezione verticale o come anteprima.
In ogni caso, non è detto che lo stesso file sia la soluzione migliore.
Prima di esportare un’immagine, è quindi utile chiedersi:
Dove verrà utilizzata? Quale spazio dovrà occupare? Quale importanza avrà all’interno della pagina?
Da queste risposte dipendono il ritaglio, le proporzioni, le dimensioni, la qualità e il formato più adatti.
La preparazione di un’immagine per il web parte dalla sua destinazione, non da Photoshop.
Preparare un’immagine per il web non significa semplicemente “salvarla più piccola”. Significa capire come verrà utilizzata e costruire il file in funzione di quello scopo.