Immagini Sprite vs Icon Font: vantaggi e svantaggi

immagini sprite vs icon font

Immagini Sprite vs Icon Font, cosa bisogna usare nei propri progetti?

Molti oggi utilizzano le Immagini Sprite altri gli Icon Font, aiutano ad aggiungere un tocco grafico al tuo sito web, ma contribuiscono a diminuire i tempi di caricamento del sito stesso. Tutto questo è fantastico, ma non si deve utilizzare una o l’altra soluzione senza prima sapere i vantaggi e gli svantaggi dell’una o dell’altra.

Immagini Sprite

Le Immagini Sprites  consentono di confezionare un gran numero di immagini complesse in una sola. Esse possono essere di qualsiasi colore, forma o dimensione.

Immagini Sprite: vantaggi

Probabilmente il più grande vantaggio quando si utilizza un’Immagine Sprite è la complessità delle immagini che è possibile includere. Questo è sicuramente un chiaro vantaggio rispetto agli Icon Font, essi sono molto semplici e possono essere di un solo colore. Le Immagini Sprite sono invece una grande collezione di singole immagini.

Un’Immagine Sprite può adattarsi con molte immagini, volendo ci potrebbero essere centinaia di immagini in una sprite, ma non consiglierei di fare una cosa del genere. Se avete bisogno di più di 50 immagini in una sprite probabilmente dovreste riconsiderare la progettazione.

Infine, e questo vale per entrambi sia per le Immagini Sprite sia per gli Icon Font, è che riducono il numero di richieste HTTP della tua pagina web. Meno richieste http contribuiscono ad aumentare la velocità di caricamento del tuo sito web. Siti web veloce = felici gli utenti.

Quindi, ecco un elenco di vantaggi adottando le Immagini Sprite:

  • Forme complesse e molteplici colori
  • Montare una grande quantità di immagini
  • Meno richieste HTTP
  • Cross browser compatibile

Immagini Sprite: svantaggi

Come ogni soluzione ci sono alcuni svantaggi. Le Immagini Sprite possono essere di grandi dimensioni, dal momento che sono di solito un png, ma non di molto. Se ciò si verifica si dovrà aspettare un poco per caricare l’intera Sprite, ciò spesso causa un’attesa che si nota. Ciò è sicuramente compensato dal risparmio in tempi di caricamento generale che se dovessimo caricare ogni singola immagine. Se questa cosa però si nota molto ed è fastidiosa, si potrebbe provare a nascondere la pagina fino a quando non vengono caricate tutte le immagini, ma dipende sempre dal prodotto che si vuole mostrare, con un’Immagine Sprite di medie dimensione il tempo di caricamento nemmeno si nota.

Se si stanno creando immagini sprite a mano sono dolori per cambiarle ogni volta. Se si effettua una semplice modifica all’altezza di una delle immagini nella vostra Sprite, si dovrà andare nella Sprite e sostituire l’immagine, forse riorganizzare la vostra Sprite, e poi eventualmente aggiungere e modificare il CSS. Questo può influire in termini di tempo di lavoro se le immagini cambiano rapidamente o si è bloccati con un progettista indeciso. Tutto questo può essere evitato utilizzando gli strumenti che generano immagini sprite per voi come Grunt.

Le Immagini Sprite possono aggiungere un po di CSS, questo è un male necessario, ma deve essere fatto perché altrimenti non potremmo posizionare correttamente le nostre immagini! Ho avuto alcune sprite un pochino grandi che mi hanno fatto aggiungere fino a 100 righe di CSS, ma questo di solito è il male minore poiché il testo è sempre più leggero di un’immagine. Una buona soluzione è quella di avere una classe a cui applicare il background-image, e poi un’altra classe a cui applicare il background-position.

.sprite {
	background: url(pathtoimage/sprite.png) no-repeat;
}
.image-1 {
	background-position: -120px 0;
	width: 40px; height: 40px;
}
.image-2 {
	background-position: -120px -40px;
	width: 40px; height: 40px;
}

Ecco la lista degli svantaggi delle Immagini Sprite:

  • Leggermente più grande in termini di dimensioni
  • Difficile da cambiare (se fatto a mano)
  • Non è responsive
  • Impossibile usare come pattern

Icon Font

Gli Icon Font sono una meravigliosa aggiunta al set degli strumenti di sviluppatori web.
Qui di seguito ci sono alcuni vantaggi e svantaggi degli Icon Font.

Icon Font: vantaggi

Gli Icon Font Web sono di dimensioni molto ridotte rispetto alle immagini. Sono come qualsiasi altro file di font, solo un insieme di vettori. Usare la cosa più leggera è sempre la cosa migliore quando si cerca di migliorare le prestazioni del proprio sito.

Dal momento che gli Icon Font sono niente altro altro che font, è possibile cambiare il colore con poche linee di CSS.
È molto facile controllare una icona come un carattere. Applicare gli effetti Hover con i CSS sono un gioco da ragazzi.
Se siete alla ricerca di un effetto migliore si potrebbe anche aggiungere un pò di ombra con la proprietà text-shadow.

@font-face {
	font-family: 'iconfont';
	src:url('fonts/iconfont.eot');
	src:url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/iconfont.woff') format('woff'),
		url('fonts/iconfont.ttf') format('truetype'),
		url('fonts/iconfont.svg#tetzlaff') format('svg');
	font-weight: normal;
	font-style: normal;
}

Gli Icon Font sono cross browser, non vi è alcun bisogno di preoccuparsi per la compatibilità.

Se avete i formati corretti dei file (EOT, ttf, WOFF e SVG) poteti usarli come qualsiasi altro tipo di carattere con @font-face.
Se non si dispone di tutti i formati necessari, potete usare Font-Squirrels font-face generator per generare i formati che non avete.

Uno dei più grandi vantaggi degli Icon Font è che essi non si vedranno pixellati su uno schermo retina.
I vettori vengono mostrati in maniera pulita e corretta a qualsiasi grandezza e su quasiasi schermo.

Prova alcuni dei miei generatori di Icon Font preferiti:

Ecco la mia lista dei vantaggi degli Icon Font:

  • Piccole dimensioni
  • Densità di pixel indipendente
  • Facilità di modificare le dimensioni e il colore
  • Meno Richieste HTTP
  • Cross browser compatibile

Icon Font: svantaggi

Dal momento che gli Icon Font sono dei vettori sono semplici e non possono essere molto complesse.
Questo è il motivo per cui sono utilizzati principalmente solo per le icone. Se volete più colori, effetti e sfumature, è meglio usare le Immagini Sprite.

Ecco la lista completa degli svantaggi degli Icon Font:

  • Non può essere molto complesso, la maggior partedelle volte sono utilizzati per le icone
  • Solo di un colore solo

Immagini Sprite o Icon Font quale scegliere?

Scegliere quale di questi strumenti utilizzare dipende dalla situazione in cui ci si trova.

Se si desidera che le immagini siano molto dettagliate, e non solo semplici icone,
allora è meglio creare un’ Immagine Sprite.

In caso contrario, per le icone semplici, un Icon Font ha un sacco di vantaggi.

Essi sono particolarmente utili per i dispositivi mobili dove le icone svolgono un ruolo molto molto importante nella maggior parte dei disegni.

A volte la migliore soluzione non è solo quello di scegliere uno o l’altro, ma di integrare sia l’uno sia l’altro nel tuo sito web e usare le Immagini Sprite o Gli Icon Font a seconda di quello che vi serve.