Erstellen Sie CSS-Sprites basierend auf Farbe?

Question

Ich habe eine große Menge von Thumbnails ich auf einer Seite angezeigt werden soll (über 200). Ich mag CSS-Sprites verwenden, um sie zu laden, um die HTTP-Anforderungen zu minimieren. Ich denke, alle von ihnen in einer massiven Datei setzt eine schlechte Idee ist, aber sie in etwa 6 Dateien von 40-50 Thumbnails Aufspalten sollte gut funktionieren.

Alle der Thumbnails sind ziemlich niedrige Farbe (kann ohne Qualitätsabfall auf 256 Farben reduziert werden), aber insgesamt alle Miniaturen viel mehr Farben decken.

Also, gibt es eine einfache Möglichkeit, um sie zu gruppieren anhand ihrer Farbe? Putting jede Gruppe von Dateien in separaten Ordnern ist in Ordnung, da ich später mit ImageMagick oder einem Online-Sprite-Werkzeug zusammenheften kann. Aber in einem all das zu tun (mit CSS) wäre auch nett.

Update: Der Grund für die Gruppierung von Farbe:
Die Idee ist, um mehr Bandbreite zu sparen. Wenn ich 10 haben meist blaue Thumbnails, 10 grüne und 10 rot, kann ich sie zu 3 Bilder kombinieren, die jeweils auf 256 Farben reduziert. Wenn ich Thumbnails mischen dann auf 256 Farben reduziert macht die Bilder schlechter Qualität.

Answer 1

Nun habe ich einige Tests durch eine Probe von Hand von einer „Tönung“ greifen und es zu einer Montage durch nur unter den ersten N Bildern erstellt zu vergleichen. Es gab nur einen Unterschied von wenigen Kilobyte, was etwa 30 Byte reduziert wurde, nachdem ich gefunden pngcrush . Fanastic Werkzeug!

Also kurz gesagt, meine crackpot Idee widerlegt worden. : P

Answer 2

Zum einen würde ich vorschlagen, nicht zu viel Sorgen, und als 24-Bit-PNG speichern. Es scheint, dass das Bild, indem Sie diese viel größer werden, aber wenn die Thumbnails klein sind, werden Sie wahrscheinlich feststellen, dass es eine große Menge an Bandbreite wird derzeit unter Verwendung nur mit HTTP-Header ist, der, den Sie können gehen weg verwenden machen Sie Ihre Bilder besser aussehen.

Wenn Sie jedoch den Prozess automatisieren wollen Sie könnten versuchen, die durchschnittliche Farbe Ausarbeiten (eine Möglichkeit, etwas in der Nähe dies zu tun ist, sie zu 1x1, um die Größe, dann Blick auf der RGB-Farbe für dieses Pixel). Sobald Sie eine Farbe pro Bildern haben, konvertieren hsv und sortieren nach Farbton. Sie können sie dann bündeln auf der Grundlage dieser Sortierreihenfolge. Ich habe nicht wirklich versucht dies, aber es kann akzeptable Ergebnisse erzeugen.

Einstellen der Anzahl der Bilder, die auch gebündelt erhalten wird die Ausgabequalität bewirken. Wenn es saugt, wenn Sie 30 Bilder pro Datei setzen, versuchen 25 und sehen, wie viel Unterschied es macht. Eigentlich könnte klüger, über die Anzahl der Dateien zu denken ...

• Setzen Sie sie alle in einer einzigen Datei.
• Ist es schlecht aus, denn es gibt nicht genug Farben?
• fügen Sie eine zusätzliche Datei und teilen Sie sie gleichmäßig auf alle Dateien. Gehe zu Schritt 2.

Answer 3

Nun, dies ist nichts anderes als theoretische Geplapper, aber ich verstehe, dass animierte GIFs Unterstützung für eine bestimmte Farbpalette pro Rahmen haben. Theoretisch könnte man jedes Bild platzieren auf einem separaten Bild der Animation (die meisten dieses Rahmens transparent zu verlassen), und stellen Sie die Pausenzeit zwischen den Bildern zu 1ms. Stellen Sie die Animation nur einmal durchgehen, und man kann (möglicherweise) ein effektives CSS-Sprites mit pro Bild auf 256 Farben reduziert.

Wie ich schon sagte, theoretisches Geplapper.