Картинка в Base64 онлайн: data URL, CSS и HTML

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

Нажмите Выберите файл и выберите картинку или перетащите её в окно. Текст Base64 появится под ней.
Скопируйте Data URL, Текст Base64, Правило фона в CSS или Тег картинки HTML кнопкой «Копировать» рядом с ним.
Чтобы пойти обратным путём, вставьте текст Base64 или data URL в поле под Текст Base64 или data URL и нажмите Показать картинку.
Нажмите Скачать картинку, чтобы сохранить её с типом и расширением, которые у неё есть.

Что такое Base64

Base64 записывает любые байты 64 безопасными буквами и цифрами (RFC 4648). Каждые три байта становятся четырьмя символами, поэтому текст примерно на треть больше файла. Он ничего не сжимает и ничего не прячет: любой может его декодировать.

Что такое data URL

data URL (RFC 2397) кладёт файл внутрь самого адреса: data:, затем тип картинки, затем ;base64, и текст Base64. Браузер показывает его в теге картинки или в фоне CSS, не запрашивая файл у сервера. Это подходит для маленьких картинок и значков; большая картинка делает страницу тяжёлой.

Картинка остаётся на вашем устройстве

Файл читается и превращается в текст в вашем браузере, и вставленная строка тоже читается там. Ничего не загружается. Тип вставленной картинки определяется по первым байтам, поэтому неверная подпись не обманет страницу.

Пример: маленький значок

PNG-значок размером 3 000 байт превращается примерно в 4 000 символов текста Base64, то есть на треть больше файла. Перед ним data URL добавляет 22 символа: data:image/png;base64,.

Частые вопросы

Загружается ли моя картинка при преобразовании?

Нет. Файл читается и превращается в текст Base64 в вашем браузере, на вашем устройстве. Проверить можно так: после загрузки страницы выключите интернет и преобразуйте картинку.

Почему текст Base64 больше моего файла?

Base64 записывает каждые три байта файла четырьмя символами, поэтому текст примерно на 33 % больше. Это просто другая запись тех же байтов.

Когда использовать data URL?

Data URL подходят для маленьких картинок, таких как значки, заглушки и небольшие логотипы, так как для них не нужен отдельный запрос к серверу. Для больших фотографий лучше загрузить файл и дать на него ссылку, потому что Base64 утяжеляет страницу и отдельно не кэшируется.

Можно ли вставить data URL с веб-страницы?

Да. Вставьте весь data URL, начиная с data:, или только часть Base64 после запятой. Тип картинки определяется по байтам, поэтому неверная подпись в заголовке не важна.

Почему страница не показывает очень длинный текст?

Текстовое поле может тормозить на миллионах символов, поэтому текст Base64 длиннее 2 миллионов символов не показывается. Скачайте его как текстовый файл кнопкой.

Защищает ли Base64 картинку от посторонних?

Нет. Base64 — это кодирование, а не шифрование. Любой, у кого есть текст, декодирует его обратно в ту же картинку за один шаг, поэтому не полагайтесь на него, чтобы сохранить картинку закрытой.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..