Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Разработка под ASP.NET > css base64 performance браузера при обработке


Автор: Экскалупатор 13.5.2013, 15:03
предыстория:
есть страница где лежит много картинок. хочу все картинки в css(base64), что бы не бегать за каждой не сервер.

вопрос: как браузеры будут загружать систему при обработке такого css. интересны именно сравнительные тесты, base64 vs image url, в разных браузерах.

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

Автор: UncleBob 15.5.2013, 21:49
А в одну картинку запихать все картинки?

Автор: Экскалупатор 15.5.2013, 22:55
Цитата(UncleBob @  15.5.2013,  20:49 Найти цитируемый пост)
А в одну картинку запихать все картинки? 

это философский вопрос.
1. в один спрайт все картинки для всего сайта? много, зачем они везде. разбить на много спрайтов для каждой страницы? а если придется менять картинку которая на многих страницах? то придется менять во всех спрайтах.
2. если картинка была по дизайну 16х16, а надо сделать 18х20(ну такая прихоть у заказчика))), то нужно переверстать везде где есть координаты кортинок из этого спрайта(потому что поплывет все)
3. уже есть скрипт который автоматически, при паблише проекта, из всех url в css делает base64, получаем довольно удобный механизм, с одной стороны все как будто прозрачно, меняем одну(!!!) картинку и все пути остаются как и были, остальные картинки даже не затрагиваем, а на паблише нам все автоматически собирается в нужном формате - по прежнему удобно менять(в отличии от спрайтов), и на выходе получаем один файла на не 100.
4. спорный момент, но иногда(соглашусь, что не всегда, но тем не менее) base64 жмется gzip`ом, что тоже есть хорошо.

ну как то так, а какие плюсы в одной картинке, против всего что я описал?

Автор: UncleBob 17.5.2013, 08:26
В общем случае сложно сказать, в частном надо смотреть, если действительно картинок много, то можно их и разбить на группы, не обязательно в одну все пихать. 

1) надо стремиться к тому, чтобы один спрайт был только в одном файле
2) никогда спрайты не лепят вплотную, обычно делают зазор между соседними изображениями, в этом ничего страшного нет, "пустое" место все равно сожмется.
3) ну то есть это получается попытка притянуть решение под готовый скрипт?
4) есть такое

Мне просто идея бинарку в текст пихать вообще кажется диковатой  smile 

Вообще, мне стало интересно, и я нашел вот что:

http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to
и 
http://jsperf.com/image-vs-data-uri

Автор: Экскалупатор 17.5.2013, 17:54
Цитата(UncleBob @  17.5.2013,  07:26 Найти цитируемый пост)
1) надо стремиться к тому, чтобы один спрайт был только в одном файле
2) никогда спрайты не лепят вплотную, обычно делают зазор между соседними изображениями, в этом ничего страшного нет, "пустое" место все равно сожмется.
3) ну то есть это получается попытка притянуть решение под готовый скрипт?
4) есть такое


1. предположим что есть картинка, которая грузится на 20 страниц, как ее положить в один спрайт? или клеить спрайты по принципу эти три картинки всегда грузятся вместе - их в один спрайт, а эти три тоже всегда вместе но на других страницах их тоже в один файл. получаем несколько странный процесс.
2. я думаю не стоит говорить что всегда можно "упереться" в границу, сколько бы места не оставил. а делать заведомо спрайт с расстоянием в 100 пикселей между картинками это неверно.
3. скрипт писался для этой задачи специально, так что это не попытка подогнать, а попытка выяснить плюсы и минусы. по тестированию получается плюсов больше есть в base64, но это для конкретно моей задачи.

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

ссылка с тестами забавная, буду играться, спс.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)