Ecco una guida che dice come fare uno sprite CSS da shell con linux, è molto veloce farlo, quasi più comodo di utilizzare servizi web.
Per velocizzare il caricamento di un sito internet quindi la sua velocità la cosa che ha più influenza tra tutte ed anche quella più complicata da fare è ridurre le richieste HTTP, siccome ogni immagine è una richiesta per ridurre le richieste delle immagini si utilizzano gli sprite CSS ovvero si crea una sola immagine che le contiene tutte, seppur esistano tool online come Online CSS Sprite Builder/Generator che permettono di fare sprite css qualcuno, i più esperti lo fanno a mano, se utilizzassero linux dico che farlo da shell è più facile che farlo con programmi di fotoritocco.
Tramite due comandi di shell linux infatti è possibile fare uno sprite di immagini e misurarle, si potrà poi fare manualmente il CSS, normalmente per chi le fa a mano deve prima misurarle, assemblarle con un programma di fotoritocco e poi fare il CSS, è molto più veloce così il lavoro.
Unire le immagini da shell
La prima cosa da fare quindi è unire le immagini, questo lo si fa con il comando "convert" di ImageMagick, lo stesso utilizzato per convertire i PDF in immagini, se come nell'immagine di questo post si hanno 4 immagini PNG per riunirle in una sola immagine chiamata "sprite.png" il comando da dare è:
convert *png -append sprite.png
misurare le immagini da shell
Ora che le immagini sono state unite per poter creare il CSS quindi per posizionarle nel luogo adatto bisogna anche sapere la dimensione delle immagini e dello sprite per vedere se coincidono, tramite il comando "identify" che identifica il formato e le caratteristiche delle immagini in un sol colpo posso misurare tutto, per l'esempio delle 4 immagini, ovviamente sempre dopo che si è posizionati da shell nella directory delle immagini il comando da dare è:
identify *.png
Creare il CSS dello sprite
Immagini unite, la dimensione si sa ora è giunto il momento di fare il CSS, sempre secondo l'esempio i 4 ID CSS delle frecce dello sprite, sapendo che le immagini sono tutte 16X16 pixel potrebbero essere:
#sotto {width: 16px; height: 16px; background: url(sprite.png) 0 0;}
#sinistra {width: 16px; height: 16px; background: url(sprite.png) 0 -16px;}
#destra {width: 16px; height: 16px; background: url(sprite.png) 0 -32px;}
#sopra {width: 16px; height: 16px; background: url(sprite.png) 0 -48px;}
Ora, se si vuole inserire nella pagina web l'immagine contenuta nello sprite CSS della freccia a destra basterà aggiungere il codice <img id="destra" src="PATH-ASSOLUTA/sprite.png"/>.
Anche se mi sono dilungato perchè ho voluto dire tutti i passaggi necessari che permettono di creare sprite CSS, anche se non centra molto con la shell, ed anche se non è comprensibile da tutti perchè è un argomento un po difficile/specifico mi sembra di averlo spiegato bene, spero vi sia utile!