Seleziona una pagina

Le immagini per il web

Ciao a tutti! Siamo arrivati a fine maggio. Per strada, nei parchi e in palestra si moltiplicano gli sforzi per mettersi in forma, in modo da arrivare in forma alla famigerata prova costume. C’è qualcuno, però, che sebbene abbia una naturale tendenza al sovrappeso deve tenersi sempre a dieta, in ogni periodo dell’anno. Una dieta ferrea, fatta di colori, compressioni e risoluzioni. Stiamo parlando delle immagini per il web.

Voi tutti navigate su internet quotidianamente. Attraverso internet fruite di notizie, informazioni, contenuti scritti, video e immagini. Queste ultime sono un vero e proprio standard per la comunicazione online: la comunicazione visiva è una delle forme di comunicazione più antiche (basti pensare alle pitture rupestri della Val Camonica) ed immediate e con internet essa ha trovato lo spazio per esprimersi con più forza. Mentre su carta stampata capita ancora di leggere articoli privi di qualsiasi immagine, è rarissimo trovare sul web scritti che non abbiano almeno un’immagine a commento.

Qui si apre un problema. Se testo, layout, tabelle e riquadri vari sono tutti elementi grafici che possono essere resi tramite codice e riprodotti dal vostro browser – dunque con un passaggio di dati minimo (il codice, appunto) da web a dispositivo – le immagini no, quelle vanno scaricate. Esse costituiscono una grande parte della mole di dati che devono essere scaricati da internet sul vostro computer per visualizzare correttamente un sito. Un testo, anche lungo, “pesa” pochissimo rispetto ad una singola immagine.

“Va bene, ma io ho una connessione veloce, qualche kb in più cambia poco”. Nulla di più falso. Immaginatevi alla stazione sul bus, il prossimo giugno. Gioca la nazionale, il vostro capo non vi ha dato nemmeno mezz’ora di permesso e sulla via di casa decidete di navigare da smartphone per leggere le ultime notizie e avere qualche aggiornamento su Prandelli e compagni. Il sito ci mette circa 10 secondi a caricare: pare poco, ma attenderli con lo schermo bianco, ve l’assicuro, è un’eternità. E questa eternità, probabilmente, dipende almeno in parte dalle immagini.

Per darvi un’idea dell’importanza della velocità di caricamento delle pagine vi cito anche una ricerca di Amazon, colosso della vendita online. Da una loro indagine (che trovate, in inglese, a questo link) risulta che un solo secondo di attesa in più nel caricamento di ogni pagina farebbe perdere loro 1 miliardo e 600 milioni di dollari di profitti annui. Non poco, vero? In ambito enterprise si lavora per limare dal peso di una pagina web fino all’ultimo kilobyte, quindi meglio iniziare a lavorare sulle centinaia di kb che una gestione intelligente delle immagini può farci risparmiare.

Prima di tutto, quale formato? Per internet si usano fondamentalmente due formati: il JPG e il PNG. Il secondo formato va scelto esclusivamente se dovete implementare immagini scontornate con un fondo trasparente, in quanto le immagini jpg sono prive del supporto al canale alfa (il canale che indica la trasparenza, appunto). Se non sussiste questa necessità, meglio il jpg: si può lavorare in modo variabile sul grado di compressione dell’immagine e ridurla, in termini di peso in kb, addirittura del 90%.

Se utilizzate la Suite Adobe, ed in particolare Photoshop o Illustrator, saprete che, durante il processo di salvataggio di un file jpg appare una schermata di “Opzioni JPG” o “JPG options” che vi permette di specificare la “Qualità dell’immagine” o “Image quality”. Si tratta in parole povere di stabilire il grado di compressione dell’immagine. Vi viene presentata, in questa sezione, una barra orizzontale in 12 step. Gli step da 0 a 4 corrispondono ad una qualità bassa, da 5 a 7 qualità media, da 8 a 9 alta qualità e da 10 a 12 qualità massima. Sulla destra della barra, spostando il cursore lungo di essa, vedrete l’effetto della qualità dell’immagine sul suo peso. Chiaramente, spostandovi verso il basso della scala, l’immagine perderà molto anche in qualità. Si tratta di trovare un buon compromesso: fate qualche prova. Se invece non avete tempo per sperimentare, ecco il consiglio nato dall’esperienza di Emoote: per internet fissate la barra al livello “8” in caso di immagini medio-grandi, anche da visualizzare a tutta larghezza sul sito (es. fotografia a risoluzione piuttosto alta e con un buon livello di dettaglio). Se invece quella che state esportando è un’immagine molto semplice e dai contorni poco definiti, potete scendere ancora fino al livello “4”, risparmiando ancora qualche kb di dati. Attenzione però: se avete prodotto delle icone personalizzate, magari con contorni molto netti e definiti, allora meglio non lesinare troppo sulla qualità del jpg: la compressione penalizza parecchio linee nette e contorni.

E la risoluzione? Dovreste già saperlo, ma vale la pena ribadirlo qui. Un’immagine per il web (ad eccezione delle immagini da servire agli schermi ad alta risoluzione tipo “retina”, di cui parleremo presto) deve sempre essere prodotta a 72dpi. Utilizzare sul vostro sito un’immagine a 150 o 300dpi è inutile e dannoso. Inutile perché l’immagine apparirà identica alla stessa immagine salvata a 72dpi e dannoso perché il sito, senza differenze visive apprezzabili, si caricherà in un tempo enormemente maggiore. Al link che segue un approfondimento su immagini raster e vettoriali, con un occhio alle risoluzioni per ogni formato.

Infine una raccomandazione che non ha un legame diretto con il peso dell’immagine, ma più con il mezzo che la riproduce (schermo). Producete l’immagine nello spazio colore RGB. In questo modo lo schermo che la riprodurrà per servirla agli utenti del vostro sito o blog avrà le informazioni sul colore codificate nel proprio “linguaggio”, col risultato di una migliorata fedeltà complessiva dell’immagine.

Per oggi è tutto. Buona produzione di grafiche per il web e mi raccomando: dateci dentro con la dieta e occhio al peso!

gilchrestbrunilda@mailxu.com boblak_ute@mailxu.com