Generatore CSS Sprite
Generatore CSS sprite gratuito online
Cos'è uno sprite CSS?
Uno sprite CSS combina più immagini piccole in un unico file immagine (sprite sheet). La proprietà CSS background-position viene poi usata per visualizzare singole immagini dal file combinato. Questo riduce il numero di richieste HTTP, migliorando le prestazioni di caricamento della pagina.
Come creare uno sprite CSS
Carica più immagini. Scegli un layout (orizzontale, verticale o griglia). Lo strumento le combina in un unico sprite sheet e genera il CSS con i valori background-position per ogni immagine.
▶Gli sprite CSS sono ancora utili?
Con il multiplexing HTTP/2, il beneficio prestazionale degli sprite è diminuito. Tuttavia, gli sprite aiutano ancora quando si servono molte icone minuscole o quando si usano sistemi di icone che necessitano di caching su singolo file.
▶Qual è il miglior layout per gli sprite?
Il layout orizzontale è compatto per poche immagini. Il layout a griglia funziona bene per molte icone di dimensioni simili. Il layout verticale è utile quando tutte le immagini hanno la stessa larghezza.
▶Come uso il CSS generato?
Il CSS usa background-image sullo sprite sheet e background-position per ogni icona. Applica le classi generate ai tuoi elementi HTML.