ПаветтаКартинка в Base64
Маленькую иконку или логотип удобно вшить прямо в HTML или CSS строкой data URI: на один запрос к серверу меньше, а письмо или одностраничник становятся самодостаточными.
Как файл становится строкой
Инструмент переводит картинку в текст: PNG, JPG, GIF, WebP или SVG превращается в строку Base64, к ней добавляется заголовок с типом файла, и получается data URI, который можно вставить прямо в HTML или CSS вместо ссылки на файл. Готовые фрагменты для тега img и свойства background-image копируются одной кнопкой, рядом видно, насколько выросла строка по сравнению с файлом. Обратный режим разбирает вставленный data URI, показывает картинку и даёт скачать её файлом.
Base64 берёт каждые три байта и записывает их четырьмя символами из алфавита в 64 знака: латинские буквы обоих регистров, цифры, плюс и косая черта, а хвост дополняется знаком равенства. Строка выходит на треть длиннее файла, поэтому вшивать имеет смысл иконки, разделители и мелкие логотипы до 10–20 КБ; фотография в коде только раздует страницу. Кодирование идёт в браузере, файл никуда не уходит. Заголовок выглядит как data:image/png;base64, — сначала схема, потом MIME-тип, потом пометка о кодировке и запятая, за которой идут сами данные.
| Формат | MIME-тип в data URI | Замечание |
|---|---|---|
| PNG | image/png | Иконки и логотипы с прозрачностью |
| JPG | image/jpeg | Фотографии; в коде почти всегда невыгодно |
| GIF | image/gif | Анимация сохраняется |
| WebP | image/webp | Легче PNG и JPG, читают все современные браузеры |
| SVG | image/svg+xml | Можно вшить и как текст, без Base64 |
История: от uuencode до схемы data:
Компьютерная почта родилась текстовой: таблица ASCII 1963 года описывала 128 знаков, сети семидесятых были рассчитаны на них, и восьмой бит байта по дороге мог просто отбрасываться. Чтобы переслать программу или картинку, её переводили в буквы: в 1980 году Мэри Энн Хортон написала для Unix утилиту uuencode, а в 1987 году стандарт защищённой почты PEM в RFC 989 описал алфавит из 64 знаков, который мы теперь зовём Base64.
Массовым его сделал MIME: в 1992 году Натаниэль Боренстайн и Нед Фрид в RFC 1341 задали, как класть в письмо вложения, и Base64 стал способом переслать любой файл через текстовую почту. В 1998 году Ларри Мазинтер описал в RFC 2397 схему data: — адрес, который содержит сами данные, и картинку стало можно вшить в страницу. Окончательный вид Base64 закрепил RFC 4648 в 2006 году.
Поначалу схему поддерживали не все браузеры: Internet Explorer научился data URI только в восьмой версии и ограничил их 32 килобайтами. Вшивание вошло в моду в эпоху борьбы за число запросов к серверу, вместе со спрайтами, а протокол HTTP/2 в 2015 году сделал много мелких запросов дешёвыми, и приём остался для автономных страниц и совсем мелких иконок. Из-за того же ограничения долго жили спрайты: десятки иконок склеивали в одну картинку и показывали нужную сдвигом фона.
Когда вшивать картинку в код
Загрузите картинку и выберите, что копировать: чистый Base64, data URI целиком, тег img или CSS-фрагмент. В HTML строка идёт в атрибут src, в CSS — в url() свойства background-image, в кавычках. Смотрите на размер: если строка перевалила за 20 КБ, картинку выгоднее оставить файлом и дать браузеру закэшировать её. В HTML-письмах data URI поддерживают не все почтовые клиенты, часть из них режет такие картинки из соображений безопасности, поэтому для рассылок надёжнее обычные вложения или ссылки на файлы.
Для обратной задачи вставьте data URI или голый Base64 во второе поле, появится предпросмотр и кнопка скачивания; так удобно вытащить картинку из чужого CSS или письма. Перед вшиванием стоит уменьшить файл: сжатие фото сокращает исходник, а значит, и строку. Текст и другие файлы кодирует общий Base64.
| Кодирование | 3 байта → 4 символа |
| Рост размера | +33 % |
| Алфавит | 64 знака и «=» |
| Форматы | PNG, JPG, GIF, WebP, SVG |
| Схема data: | RFC 2397, 1998 |
| Base64 | RFC 4648, 2006 |
| Разумный предел | 10–20 КБ |
| Данные на сервер | не уходят |
Как пользоваться
Инструмент переводит картинку в 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 из непроверенных источников в свой код без просмотра.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Задайте вес — 100 КБ, 500 КБ, 1 МБ — и качество подберётся само. Пакетно, с автоуменьшением, если лимит жёсткий.
ОткрытьBase64 encode / decodeПереводит текст в Base64 и обратно с корректной кириллицей (UTF-8). Построчный режим для списков значений.
ОткрытьСканер QR-кодаСчитывает QR-код и штрихкод камерой или с картинки прямо в браузере: ссылка, Wi-Fi, визитка, телефон и номер товара разбираются по полям.
ОткрытьJWT-декодерРазбор токена JWT: заголовок, полезная нагрузка с расшифровкой стандартных полей, сроки выдачи и истечения в датах, проверка структуры. Без отправки на сервер.
ОткрытьГенератор UUIDВерсии 4 и 7 пачками, пять форматов записи и разбор готового идентификатора с датой создания для v7.
ОткрытьТестер регулярных выраженийПодсветка совпадений и групп, режим замены и разбор самого шаблона по-русски: что делает каждый кусок и почему выражение не сработало.
ОткрытьЕщё инструменты для картинок
Сжатие и изменение размера, обрезка, конвертеры PNG, JPG и WebP, метаданные, водяной знак, аватарка и палитра — в разделе 19 инструментов.