¿Crear sprites CSS basados ??en el color?

Question

Tengo un gran conjunto de miniaturas que deseo mostrar en una página (más de 200). Me gustaría usar sprites CSS para cargarlos para minimizar las solicitudes HTTP. Creo que ponerlos todos en un archivo masivo es una mala idea, pero dividirlos en aproximadamente 6 archivos de 40-50 miniaturas debería funcionar bien.

Todas las miniaturas tienen un color bastante bajo (se puede reducir a 256 colores sin pérdida de calidad), pero en total todas las miniaturas cubren muchos más colores.

Entonces, ¿hay una manera fácil de agruparlos según su color? Poner cada grupo de archivos en una carpeta separada está bien, ya que puedo unirlos más tarde con ImageMagick o una herramienta de sprites en línea. Pero hacer todo eso en uno (con CSS) también sería bueno.

Actualización: el motivo de la agrupación por color:
La idea es ahorrar más ancho de banda. Si tengo 10 miniaturas en su mayoría azules, 10 verdes y 10 rojas, puedo combinarlas en 3 imágenes, reduciendo cada una a 256 colores. Si mezclo miniaturas, la reducción a 256 colores hace que las imágenes sean de peor calidad.

Answer 1

Bueno, hice algunas pruebas al tomar una muestra a mano de un '' tinte '' y compararlo con un montaje creado simplemente tomando las primeras N imágenes. Solo hubo una diferencia de unos pocos kilobytes, que se redujo a unos 30 bytes después de encontrar PNGcrush . Herramienta fanática!

Entonces, en resumen, mi idea descabellada ha sido refutada. : p

Answer 2

En primer lugar, sugeriría no preocuparse demasiado y guardar como un png de 24 bits. Puede parecer que la imagen se está volviendo mucho más grande al hacer esto, pero si las miniaturas son pequeñas, probablemente encontrará que hay una gran cantidad de ancho de banda que se está usando actualmente con solo encabezados http que desaparecerán y que puede usar para haz que tus imágenes se vean mejor.

Sin embargo, si desea automatizar el proceso, puede intentar calcular el color promedio (una forma de hacer algo parecido a esto es redimensionarlos a 1x1, luego observe el color rgb para ese píxel). Una vez que tenga un color por imagen, conviértalo a hsv y ordene por tono. Luego puede agruparlos según ese orden de clasificación. En realidad no he intentado esto, pero puede producir resultados aceptables.

El ajuste de la cantidad de imágenes que se agrupan también afectará la calidad de salida. Si apesta cuando coloca 30 imágenes por archivo, intente 25 y vea cuánta diferencia hace. En realidad, podría ser más inteligente pensar en la cantidad de archivos ...

• Póngalos todos en un solo archivo.
• ¿Se ve mal, ya que no hay suficientes colores?
• agregue un archivo adicional y divídalos por igual en todos los archivos. Ir al paso 2.

Answer 3

Ahora, esto no es más que parloteo teórico, pero entiendo que los GIF animados tienen soporte para una paleta de colores distinta por fotograma. Teóricamente, podría colocar cada imagen en un cuadro separado de la animación (dejando la mayor parte de ese cuadro transparente) y establecer el tiempo de pausa entre cuadros a 1 ms. Configure la animación para que solo se ejecute una vez, y podría (potencialmente) tener un sprite CSS efectivo con una reducción de 256 colores por imagen.

Como dije, parloteo teórico.