data:image base64 в CSS нужен такой зверь или нет ?

[ArtemPitov]

Доброго времени суток

 

Вот задумался я может все мелкие картинки при верстке сразу пихать в base64, он же по логике даст прирост в скорости или не стоит так извращаться ?

 

[chukcha]

И да и нет

base64  увеличит размер css файла

использование base64 даст возможность уменьшить количество коннектов к серверу.

 

Возможно пересмотреть в сторону использования спрайтов, но это тоже не панацея.

Поэтому смотреть нужно исключительно по месту.

[ArtemPitov]

Спасибо за наводку тут нужно подумать

[nestling]

о чем думать? с такими вопросами ясно, что вы используете две картинки в кнопке с двумя состояниями, срочно используйте спрайты, до base64 эволюционируйте попоже. 

[ArtemPitov]

так причем тут кнопка ? у меня вопрос сугубо был о base64 были

[RGB]

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

[ArtemPitov]

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

[sitecreator]

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

Ибо заказчику глубоко по барабану все эти "ускорения", точнее, он совершенно не оценит любые ваши усилия в этом плане - это чисто из опыта.

 

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

 

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

 

 

Да фиг с ними, с обращениями. Не на телефонном же модеме сидит пользователь.

Кодируйте на здоровье если вам от этого только удобство будет.

[pashast]

BASE64 лучше чем спрайты.

 

Вот сейчас в Украине начали все операторы мобильной связи делать ребрендинги.

У меня несколько сайтов на обслуживании, соответственно стало нужно менять иконки операторов. Открыл css - вставил сгенерированую строку и готово.

 

Если бы это был спрайт, то пришлось бы качать спрайт, открывать в фотошопе, и тулить новую иконку.

Хорошо если отступы внутри спрайта есть, а если нет, то еще нужно и с background-position шаманить.

[ArtemPitov]

Grunt, Gulp - не слышали? Какое время то?

к сати сам недавно испробовать Gulp, очень понравился 

[pantagruel964]

...пихать в base64, он же по логике даст прирост в скорости..

Экономия на спичках? А если нужно изменить, опять скачиваем файл css ~100-200кб

 

 

Если бы это был спрайт, то пришлось бы качать спрайт, открывать в фотошопе, и тулить новую иконку.

Хорошо если отступы внутри спрайта есть, а если нет, то еще нужно и с background-position шаманить.

Спрайты без psd-исходников? Что это еще за изваращения...

[ArtemPitov]

Экономия на спичках? А если нужно изменить, опять скачиваем файл css ~100-200кб

С сегодняшним скоростями это может и экономия на спичках, но тут уже идет больше удобство нежели скорость, но и правда - 1-2 сек загрузки тоже приятны ) 

[ArtemPitov]

Спрайты без psd-исходников? Что это еще за изваращения...

Не было такого ? не всем заказчикам охота хранить у себя непонятные файлы, а исполнителю быть архивом для старого заказчика 

[pantagruel964]

 

 

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

 

Я, чес говоря, не вижу неудобств в работе со спрайтами, 3 клика в фотошопе и выставляем позиционирование, тут тоже никакого шаманства нет, я всегда выстраиваю элементы по высоте и левому краю, т.е. первым значение в bakcground-position у меня всегда будет 0, ну а вычислить координаты по вертикали - секундное дело. Все эти действия уже так задрочены, что никакого дискомфорта не вызывают. Пробовал и base64 на одном проекте, движений было больше, не понра. Плюс на продакшн загоняем спрайты в tinypng и получаем размер меньше, чем css. Ну и ничего лишнего в таблицах стилей. Короч, кому как, но мое кунфу эффективней и быстрее со спрайтами.

 

 

Не было такого ? не всем заказчикам охота хранить у себя непонятные файлы, а исполнителю быть архивом для старого заказчика 

 

Было, но я таким не занимаюсь, проще новый спрайт. Редактировать компактно сгруппированный спрайт без исходника смерти подобно.

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

[ArtemPitov]

Я, чес говоря, не вижу неудобств в работе со спрайтами, 3 клика в фотошопе и выставляем позиционирование, тут тоже никакого шаманства нет, я всегда выстраиваю элементы по высоте и левому краю, т.е. первым значение в bakcground-position у меня всегда будет 0, ну а вычислить координаты по вертикали - секундное дело. Все эти действия уже так задрочены, что никакого дискомфорта не вызывают. Пробовал и base64 на одном проекте, движений было больше, не понра. Плюс на продакшн загоняем спрайты в tinypng и получаем размер меньше, чем css. Ну и ничего лишнего в таблицах стилей. Короч, кому как, но мое кунфу эффективней и быстрее со спрайтами.

 

да, у каждого своя кухня

[pashast]

хз, у меня 70гб клиентских файлов

Игра "найди нужный бекап"  :-D

 

сюда затащил иконку и все http://b64.io/

[sitecreator]

он же по логике даст прирост в скорости или не стоит так извращаться ?

Опять же смотря какая "скорость" вам (а может быть и не вам?) нужна и зачем.

 

Если для показушных цифирек от Гугла (https://developers.google.com/speed/pagespeed/insights/), то это вам не поможет набрать больше баллов.

А некоторые заказчики, похоже, балдеют от глупых цифирек.

 

Тот же Гугл на полном серьезе отметил проблему в движке с сжатием картинки "arrow-down.png" (весит 210 байт) и предложил ужать до 111 байт.

[pantagruel964]

 

 

Игра "найди нужный бекап" 

..и? Все в куче?