Consigli su Sprite(s) CSS

[giova95]

Ciao a tutti.
Ho aperto questo topic per chiedervi dei consigli su come strutturare lo/gli sprite(s).
Il sito è quello in firma(pc-zone.it), come potete verificare già solo nella home le immagini sono veramente molte.
Quello che mi chiedo è se conviene fare un solo sprite che le contenga tutte oppure farne per esempio 2 o 3 dividendo magari in base al tipo di immagini contenute?
Facendone solo uno questo diventerebbe abbastanza "grosso".
Diciamo che mi sono risposto in parte da solo guardando lo sprite di questo sito.

Però quello che mi chiedo è cosa convenga considerando tutti i campi:
- se lo sprite è unico e pesante il browser deve caricarlo tutto prima che venga visualizzato il contenuto grafico sullo schermo
- difficoltà di gestione dei codici
- numero di richieste http al server
- se voglio cambiare qualche parte grafica mi tocca rimettere mano allo sprite intero
- ecc

La domanda è generale in realtà, perchè per il mio sito devo tenere conto anche de fatto che comunque sono obbligato ad utilizzare minimo 2 sprite, perchè tutti gli sfondi sono gestiti con immagini di 1px di larghezza con repeat-x e quindi queste immagini devono rimanere in uno sprite a parte di larghezza 1px.

Colgo l'occasione per dire che il sito è stato aperto meno di 1 mese fa e siccome sono ancora in piena amministrazione se avete consigli di qualsiasi tipo proponeteli che sono ancora in tempo per pensarci e cambiare

Grazie,
Mirko

[Ken90]

Allora... Per prima cosa ti consiglio (a differenza di molti) di non usare siti che fanno sprites in automatico perché in questo caso a farteli da soli ti conviene. Seconda cosa, dato che, come dici tu si parla di immagini grandi, devi considerare quante richieste massimo a pagina dovrai fare, indi per cui se magari in una pagina ci sono quelle immagini fai uno sprite con tutte quelle immagini che poi non andrai a caricare in un'altra pagina potendo. Ovviamente le immagini non vanno raggruppate per categoria ma per pagina. Poi ovviamente meno immagini carichi meglio è, quindi ti conviene fare sprites, anche se grossi, ma più unici possibile.
Per il fatto delle immagini di background che si ripetono, come dici tu, ti tocca fare un secondo sprites di un pixel probabilmente in cui le immagini vanno ripetute in orizzontale (e magari anche uno per le immagini ripetute in verticale se ti serve anche quello.
Meglio un'immagine grossa di tante immagini piccole, posto che la somma delle immagini piccole sia simile all'immagine grande. Pure che lasci un po' di buchi trasparenti nello sprites non fa niente. Magari cerca di lasciarne il meno possibile.

Un consiglio, lascia 1/2 pixel di distanza tra le immagini perché, nel caso l'utente vada a zoomare la pagina (cosa che spesso capita spesso anche solo per errore), ti si sforma tutto in maniera incredibile.

[giova95]

Si si, lo sprite lo faccio io anche perchè almeno mi posiziono le immagini come voglio.. non è poi una cosa così complessa. Si può fare anche con paint ^^' (però è più comodo ps )
Giusto... a differenziare gli sprite per pagina non ci avevo pensato In ogni caso non penso che io possa farlo.. tranne che per la homepage nella quale ci sono tutte le immagini per le varie sezioni del forum (e devo capire come utilizzare lo sprite in quel punto... perchè utilizzando phpbb non è così facile implementarlo)

Dici che si scombussola così tanto? credo succeda solo se sono impostate in percentuale e/o male le regole css, perchè se devo far visualizzare un'immagine dello sprite, larga 20x20, imposto un blocco largo 20x20 e quando l'utente zoomma viene ingrandito tutto.
In ogni caso terrò a mente il tuo consiglio

Grazie