Картинка в Base64

Откройте или перетащите изображение — и получите его Data URI: строку вида data:image/png;base64,iVBORw0…, которую можно вставить прямо в src тега <img> или в url() в CSS. Картинка сразу показывается в предпросмотре, а статус сообщает, насколько вырос размер. Обратное преобразование — из строки Base64 в файл — работает в режиме «Декодировать».

Как пользоваться

Нажмите «Открыть файл» или перетащите изображение на поле: подходят PNG, JPEG, GIF, WebP и SVG до 2 МБ. Выключите «Data URI», если нужна только строка Base64 без префикса data:…;base64,. Файл обрабатывается в браузере и не отправляется на сервер.

Действие

Кодируем…

Текст

Файл не выбран
До 2 МБ, файл можно перетащить на поле. Для Base64 подходит любой файл, например картинка; файл обрабатывается только в вашем браузере.
Base64
Для кодирования включите JavaScript. Пример: текст Привет в Base64 через UTF-8 — 0J/RgNC40LLQtdGC.


Как вставить Data URI


HTML
<img src="data:image/png;base64,iVBORw0KGgo…" alt="Логотип" width="32" height="32">


CSS
.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgo…");
}


Не забывайте атрибут alt и размеры: для браузера встроенная картинка ничем не отличается от обычной.


Когда это оправдано


    
    
  • Да — маленькие иконки и фоны в CSS, картинки в письмах и одностраничных документах, изображения в JSON для API.
    • 
    
  • Нет — фотографии и большие изображения: Base64 увеличивает размер примерно на треть, а встроенная картинка не кэшируется отдельно и загружается заново вместе с каждым HTML- или CSS-файлом.
    • 



Для SVG Base64 не обязателен: текстовый формат короче записать с URL-кодированием. Это делает инструмент «SVG в CSS» — он заодно оптимизирует рисунок.




Вопросы и ответы


Почему строка такая длинная?


Base64 записывает каждые 3 байта четырьмя символами, поэтому строка примерно на треть больше файла. Картинка в 30 КБ превратится в 40 КБ текста.


Как получить файл обратно из Base64?


Выберите «Декодировать» и вставьте строку — инструмент распознает тип изображения, покажет его и предложит скачать файл с нужным расширением.


Безопасно ли загружать сюда изображения?


Да, файл обрабатывается в вашем браузере и никуда не отправляется. Предпросмотр SVG выполняется через <img>, поэтому скрипты внутри рисунка не запускаются.




Связанные материалы


Кодирование текста и любых файлов — в инструменте «Base64». О картинках на странице — в статьях о теге <img> и свойстве background-image.