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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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

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