Сделать из картинки код Data URI & Data URL & Base64

Сделать из картинки код Data URI

Онлайн инструмент для конвертации изображений в код data url & base64, Вы можете создать для своих картинок или фото уникальный код.

Добавление изображения и получение готового кода Data URI

Поддерживаются распространённые форматы изображений, полученный код Data URL или Data URI может быть использован подключением на веб странице, рекомендуется использовать картинки или фото весом не более 500 килобайт.

Добавление изображения выбором файла

Нажмите на кнопку "Изображение".

Data URI - 1

Выберите изображение на своём устройстве.

Data URI - 2

Нажмите на кнопку "Открыть" в окне.

Data URI - 3

Данные моментально (в зависимости от веса) будут обработаны и предосталены параметры изображения.

Data URI - 4

Добавление изображения перетаскиванием в Drag поле

Откройте папку на устройстве и выберите картинку для конвертации.

Data URI - 5

Удерживая картинку левой кнопкой мышки перетащите её в Drag поле.

Data URI - 6

Убедитесь в соответствии конвертируемых данных.

Data URI - 7

Получение готового кода Data URL

После обработки данных изображения Вы можете получить 3 варианта кодов Data URI.

Отдельный Data URI код
Отдельный конвертированый код Data URI Base64
Готовый код для <img>
Готовый тег <img> с Data URL кодом вместо адреса, готов к установке
Готовый код для CSS
Код с добавленным свойством background-image готов к установке в таблицу стилей CSS
Data URI - 8

Применение готового кода Data URL

Демо примеры для использования и применения готового кода Data URI.

Пример применения Data URL к изображению

Применение кода Data URL к изображению
<img src="data:image/gif;base64,R0lGODlhEAAQAIAAAP///8zMzCwAAAAAEAAQAAACH4RvoauIzNyBSyYaLMDZcv15HAaSIlWiJ5Sya/RWVgEAOw==" alt="Применение кода Data URL к изображению" />

Пример применения Data URI к фону элемента


<style>
#moi--block{width:100%;height:81px}
#moi--block{
background-image: url("data:image/gif;base64,R0lGODlhEAAQAIAAAP///8zMzCwAAAAAEAAQAAACH4RvoauIzNyBSyYaLMDZcv15HAaSIlWiJ5Sya/RWVgEAOw==");
}
</style>
<div id="moi--block"></div>

Пример применения Data URL к свойству content

Вы можете ознакомиться с возможностями использования свойства content / CSS3

aTmpl
<style>
a#content--link { font: bold italic 2em serif }
a#content--link:before { content: url(data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlUlEQVQ4jc3SwQkCQQyF4U8RsRSxG23CumxAb2IDYgdiD+J5ZVfUw+7C6IIZ9yD+EBhI3iSPhH9ihQKPIIqmtsMlQ9zGuRWNkg+WmGMcTFpi84WzzwyS9wxTDAPNDacmXjigEvuvsG9FabdhRvdOXR8L92b8Y0azmHSChXqNk0BzVa9x/Z7odUip3636SCJK7DLqfsQT93w9G2KQozIAAAAASUVORK5CYII=) " "; }
a#content--link:after { color: #ddd;content: " " attr(data-description) }
</style>
<a id="content--link" href="http://atmpl.ru/" data-description="Адаптивный сайт">aTmpl</a>

Рейтинг: 5.0/5 из 1



Добавлено Автор Ник Источник Просмотров Комментариев Теги
10-10-2015 Михаил Меренков aTmpl © 499 0 base64, конвертировать изображение, конвертировать фото, data url, конвертировать картинку