Gli sprite delle immagini CSS ti consentono di ridurre drasticamente il numero di richieste HTTP su un sito combinando molte o tutte le immagini del tuo sito in un singolo file. Questo file può quindi essere utilizzato insieme al posizionamento di sfondo CSS per implementare le singole immagini.
Il rovescio della medaglia di questa tecnica è che è un processo scrupoloso e complicato che richiede di combinare manualmente le immagini e giocare con il CSS per far sì che ciascuna immagine venga visualizzata correttamente. Fortunatamente, ci sono una serie di strumenti online gratuiti che automatizzano completamente questo processo. Oggi abbiamo una fantastica collezione di dodici di questi strumenti, ciascuno con la sua personale interpretazione del processo di generazione degli sprite. Sia che tu stia cercando di creare uno sprite da una cartella di immagini o convertire un sito esistente, abbiamo gli strumenti per aiutarti a portare a termine il lavoro in pochi secondi.
Generatore di sprite CSS: Project Fondue
Un buon generatore con un sacco di opzioni. Carica un .ZIP di tutte le immagini che desideri trasformare in uno sprite e si occupa del resto. Sputa un'immagine e tutte le varie? Background-position? valori di cui hai bisogno.
Generatore CSS Sprites
Brutto e buggy, questo generatore di sprite ti costringe a caricare ogni immagine individualmente. Provalo per vedere cosa ne pensi, ma onestamente, ci sono alternative migliori su questa lista.
CSS Sprites - Online CSS Sprite Builder / Generator
Questo è molto carino Puoi facilmente caricare un po 'di immagini contemporaneamente, scegliere il tuo tipo di output e persino scegliere di ottenere sia il codice Sass che il codice CSS come risultato. Ci sono anche alcune opzioni per generare automaticamente effetti al passaggio del mouse come desaturati e capovolti. Nel complesso abbastanza impressionante, assicurati di dare un'occhiata.
Spritebox - Crea CSS da Sprite Images
Questo prende un percorso diverso, leggermente meno automatizzato. Invece di creare un'immagine sprite per te, ti permette di caricare il tuo sprite già creato e definire aree specifiche per generare il CSS risultante. Un ottimo strumento se preferisci creare sprite in Photoshop e vuoi solo aiuto con il codice.
Tela: CSS Sprites Generator
Se stai caricando le immagini per questo, devi farlo uno alla volta, il che è un po 'un problema. Se hai dei collegamenti, puoi semplicemente incollare un elenco con nomi di classi corrispondenti e sei a posto. Le opzioni includono padding e colori di sfondo. Ha funzionato bene nei miei test, sicuramente vale la pena dare un'occhiata.
Punti: un generatore di fogli sprite HTML5
Questo ti permette di trascinare le immagini, il che è fantastico dopo aver usato tutti gli scaricatori imbarazzanti che altri sviluppatori hanno creato. Dopodiché puoi semplicemente fare clic su un pulsante per ottenere l'immagine e un'altra per prendere il CSS. Non ci sono praticamente opzioni e funziona solo su Chrome e Firefox, ma è perfetto se vuoi solo una soluzione rapida e semplice.
Spritemapper
Questo è solo per super nerd, è un generatore di sprite scaricabile che si esegue dalla riga di comando. L'implementazione è davvero liscia, basta puntarla sul file CSS esistente e fa il resto del lavoro. Ciò rende il problema della gestione degli sprite a lungo termine un gioco da ragazzi, in quanto puoi semplicemente aggrapparti ai file originali di css e di immagine e rielaborarli quando c'è un cambiamento.
SpriteMe
SpriteMe è uno strumento fantastico che ti consente di mantenere intatto il tipico processo di sviluppo. Costruisci la tua pagina come faresti normalmente con le singole immagini. Quindi, una volta terminato, apri la pagina in un browser e premi il bookmarklet SpriteMe. Questo afferra tutte le immagini sulla pagina, crea uno sprite e genera il CSS. Questo è particolarmente utile se stai convertendo un sito in uscita.
Spritefy
Spritefy è un'altra opzione che ti permette semplicemente di trascinare un mucchio di file nel browser per elaborarli. Come con Stitches, non ci sono davvero opzioni, ma è sicuramente un modo super veloce per essere operativi con sprites (solo Chrome e Firefox).
CSS Sprite Generator
Questo ha alcuni passaggi non necessari nel processo di generazione e configurazione, quindi richiede alcuni secondi in più rispetto alla maggior parte delle altre alternative, ma ha una tonnellata di output di codice che include sia CSS che HTML insieme a vari frammenti per aggiungere ogni immagine a un div o span, inserendo collegamenti, ecc.
SpriteMeister - Automatic CSS Sprite Generator
SpriteMeister è molto simile a SpriteMe sopra, solo meno automatizzato. Anziché utilizzare un bookmarklet, carichi manualmente ogni immagine e il tuo file CSS corrente e ricevi un download con codice aggiornato e una singola immagine.
Sprite Creator 2.0
Questo funziona proprio come Spritebox sopra. Carichi l'immagine sprite che hai creato altrove e usa un semplice processo di selezione per generare automaticamente il CSS appropriato per ogni immagine.
Lo adoro? Condividilo!
Se ti è piaciuta la collezione di omaggi di questa settimana, condividi l'amore e invia un link sui tuoi siti preferiti. Ecco un comodo snippet da copiare e incollare come ti pare!
12 generatori di sprite CSS gratuiti: http://goo.gl/NhLNR