Cos'e uno sprite CSS
Uno sprite CSS e un'immagine singola che contiene molte icone o piccole grafiche affiancate. Via CSS background-position si visualizza solo la porzione desiderata. Permette di scaricare una sola immagine invece di N, riducendo drasticamente il numero di richieste HTTP.
Quando aveva senso
Negli anni 2000-2015 con HTTP/1.1 ogni richiesta aveva overhead alto: connection setup, latency, limiti di connessioni parallele (6 per host). Sprite era ottimizzazione standard per icone navigation, social buttons, status indicators. Riduceva il numero di richieste da 50 a 1.
HTTP/2 e HTTP/3 cambiano tutto
Con HTTP/2 multiplexing, multiple richieste viaggiano sulla stessa connessione TCP/QUIC senza penalita. Header compression, stream prioritization. Il vantaggio dello sprite diventa minimo e i contro (caricamento di icone non visibili, difficoltà di update) emergono. SVG sprite e font icon offrono alternative migliori.
SVG sprite: alternativa moderna
Un singolo file SVG con tag symbol per ogni icona. Riferimento HTML: svg use href="#icon-name"/svg. Vantaggi: vettoriale (perfetto retina), inline (cacheable, immediato), colorabile con CSS fill, accessibile con ARIA. Build tool: svg-sprite, gulp-svg-sprite, vite-plugin-svg-icons.
Icon font: pro e contro
Font come Font Awesome, Material Icons forniscono icone come glifi. Pro: vettoriale, colorabile con CSS color, semplice da usare. Contro: FOUT/FOIT, accessibilità scarsa (icone non semantiche), download del font intero. Considera solo subset del font o icone inline SVG.
Quando usare oggi gli sprite
CSS sprite tradizionale ha ancora senso in casi specifici: animazioni sprite per CSS animation (steps()), gaming HTML5 (sprite sheet per character), background pattern. Per UI icone, preferisci SVG inline o sprite SVG.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.