Как я могу создать спрайты CSS из изображений, хранящихся в базе данных?

Question

У меня есть обработчик ASHX, который я использую для отображения изображений, которые хранятся в базе данных.Я отображаю изображения в виде миниатюр, а затем в полном размере, если пользователь наводит на них курсор.

Как объединить изображения во время выполнения для создания спрайтов CSS для использования в этой ситуации?

Если это можно сделать, у кого-нибудь есть предложения о том, с чего начать?

UPATE

Кажется, что большинство людей говорят, что это не очень хорошая ситуация для использования спрайтов. Я новичок в концепции спрайтов, поэтому, пожалуйста, потерпите меня.

Если я собираюсь каждый раз загружать 30 миниатюр на страницу из своей базы данных, почему не имеет смысла передавать их с сервера клиенту как одно большое изображение вместо передачи 30 отдельных изображений?Разве это не будет быстрее?Разве это не цель CSS Sprites?

Answer 1

Что касается браузера, ресурс HTTP является ресурсом HTTP, и он не имеет значения, если сервер создал его путем чтения файла с жесткого диска, извлечения данных из базы данных или выброса случайного содержимого Генератор чисел с помощью алгоритма, который будет выводить действительные данные PNG.

Вам просто нужно сгенерировать ваши изображения из данных как обычно.

Тем не менее, поскольку изображения являются контентом, CSS не подходит для включения их в документ. Вы должны использовать элемент <img>.

Answer 2

Check http://www.RequestReduce.com. Он не только автоматически создает файл спрайта, но и делает это на лету через HttpModule вместе со слиянием и минимизацией всего CSS. Он также оптимизирует изображение спрайта, используя квантование и сжатие без потерь, и обрабатывает сгенерированные файлы с использованием заголовков ETags и Expires для обеспечения оптимального кэширования в браузере. Установка тривиальна и включает простое изменение web.config. См. Мое сообщение в блоге о его принятии в галерее образцов Microsoft Visual Studio и MSDN.

Answer 3

У вас есть пара вариантов.

1. Ваш обработчик может на лету комбинировать изображения, которые он получает из базы данных, и отправлять все это в браузер.

ИЛИ (а мне этот больше нравится)

Вы создаете объединенное изображение во время загрузки изображений на ваш сайт.

Второе лучше, так как преобразование должно произойти только один раз и, следовательно, означает, что вам нужно потратить эти ресурсы только один раз.Это означает, что вы, по сути, храните 2 копии изображения, но это нормально.

ОБНОВЛЕНИЕ

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

В этом случае это еще более плохая идея.Как сказал Дэвид Дорвард, CSS используется для управления макетом.Вы говорите о контенте.Однако, если оставить в стороне семантическую проблему, в случае, если вы захотите внести изменения в макет, вам придется изменить свой код, который для начала создает спрайты.Что делать, если вы решили сделать 35 изображений?Или изменить это на 18?

Пройдя маршрут спрайта, вы очень хорошо себя чувствуете, будучи вынуждены изменить код для любого изменения макета, который НЕ является хорошим стилем.

Чтобы покрыть этот последний вопрос: не будет ли это быстрее?Возможно нет.При таком сценарии вам придется создавать спрайт на лету, который вводит нагрузку на сервер, что замедляет все.Самое большее, это может быть стирка во время доставки.В худшем случае вы подвергаетесь большим серверам и отрицательному влиянию на производительность разработки.

Answer 4

Спрайты не являются хорошим решением здесь.

Чтобы ответить на ваше обновление, спрайты идеальны для многих небольших изображений, когда накладные расходы нового HTTP-запроса перевешивают несколько байтов, отправляемых для небольших png или gif (например, значки 16x16 и т. Д.). Для больших изображений время HTTP-запроса становится все менее важным по мере увеличения времени загрузки.

Упаковка изображений в спрайт также означает, что они будут выполнять один более длинный запрос, а другие запросы должны будут стоять в очереди за ним. Если важно, чтобы миниатюры отображались быстро, убедитесь, что они загружаются в первую очередь, прежде чем начинать загрузку больших изображений тех же изображений.

Любые файлы большего размера, которые не отображаются при начальной загрузке страницы, должны загружаться поздно (window.onload) или загружаться лениво (по мере необходимости при щелчке или наведении курсора).

Answer 5

Я полностью согласен с Дэвидом. Просто краткая заметка о последнем замечании Дэвида: это только если изображения содержательны. Однако, если бы они были частью макета, тогда CSS был бы уместен.

Тем не менее, в этом случае использования спрайты не являются хорошим выбором. Одной из целей миниатюр является сокращение времени загрузки, которое спрайту могло бы ухудшить для галереи. Лучшим шаблоном может быть использование лайтбокса или чего-то подобного с двумя изображениями, а не с одним, причем большее запрашивается по запросу.