Créer des sprites CSS basés sur la couleur?

Question

Je souhaite afficher un grand nombre de vignettes sur une page (plus de 200). J'aimerais utiliser des sprites CSS pour les charger afin de minimiser les requêtes HTTP. Je pense que les placer tous dans un seul fichier volumineux est une mauvaise idée, mais les scinder en environ 6 fichiers de 40 à 50 miniatures devrait bien fonctionner.

Toutes les vignettes sont de couleur relativement basse (peut être réduite à 256 couleurs sans perte de qualité), mais au total, toutes les vignettes couvrent beaucoup plus de couleurs.

Alors, existe-t-il un moyen facile de les regrouper en fonction de leur couleur? Il est correct de placer chaque groupe de fichiers dans un dossier séparé, car je peux plus tard assembler avec ImageMagick ou un outil de sprite en ligne. Mais faire tout cela en un (avec CSS) serait bien aussi.

Mise à jour: motif du regroupement par couleur:
L'idée est d'économiser plus de bande passante. Si j'ai 10 vignettes essentiellement bleues, 10 vertes et 10 rouges, je peux les combiner à 3 images, en réduisant chacune à 256 couleurs. Si je mélange les vignettes, la réduction à 256 couleurs diminue la qualité des images.

Answer 1

Eh bien, j’ai fait quelques essais en saisissant un échantillon à la main d’une "teinte". et en le comparant à un montage créé en prenant simplement les N premières images. Il n'y avait qu'une différence de quelques kilo-octets, qui a été réduite à environ 30 octets après avoir trouvé PNGcrush . Outil Fanastic!

Donc, en bref, mon idée de cinglée a été réfutée. : p

Answer 2

Tout d'abord, je vous conseillerais de ne pas trop vous inquiéter et d'économiser au format png 24 bits. Cela peut sembler l’agrandissement considérable de l’image, mais si les vignettes sont petites, vous constaterez probablement qu’une grande quantité de bande passante est actuellement utilisée avec uniquement des en-têtes http qui disparaîtront et que vous pourrez utiliser pour améliorez l'apparence de vos images.

Toutefois, si vous souhaitez automatiser le processus, vous pouvez essayer de calculer la couleur moyenne (une façon de le faire est de les redimensionner à 1x1, puis examinez la couleur RVB de ce pixel). Une fois que vous avez une couleur par image, convertissez-la en hsv et triez-la par teinte. Vous pouvez ensuite les regrouper en fonction de cet ordre de tri. Je n'ai pas réellement essayé cela, mais cela peut produire des résultats acceptables.

Le réglage du nombre d’images groupées affectera également la qualité de la sortie. Si cela ne va pas quand vous mettez 30 images par fichier, essayez-en 25 et voyez à quel point cela fait une différence. En fait, il serait peut-être plus judicieux de penser au nombre de fichiers ...

• Mettez-les tous dans un seul fichier.
• Cela semble-t-il mauvais, car il n'y a pas assez de couleurs?
• ajoutez un fichier supplémentaire et répartissez-le également entre tous les fichiers. Allez à l'étape 2.

Answer 3

Maintenant, ce n’est rien de plus que du chahut théorique, mais je comprends que les GIF animés prennent en charge une palette de couleurs distincte par image. Théoriquement, vous pouvez placer chaque image sur une image distincte de l'animation (en laissant la plus grande partie de l'image transparente) et définir le temps de pause entre les images sur 1 ms. Définissez l’animation pour ne passer qu’une seule fois et vous pourriez (potentiellement) avoir un sprite CSS efficace avec une réduction de 256 couleurs par image.

Comme je l'ai dit, blabber théorique.