Картинка в Base64
Маленькую иконку или логотип удобно вшить прямо в HTML или CSS строкой data URI: на один запрос к серверу меньше, а письмо или одностраничник становятся самодостаточными. Инструмент переводит картинку в Base64 в браузере, показывает, насколько вырос размер — кодирование добавляет треть, — и даёт готовые фрагменты для тега img и свойства background-image. Обратный режим превращает строку Base64 обратно в файл с предпросмотром. Проверено 04.09.2026.
Как пользоваться
- Перетащите, выберите файл или вставьте из буфера; SVG и GIF тоже подходят.
- Чистый Base64, data URI целиком или фрагмент для HTML и CSS — одной кнопкой.
- Строка на треть длиннее файла; для картинок больше 10–20 КБ вшивание невыгодно.
- Вставьте data URI во второе поле — появится предпросмотр и кнопка скачивания.
Частые вопросы
Что такое data URI
Строка вида data:image/png;base64,iVBOR…, которая содержит сам файл, закодированный в Base64. Браузер читает её как обычную картинку в src у img, url() в CSS или в href ссылки. Тип файла указан до запятой.
Почему строка больше файла
Base64 кодирует каждые три байта четырьмя символами, поэтому размер растёт на 33 %; плюс короткий заголовок. Gzip на сервере частично компенсирует, но для крупных картинок обычный файл с кэшем выгоднее.
Когда вшивать картинку в код
Иконки, разделители, мелкие логотипы до 5–10 КБ, изображения в HTML-письмах, если почтовый клиент их поддерживает, и одностраничные документы, которые должны открываться без сети. Фотографии — нет.
Как вставить в HTML и CSS
В HTML: img с src равным строке; в CSS: background-image: url("data:…"). Инструмент даёт оба фрагмента готовыми, SVG можно вставлять и без Base64, но с ней меньше проблем с кавычками.
Безопасно ли это
Файл кодируется в браузере и никуда не отправляется. Строка — тот же файл, с ней стоит обращаться как с ним: не вставлять чужие data URI из непроверенных источников в свой код без просмотра.
Данные куда-то отправляются
Нет, всё происходит в браузере.
Похожие инструменты
MD5, SHA-1, SHA-256, SHA-384, SHA-512 и CRC32 от текста или файла сразу. Есть HMAC с ключом, вывод в Base64 и сверка с эталоном, которая сама узнаёт алгоритм.
ОткрытьТестер регулярных выраженийПодсветка совпадений и групп, режим замены и разбор самого шаблона по-русски: что делает каждый кусок и почему выражение не сработало.
ОткрытьJSON-форматтер и валидаторРазбирает JSON с отступами и в одну строку, показывает дерево с путями к узлам и объясняет ошибку по-русски: где висячая запятая, где кавычки из Word, где комментарий.
ОткрытьChmod калькуляторПрава доступа Linux в трёх видах: галочки, число 755 и строка rwxr-xr-x. Специальные биты и готовая команда.
ОткрытьСравнить два JSONПоказывает, чем отличаются два ответа API: какие поля появились, пропали и изменились, с путём вида data.items[0].price. Служебные поля можно исключить.
ОткрытьГенератор UUIDВерсии 4 и 7 пачками, пять форматов записи и разбор готового идентификатора с датой создания для v7.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.