Creare sprite CSS in base al colore?

Question

Ho una grande serie di miniature che desidero visualizzare su una pagina (oltre 200). Vorrei utilizzare gli sprite CSS per caricarli per ridurre al minimo le richieste HTTP. Penso che metterli tutti in un unico file di grandi dimensioni sia una cattiva idea, ma dividerli in circa 6 file di 40-50 anteprime dovrebbe funzionare bene.

Tutte le anteprime sono di colore abbastanza basso (possono essere ridotte a 256 colori senza perdita di qualità), ma in totale tutte le anteprime coprono molti più colori.

Quindi, c'è un modo semplice per raggrupparli in base al loro colore? Mettere ogni gruppo di file in una cartella separata va bene, dal momento che posso ricucire ImageMagick o uno strumento di sprite online in seguito. Ma fare tutto questo in uno (con CSS) sarebbe anche bello.

Aggiornamento: il motivo del raggruppamento per colore:
L'idea è di risparmiare più larghezza di banda. Se ho 10 miniature prevalentemente blu, 10 verdi e 10 rosse, posso combinarle in 3 immagini, riducendole a 256 colori. Se mescolo le miniature, ridurre a 256 colori rende le immagini di qualità scadente.

Answer 1

Beh, ho fatto alcuni test prendendo a mano un campione di una "tinta" e confrontandolo con un montaggio creato semplicemente prendendo le prime N immagini. C'era solo una differenza di pochi kilobyte, che è stata ridotta a circa 30 byte dopo che ho trovato PNGcrush . Strumento fanastico!

Quindi, in breve, la mia idea di crackpot è stata smentita. : P

Answer 2

In primo luogo, suggerirei di non preoccuparti troppo e di salvare come png a 24 bit. Può sembrare che l'immagine stia diventando molto più grande facendo questo, ma se le miniature sono piccole probabilmente scoprirai che c'è una grande quantità di larghezza di banda attualmente in uso con solo le intestazioni http che andranno via che puoi usare per rendere le tue immagini migliori.

Tuttavia, se vuoi automatizzare il processo potresti provare a elaborare il colore medio (un modo per fare qualcosa di simile a questo è ridimensionarlo a 1x1, quindi guarda il colore rgb per quel pixel). Una volta che hai un colore per immagini, converti in hsv e ordina per tonalità. È quindi possibile raggrupparli in base a tale ordinamento. In realtà non l'ho provato, ma potrebbe produrre risultati accettabili.

La regolazione del numero di immagini raggruppate influirà anche sulla qualità dell'output. Se fa schifo quando inserisci 30 immagini per file, prova 25 e vedi quanta differenza fa. In realtà, potrebbe essere più intelligente pensare al numero di file ...

• Mettili tutti in un unico file.
• Sembra male, perché non ci sono abbastanza colori?
• aggiungi un altro file e suddividilo equamente tra tutti i file. Vai al passaggio 2.

Answer 3

Ora, questo non è altro che il blabbering teorico, ma capisco che le GIF animate supportano una tavolozza di colori distinta per frame. Teoricamente, è possibile posizionare ciascuna immagine su un fotogramma separato dell'animazione (lasciando la maggior parte di quel fotogramma trasparente) e impostare il tempo di pausa tra i fotogrammi su 1 ms. Imposta l'animazione affinché venga eseguita una sola volta e potresti (potenzialmente) avere un efficace sprite CSS con una riduzione di 256 colori per immagine.

Come ho detto, teorica blabbering.