Создание CSS-спрайтов для динамических изображений

Question

У меня есть веб-страница, содержащая около 20-50 динамических изображений (изображения, полученные от нестатического источника). Эти изображения подаются через сервлет на основе URL-адреса запроса. Это приводит к генерированию запроса на изображение, что приводит к снижению производительности.

Если эти изображения были статичными, я бы создал CSS-спрайт и заменил 50 запросов на один. Поскольку они динамичны, это не так просто. Я ищу инструмент/библиотеку/метод, который я могу использовать для объединения этих изображений в один спрайт во время выполнения. К счастью, размер изображения постоянный и одинаковый для всех, что должно сделать это намного проще.

Любые предложения?

Answer 1

Вы можете проверить и попробовать библиотеку jawr (https://jawr.dev.java.net/) для генерации/модификации (также сжатия, слияния) файлов css на сервлете. Он имеет возможность динамически менять фоновое изображение. Вы можете организовать пакеты для переключения css-файлов (ов) для изменения скинов (ов).

Плюс сторона: вы также можете управлять и упорядочивать файлы .js!

Answer 2

Вы можете добавить изображения с помощью бесплатной библиотеки ImageMagick через вызов командной строки системы, поэтому у вас есть намного меньше кода на Java, и это быстрее.

Для добавления по горизонтали, используйте следующую команду:

convert image1.gif image2.gif image3.gif +append result.gif 

Для добавления вертикально, используйте следующую команду:

convert image1.gif image2.gif image3.gif -append result.gif 

Для получения дополнительной информации: http://www.imagemagick.org/Usage/layers/#append

Таким образом, с помощью CSS можно отобразить спрайты, использующие одиночное изображение с простым смещением (вы можете использовать «фон» «CSS» для загрузки изображения и установить смещение одиночного спрайт, который вы хотите отобразить). Никакой JavaScript не требуется, если вы делаете только простые вещи.

Answer 3

Возможно ли, что накладные расходы на обработку на сервере стоят?

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

Компромисс, достойный немного анализа.