Создавать CSS спрайты на основе цвета?

Question

У меня есть большой набор миниатюр, которые я хочу отобразить на странице (более 200). Я хотел бы использовать CSS-спрайты для их загрузки, чтобы минимизировать HTTP-запросы. Я думаю, что помещать их все в один массивный файл - плохая идея, но разделение их на 6 файлов по 40-50 миниатюр должно работать хорошо.

Все миниатюры имеют довольно низкий цвет (их можно уменьшить до 256 цветов без потери качества), но в целом все миниатюры покрывают намного больше цветов.

Итак, есть ли простой способ сгруппировать их по цвету? Размещение каждой группы файлов в отдельной папке - это хорошо, так как позже я могу сшить вместе с ImageMagick или онлайн-инструментом для спрайтов. Но было бы неплохо делать все это в одном (с помощью CSS).

Обновление: причина группировки по цвету:
Идея состоит в том, чтобы сохранить больше пропускной способности. Если у меня есть 10 в основном синих миниатюр, 10 зеленых и 10 красных, я могу объединить их в 3 изображения, уменьшив до 256 цветов. Если я смешиваю миниатюры, то уменьшение до 256 цветов ухудшает качество изображений.

Answer 1

Что ж, я провел некоторое тестирование, взяв образец вручную одного «оттенка» и сравнив его с монтажом, созданным просто с помощью первых N изображений. Разница была всего в несколько килобайт, которая была уменьшена до 30 байтов после того, как я обнаружил PNGcrush . Фанатичный инструмент!

Короче говоря, моя идея о психе была опровергнута. : Р

Answer 2

Теперь это не что иное, как теоретическая болтовня, но я понимаю, что анимированные GIF-файлы поддерживают отдельную цветовую палитру для каждого кадра. Теоретически вы можете поместить каждое изображение в отдельный кадр анимации (оставив большую часть этого кадра прозрачным) и установить время паузы между кадрами равным 1 мс. Установите анимацию, чтобы пройти только один раз, и вы могли (потенциально) иметь эффективный CSS-спрайт с уменьшенным до 256 цветов на изображение.

Как я уже сказал, теоретический болтовня.

Answer 3

Во-первых, я бы посоветовал не слишком беспокоиться и сохранить как 24-битный png. Может показаться, что изображение становится намного больше при этом, но если миниатюры маленькие, вы, вероятно, обнаружите, что в настоящее время используется большая полоса пропускания только с заголовками http, которые исчезнут, и вы можете использовать их для сделать ваши изображения лучше.

Однако, если вы хотите автоматизировать процесс, вы можете попробовать определить средний цвет (один из способов сделать что-то похожее на это - изменить их размер до 1x1, а затем посмотреть на цвет rgb для этого пикселя). Как только у вас будет цвет для изображений, конвертируйте в hsv и сортируйте по оттенку. Затем вы можете связать их в соответствии с этим порядком сортировки. Я на самом деле не пробовал это, но это может привести к приемлемым результатам.

Регулировка количества объединяемых изображений также повлияет на качество вывода. Если это плохо, когда вы помещаете 30 изображений в файл, попробуйте 25 и посмотрите, какая разница. На самом деле, может быть разумнее думать о количестве файлов ...

• Поместите их все в один файл.
• Плохо выглядит, потому что не хватает цветов?
• добавить один дополнительный файл и распределить его поровну по всем файлам. Перейти к шагу 2.