Preparare le immagini per il web: quale formato?
Stampa e web sono due media differenti, anche se complementari. Una rivista come Wired esce su carta stampata, ma anche in versione digitale (si chiama “digital publishing”) e sul web. I professionisti della stampa lavorano con immagini in quadricromia a 300 dpi (CMYK, in genere con profilo FOGRA39). Digital designer e sviluppatori web, invece, lavorano con immagini in RGB a 72 dpi. Dovendo essere scaricate da Internet, le fotografie, la grafica e il logo devono pesare poco per caricarsi velocemente. Siamo nell’ordine dei Kb. È sufficiente stampare una foto presa da un sito e scaricare una foto a 300 dpi da Internet per capirne la differenza.
Nonostante oggi si stiano diffondendo le connessioni su fibra ottica – dette FTTH, “Fibre To The Home” – molti domicili si basano ancora su linee DSL talvolta scarse. Per non parlare di coloro che accedono da smartphone e tablet, magari con connessioni 3G o addirittura in roaming! Per questi motivi, sul web le immagini vanno ottimizzate e ritagliate per pesare poco.
Pixel vs centimetri
Prima regola: sul web si lavora in pixel (px) e non in centimetri, millimetri o pollici. Per fare un paragone, 1 centimetro corrisponde a 37.795275591 px. Un banner di 468 x 60 px corrisponde a 12 x 1.5 centimetri.
Esportare per il web
Seconda regola: le immagini vanno esportate per il web. Mai caricare un TIF o peggio ancora un PSD! In Photoshop e Illustrator, esiste la funzione “File > Salva per il web”.
Sulla destra, è possibile selezionare un formato di destinazione. Uno vale l’altro? No. Dipende dalle caratteristiche di ogni immagine. Nell’esempio qui sotto, ho preparato un logo per illustrare le differenze fra i formati.
PNG: acronimo di Portable Network Graphics. Successore del GIF, introdotto nel 1996. Adatto a loghi e a immagini contenenti testi. Alta qualità, trasparenza ma peso del file maggiore.
Immagini e SEO
Non da ultimo è utile, ai fini di SEO e accessibilità, inserire title (titolo immagine), alt (testo alternativo) e description (descrizione dell’immagine) per ogni immagine. I motori di ricerca leggono questi dati. Il nome del file, a sua volta, dovrà essere coerente con il contenuto. Ad esempio, evitare di mantenere i nomi dati dalla macchina fotografica (DSC002345). La regola d’oro è pertanto essere descrittivi.
Link interessanti
Centimeters to Pixels (Y) Conversion Calculator
SEO: come ottimizzare le immagini
Adobe Creative Suite / Ottimizzare le immagini
