RSS
 

 

Преобразуем картинки в данные data:URL

20 Мар

О преимуществах встраивания картинку непосредственно в HTML или CSS используя data:URL написано много.
Есть там и свои подводные камни с IE 6-7, но чтобы их обойти можно использовать MHTML-включение.

Итак чтобы встроить картинку непосредственно в HTML или CSS data:URL нужно получить ее base64-код. Это можно сделать с помощью специальных сервисов.

Мне понравились несколько:

Browser-side data:URL от Сергея Чикуёнка

Сервис доступен по адресу: http://chikuyonok.ru/data-url/ (работает в FF3.6, Safari 4, последний Google Chrome (только Windows-версия).
Принцип работы — принимает файл-картинку, возвращает соответствующий ей код.
Предлагает «скачаться», после чего можно запускать полученную страничку локально в любом из вышеперечисленных браузеров и пользоваться на здоровье.

Файлы перетягиваются мышью в окно браузера прямо из файлового менеджера. Каждая картинка превращается в блок, в котором указывается имя файла, его размер, маленькая превьюшка и, главное, кнопочки позволяющие получить код.
Можно получить просто код, готовый к употреблению img или свойство background-image (естественно, с уже вставленным data:URL).

Нажал на кнопочку — получи код в буфер.

При наведении мышки блок «оживает» — превьюшку можно немного увеличить, а сам блок удалить, с помощью кнопки-крестика.

Автоматизированный сервис DURIS

http://duris.ru/ (Data URI [CSS] Sprites) — автоматизированный сервис для сборки и генерации CSS спрайтов на основе data:URI технологии.

Позволяет создать оптимизированный css со встроенными картинками. То есть этому сервису «скармливаем» не отдельные картинки, а практически готовую верстку. Попутно может объединять и сжимать файлы.

Снабжен детальным FAQ.


 
 

Метки: , , , , , , 20.03.2011