ArtemPitov

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

Рекомендуемые сообщения

ArtemPitov    338

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

 

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
chukcha    833

И да и нет

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
nestling    1

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
RGB    977

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sitecreator    453

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

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

 

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

 

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

 

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
toporchillo    425
sitecreator, Grunt, Gulp - не слышали? Какое время то?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pashast    370

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

 

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pantagruel964    217

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

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

 

 

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pantagruel964    217

 

 

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

 

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

 

 

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pashast    370

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

miXi1MQicbYwRj5tcQJNKAHyDdGSB7.png

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
sitecreator    453

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

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

 

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pantagruel964    217

 

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу