Criar CSS sprites com base na cor?

Question

Eu tenho um grande conjunto de miniaturas gostaria de exibição em uma página (mais de 200). Eu gostaria de usar sprites CSS para carregá-los para minimizar as solicitações HTTP. Eu acho que colocar todos eles em um arquivo enorme é uma má idéia, mas dividi-los em cerca de 6 arquivos de 40-50 miniaturas deve funcionar muito bem.

Todas as miniaturas são bastante baixas cor (pode ser reduzida para 256 cores sem queda de qualidade), mas, no total, todas as miniaturas cobrir um lote mais cores.

Assim, há uma maneira fácil de agrupá-los com base em sua cor? Colocando cada grupo de arquivos na pasta separada é bom, desde que eu posso unir com ImageMagick ou uma ferramenta Sprite on-line mais tarde. Mas fazer tudo isso em um (com CSS) seria muito bom.

Update: a razão para agrupar por cor:
A idéia é economizar mais largura de banda. Se eu tiver 10 miniaturas principalmente-azuis, 10 verdes e 10 vermelho, posso combiná-los para 3 imagens, reduzindo cada um a 256 cores. Se eu misturar miniaturas em seguida, reduzindo para 256 cores faz com que a qualidade das imagens mais pobres.

Answer 1

Bem, eu fiz alguns testes, agarrando uma amostra pela mão de um "tom" e comparando-a com uma montagem criada por apenas tomando as primeiras imagens N. Houve apenas uma diferença de alguns kilobytes, a qual foi reduzida para cerca de 30 bytes após I encontrado pngcrush . ferramenta fantástico!

Assim, em breve, a minha idéia maluca foi refutada. : P

Answer 2

Em primeiro lugar, gostaria de sugerir não se preocupar muito, e salvar como um png de 24 bits. Pode parecer que a imagem está ficando muito maior, fazendo isso, mas se as miniaturas são pequenas você provavelmente vai descobrir que existe uma grande quantidade de largura de banda actualmente a ser usando com apenas http cabeçalhos que vai embora que você pode usar para fazer as suas imagens olhar melhor.

No entanto, se você quiser automatizar o processo, você pode tentar trabalhar para fora a cor média (uma maneira de fazer algo parecido com isso é para redimensioná-las para 1x1, em seguida, olhar para a cor RGB para esse pixel). Uma vez que você tem uma cor por imagens, converter para o HSV e classificar por matiz. Você pode, em seguida, empacotá-los com base nessa ordem de classificação. Eu não tenho realmente tentei isso, mas poderá produzir resultados aceitáveis.

Ajustar o número de imagens que são empacotados também irá afetar a qualidade da saída. Se é chato quando você põe 30 imagens por arquivo, tente 25 e ver o quanto diferença que faz. Na verdade, pode ser mais inteligente para pensar sobre o número de arquivos ...

• Colocá-los todos em um único arquivo.
• Será que isso parece ruim, como não há cores suficientes?
• adicionar um arquivo extra e dividi-los igualmente entre todos os arquivos. Goto passo 2.

Answer 3

Agora, isso não é nada mais do que verborragia teórico, mas, eu entendo que GIFs animados têm suporte para uma paleta de cores distintas por quadro. Teoricamente, você poderia colocar cada imagem em uma moldura separada da animação (deixando a maior parte desse quadro transparente), e definir o tempo de pausa entre os quadros para 1ms. Definir a animação apenas passar por uma vez, e você poderia (potencialmente) tem um sprite de CSS eficaz com reduzida para 256 cores por imagem.

Como eu disse, verborragia teórica.