Ottimizzazione, compressione e uso intelligente delle immagini

regole-seo — Mon, 22 Mar 2010 22:29:12 +0000

Vai all’ indice degli articoli » Velocità e SEO

Nell’articolo precedente riguardante le tecniche di base per aumentare la velocità di un sito, abbiamo visto che un primo importante passo per diminuire i tempi di caricamento di un sito è rappresentato dalla realizzazione di codice pulito, contenuti leggeri e dallo sfruttamento della cache del browser per memorizzare gli script e le informazioni di stile in modo che queste non debbano essere scaricate dal browser ad ogni accesso successivo.

In questo articolo vediamo un altro aspetto di base molto importante per la velocità di un sito. Si tratta dell’ottimizzazione, della compressione e dell’uso intelligente delle immagini.

Lo scopo non vuole essere quello di dare una spiegazione dettagliata e approfondita dei vari formati per le immagini e dei vari algoritmi di compressione. Piuttosto vuole essere una breve raccolta di tutti quegli aspetti a cui ognuno dovrebbe porre attenzione nell’ambito dell’utilizzo delle immagini in una pagina web.
A fine articolo ho allegato anche un tutorial realizzato da Sara Gioria, grafica web e illustratrice, per la realizzazione di immagini “ombreggiate”, una delle tante tecniche usate dai grafici esperti per abbattere i tempi di caricamento delle immagini con effetti particolari sfruttando la potenza dei CSS.

Ecco le cose che occorre sempre tenere in cosiderazione:

Non esagerare con le immagini

E’ vero. Spesso una bella immagine può trasformare un sito da niente in un gioiellino, almeno in termini di impatto visivo.
Al di là di questo però attenti a non esagerare con le immagini, soprattutto quando il loro uso è al puro scopo di formattazione. Sarebbe sempre opportuno chiedersi se effettivamente tutte le immagini usate sono necessarie. Molti effetti spesso realizzati tramite l’ausilio di immagini possono infatti essere realizzati con i CSS, diminuendo così il peso della pagina in favore della velocità di caricamento.

Attributi Height e Width

Quando una pagina viene caricata e gli attributi “height” e “width” del tag relativo ad un’immagine sono definiti nel codice, il browser è già a conoscenza di come i vari contenuti dovranno essere visualizzati, ancora prima che l’immagine venga caricata.
In caso contrario potremo avere dei rallentamenti dovuti al fatto che, una volta terminato il download dell’immagine, il browser deve riposizionare i contenuti sulla base dell’effettivo spazio occupato dall’immagine.
Anche se in questi casi ciò che realmente succede dipende molto anche dal tipo di browser utilizzato, il consiglio è quello di inserire sempre questi due attributi.

Le dimensioni effettive delle immagini dovrebbero essere sempre coerenti con gli attributi “height” e “width” del tag che verrà usato per rappresentarle nella pagina web.
Nel caso in cui altezza e larghezza dell’immagine siano inferiori a quelle inserite negli attributi “height” e “width” otterremmo un effetto “sgranato” dovuto al fatto che l’immagine viene ingrandita oltre le sue naturali dimensioni dal browser, durante la renderizzazione.
Nel caso in cui invece altezza e larghezza dell’immagine siano superiori a quelle inserite negli attributi “height” e “width” allora sicuramente le prestazioni ne risentirebbero in quanto l’immagine sarà più grande del necessario e realizzata con un numero di punti superiori al dovuto. Chiaramente più punti significa più byte da scaricare.

Formato delle immagini (gif, jpg o png)

La scelta del formato dell’immagine è sicuramente un aspetto importante. Il formato sbagliato può incidere molto negativamente sul livello di compressione utilizzabile e di conseguenza sulla pesantezza dell’immagine e la velocità di caricamento.

In generale il formato gif permette di ottenere prestazioni migliori per immagini con poche sfumature. E’ dunque poco indicato per fotografie ad esempio.
Il tipo di compressione usato nel caso di una gif si basa sul numero di colori utilizzati (fino ad un massimo di 256). Più colori utilizziamo più il peso dell’immagine aumenterà.
Un vantaggio del formato gif è anche quello di supportare la trasparenza.
Per informazioni dettagliate sul formato gif seguite il seguente link: Graphics Interchange Format

Il formato jpeg è invece più indicato per immagini fotografiche o comunque con tanti colori e sfumature diverse. Per queste immagini il formato gif difficilmente ci permetterebbe di ottenere un risultato soddisfacente. Il formato jpeg, che diversamente da gif applica una compressione con perdita dell’informazione, può invece permetterci di ottenere risultati soddisfacenti in questi casi. Più il livello di compressione adottato sarà elevato, più l’immagine perderà di qualità diminuendo però di peso.
Maggiori informazioni sul formato jpeg sono disponiblili al seguente link: Joint Photographic Experts Group

Il formato png ha il vantaggio di effettuare una compressione dell’immagine senza perdita di informazioni, come avviene per il formato gif, ma senza le limitazioni di quest’ultimo.
In breve, questo significa che le dimensioni del file diminuiscono, ma la qualità dell’immagine resta ottima anche nel caso in cui si tratti di un’immagine con molti colori. Inoltre il formato png supporta la trasparenza e la semitrasparenza. Purtroppo però a oggi non ancora tutti i browser supportano la trasparenza delle png (come ad esempio le versioni di internet explorer precedenti alla 7).
Per maggiori informazioni sul formato png seguite il seguente link: Portable Network Graphics

In genere il miglior modo per determinare il migliore formato da utilizzare è quello di effettuare delle prove per capire quale dei tre formati permette di raggiungere il migliore compromesso tra qualità desiderata e dimensioni del file ottenuto.

Compressione delle immagini

La compressione delle immagini è importante in quanto può incidere molto sulla velocità di caricamento.
I formati generalmente utilizzati per il web (sopra descritti) forniscono diversi livelli di compressione che possono permetterci di trovare la migliore soluzione in quanto a qualità e peso dell’immagine.
Esistono molti strumenti gratuiti anche on-line che permettono di ottenere rapidamente la compressione di un’immagine.
Online Image Optimizer ad esempio permette di comprimere un’immagine usando il formato gif, formato png o jpeg. E’ in grado di mantenere la trasparenza e le animazioni dei file gif e può mostrare i risultati a diversi livelli di compressione.

Usare i trucchi dell’esperto

Oltre a questi accorgimenti che tutti dovrebbero adottare esistono anche tecniche più avanzate. Veri e propri trucchi del mestiere che permettono di ottenere buoni effetti e alta qualità abbattendo la quantità di byte del file di immagine.
Per capirci meglio farò un esempio basato proprio su una tecnica usata in regole-seo.
Le immagini presenti all’inizio di ogni articolo possiedono un effetto ombra. Un effetto ombra rappresenta una sfumatura la cui quantità di livelli di trasparenza, sommata alla quantità di colori richiesti dall’immagine stessa da rappresentare, rende inutilizzabile il formato gif.
L’utilizzo di un’immagine ombreggiata nel formato jpeg non è realizzabile perché non viene supportata la trasparenza. Per finire il formato png è invece una soluzione ottima in termini qualitativi ma che spesso porta a ottenere immagini più pesanti rispetto ai formati precedenti.
Un bel guaio insomma!

La tecnica adottata è stata allora quella di separare l’effetto ombreggiato dall’immagine stessa, salvando ombra e immagine in due file diversi.
In questo modo un file png contenente l’ombreggiatura viene applicato come sfondo al tag

destinato a contenere l’immagine, mentre l’immagine viene salvata indipendentemente e, grazie al fatto che non deve contenere le informazioni relative all’ombreggiatura, il suo peso è sicuramente inferiore.
Inoltre poiché tutte le immagini degli articoli sono costruite in questo modo, il file dell’ombra che è sempre lo stesso per tutti gli articoli viene scaricato dal browser solo al primo accesso e memorizzato in cache per gli accessi successivi.
Anche se il guadagno effettivo ottenuto dipende dall’immagine usata per l’articolo vi faccio un esempio del vantaggio ottenuto sull’immagine usata nell’articolo “Velocità e SEO“:
File immagine unico con ombreggiatura:
- un file png con dimensioni 96 KB
Due file separati per l’ombreggiatura e immagine dell’articolo:
- un file png per l’ombreggiatura con dimensioni 1KB scaricato solo al primo accesso
- un file jpeg per l’immagine dell’articolo con dimensione 21 KB.
Insomma le dimensioni sono state abbattute di tre quarti!

Nel link seguente potrete trovare un tutorial che spiega in maniera più dettagliata come ottenere l’effetto ombra sopra descritto. Il tutorial è stato realizzato da Sara Gioria che si occupa da anni di grafica web e illustrazione e che colgo l’occasione per ringraziare.

Esistono moltissime altre tecniche per abbattere i tempi di caricamento delle immagini.
Un’altra molto interessante, anche se più complessa da realizzare, è la tecnica degli sprite CSS usata anche da Google.
Seguendo il link CSS sprite troverete molte informazioni utili su questa tecnica.