На написание этой заметки меня вдохновила только что прочитанная статья на Хабре. Была она вовсе не про картинки, а про описание поисковых расширений и улучшение контекстного поиска в браузере. Но заканчивалась она чем-то вроде ... если вы не хотите искать, то вот сервис для преобразования картинок в base64. Для тех кто не в курсе могу рассказать, что современные браузеры в <img src="..."> понимают не только URL картинки, но и конструкцию вида data:image/jpeg;base64, собственно то же поддерживается и в CSS разметке. Т.е. картинку можно вставить непосредственно в HTML, либо CSS файл, прямо в SRC, предвартельно преобразовав ее в base64. Зачем это нужно? Ну например при создании различных анимированных меню, всякие состояния кнопочек, которые отображаются в картинках можно разместить прямо в CSS. За счет этого, к примеру, уменьшается количество запросов к web-серверу ... представьте себе что у вас на странице 30 различных мелких вариантов кнопок и т.п., это 30 запросов к web-серверу для 30 файлов. А можно их все разместить в одной CSS или HTML ... Ну да не будем отвлекаться. Увидел я этот онлайн сервис ... и мне тут же вспомнились инструменты разработчика Google Chrome. в которых как раз была такая функция - Copy image as data URL ...
И, собственно, без всякого онлайна ваша картинка будет преобразована. К слову, до этого мне очень нравились аналогичные инструменты в Opera Dragonfly (когда Opera была еще на движке Presto), но постепенно начал привыкать к Ctrl-Shift+I в Google Chrome. На этой счастливой ноте я пожалуй пойду смотреть The Signal ... Кстати, картинка к нему в этом посте вставлена именно как DATA URL. Можете посмотреть исходный код этой страницы ...
Комментариев нет :
Отправить комментарий