Preparare le immagini per il web: quale formato?

 In Web design

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”.

Photoshop: 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.

 

Esempio di logo in formato gif

GIF: acronimo di “Graphics Interchange Format”, introdotto da CompuServe nel 1987. Fino a 256 colori, supporta la trasparenza e le animazioni con il formato GIF89a. Buono per schemi semplici, non adatto a fotografie.

Esempio di logo in formato jpg

JPG o JPEG: acronimo di “Joint Photographic Experts Group“. Adatto alle fotografie, poiché supporta 16 milioni di colori. Il formato supporta un livello di compressione variabile, permettendo pertanto di trovare un compromesso fra qualità e peso del file. Una forte compressione genera tipici artefatti.

Esempio di logo in formato png

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

Post suggeriti

Leave a Comment

Inizia a digitare e premi Enter per effettuare una ricerca