Sprite vs base64 в css

аватар: Kastor
Звание: Мастер
Сообщений: 1161

Привет!

Подскажите пожалуйста по такой теме. Есть веб-приложение с небольшим кол-ом иконок на интерфейсе. При загрузке каждой иконки на сервер идет запрос.
Задача уменьшить кол-во этих запросов до одного или нуля.

Собственно сам вопрос: как лучше поступить?
1. Все иконки засунуть в один спрайт, а потом в css задавать классам смещение для определенной иконки в спрайте?
2. Или лучше сразу в css хранить иконки в base64?

Мне кажется, что со спрайтами будет менее удобно. Плюс все иконки разных размеров. Что будет, если нужно будет изменить иконку, которая в центре спрайта лежит? Либо ее удалить и вставить новую где-то внизу спрайта, либо заменить ее на новую, а потом для всех сдвинутых проставлять новые отступы в css? Это ведь жесть! Плюс еще и сам файл проекта спрайта надо хранить где то, дабы было с чего начинать при необходимости добавить новую иконку.

Мне второй вариант с base64 больше нравится, но там получается, что в текстовом формате иконка занимает где-то на 25% больше места, чем в бинарном. Хотя у нас есть сжатие css на сервере, по идее оно друг друга компенсирует. Еще где то прочитал, что такие картинки не будут кешироваться. Но по моему это бред, т.к. кешируется ж сам css файл на браузере клиента.

Может кто знает другие плюсы и минусы этих двух подходов?

__________________

Скажите мне док, считающий себя единственным здравомыслящим человеком сумасшедший?
Если да, возможно я псих.
]]>http://kastordriver.livejournal.com/]]>

аватар: jimmyjonezz
Звание: Мастер
Сообщений: 2466

Использовать иконочный шрифт! ]]>Пример!]]>
Есть еще вариант - SVG, запросы те же, но быстрее, т.к. у svg размеры малы.

__________________

stravaganza?

аватар: Kastor
Звание: Мастер
Сообщений: 1161

У нас иконки свои, поэтому готовые иконочные шрифты мы не используем.
В общем, сделал спрайтом. Пришлось помучатся с его созданием, но зато браузеру не придется декодировать иконки и их вес наоборот уменьшился, а не увеличился, по сравнению с кодированием их в base64.

Для создания спрайта использовал этот сервис ]]>http://spritepad.wearekiss.com/]]>.

__________________

Скажите мне док, считающий себя единственным здравомыслящим человеком сумасшедший?
Если да, возможно я псих.
]]>http://kastordriver.livejournal.com/]]>

аватар: jimmyjonezz
Звание: Мастер
Сообщений: 2466

Что за такие специфические иконки, что их не заменить Awesome с набором в более 500 иконок!?

__________________

stravaganza?

аватар: Kastor
Звание: Мастер
Сообщений: 1161

Что за Awesome? Если это иконочный шрифт, то мне не нужно полотно с 500 иконками, из которых я буду использовать 20-ть. А если речь про ]]>вот эти иконки]]>, то в чем смысл мне менять свои, которые уже давно в проекте на новые, если все равно что с тех, что с этих заново нужно делать спрайт?

Ну, нужно сказать, что у нас не только иконки фиксированного размера, но другие мелкие изображения шириной более 100px. Поэтому речь не только о маленьких иконках 32х32 шла.

__________________

Скажите мне док, считающий себя единственным здравомыслящим человеком сумасшедший?
Если да, возможно я псих.
]]>http://kastordriver.livejournal.com/]]>

аватар: jimmyjonezz
Звание: Мастер
Сообщений: 2466

Просто, как спрайт, так и base, считаются устаревшими, т.к. с приходом CSS3 и HTML5 в тренде иконочный шрифт. Да, в старых системах он не везде канает, но данный шрифт это не только 32х32, а гораздо больше и это без загрузки дополнительного контента. Я не настаиваю, на этом выборе. Просто CSS3 и HTML5...

__________________

stravaganza?