Перейти к содержимому
🌄

Base64 в картинку

Вставьте строку Base64 или data URI — увидите картинку, её формат, размер в пикселях и вес и скачаете файлом; строка не уходит на сервер

Инструмент справился с вашей задачей?

Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.

Ваш ответ здесь будет первым.

Этот инструмент ещё ждёт первого комментария

Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Без почты и пароля · публикуем после проверки, обычно за 1–2 дня

Как конвертировать Base64 в картинку и скачать файл

Вставьте строку Base64 или data URI в поле, загрузите файл .txt со строкой или перетащите его на поле — страница раскодирует строку и покажет картинку на шахматном фоне, чтобы была видна прозрачность. Рядом появятся формат, ширина и высота в пикселях и вес файла.

Формат определяется по первым байтам самой картинки, а не по тому, что написано в начале data URI. Если в строке указан PNG, а внутри JPG, страница пометит расхождение и сохранит файл как JPG. Файл скачивается в исходном формате, с расширением по содержимому — image.png, image.jpg, image.svg; имя можно задать своё.

Строка раскодируется в браузере и не уходит на сервер ToolFox, регистрация не нужна. Принимается строка, из которой получается файл до 25 МБ.

  • PNG, JPG, GIF, WebP, AVIF, BMP, ICO, CUR и SVG — формат по содержимому
  • Data URI или чистый Base64, с переносами строк и пробелами
  • Превью на шахматном фоне, размер в пикселях и вес
  • Скачивание файла в исходном формате
  • Понятные ошибки: символ и его позиция, обрезанная строка, не картинка
  • Обработка в браузере: строка не уходит на сервер

Data URI или чистый Base64: что можно вставить

Подойдёт data URI целиком — строка вида data:image/png;base64, и дальше Base64, в любом регистре, — и чистый Base64 без префикса. Если строка скопирована из кода, обёртку страница снимет сама: url() из CSS, атрибут src тега img, картинку из разметки Markdown или строку JSON, в том числе с экранированными косыми чертами.

Переносы строк, пробелы, неразрывные пробелы и невидимые символы нулевой ширины, которые попадают в строку при копировании из писем и документов, убираются. Понимается вариант Base64 для адресов со знаками «-» и «_», строка без «=» в конце и знаки «+», «/» и «=», закодированные для адреса через знак процента. SVG, записанный в data URI без Base64, тоже раскодируется.

Длинная строка в поле показывается началом и концом, но раскодируется целиком.

    Почему строка Base64 не открывается как картинка

    Чаще всего строку скопировали не целиком. Если она оборвана посередине, в конце остаётся лишний символ или у файла нет окончания, и страница скажет, что строка обрезана. Скопируйте её заново — целиком, от data: до последнего символа.

    Вторая причина — посторонние символы. В Base64 бывают только латинские буквы, цифры, «+» и «/» (или «-» и «_») и «=» в конце. Если в строке встретилась кириллица, кавычка или кусок соседнего кода, страница назовёт символ и его позицию — его легко найти и убрать. Если в одной строке смешаны оба алфавита Base64 или «=» стоит посередине, скорее всего, склеены две разные строки.

    Третья — внутри вовсе не картинка. Тип определяется по содержимому: если это, например, PDF, страница скажет, что это не картинка, и предложит скачать файл с расширением .pdf, а незнакомый формат — как .bin. HEIC и TIFF браузеры на Chromium и Firefox не показывают: такой файл можно скачать и перевести в JPG. Для картинки больше 64 Мп, если это не SVG, превью страница не строит, но файл целый, и его можно скачать.

      🔎

      Пример: что за картинка в ответе сервера

      В логе API нашлось поле с длинной строкой из букв и цифр. По названию поля понятно, что это аватар, но какой он и в каком формате — нет.

      1

      Открыть «Base64 в картинку» и вставить строку из лога целиком, вместе с кавычками JSON

      2

      Посмотреть превью, формат и размер в пикселях

      3

      Если появилась пометка о расхождении типа — запомнить, какой формат внутри на самом деле

      4

      Скачать файл: расширение подставится по содержимому

      ✅

      Видно, что за картинка пришла, её настоящий формат и размер, а файл сохранён с правильным расширением. Строка из лога не покидала браузер.

      🧠

      Знаете ли вы?

      🔡

      Формат надёжнее узнавать по байтам, чем по подписи: PNG, JPG и GIF начинаются своими постоянными метками, а SVG узнаётся как текст с тегом svg. Поэтому страница не верит типу, который написан в начале data URI.

      🧮

      Вес файла виден по длине строки: каждые 4 символа Base64 — это 3 байта. Строка в 4 000 символов без «=» в конце — ровно 3 000 байт.

      🎭

      Вариант Base64 для адресов заменяет «+» и «/» на «-» и «_», потому что «+» и «/» в адресе имеют свой смысл. Страница понимает оба алфавита, а если в одной строке встретились оба, подскажет, что склеены две разные строки.

      🛡️

      SVG опасен не как картинка, а как страница. В замере SVG со скриптом, показанный через тег img, не сделал ни одного запроса, а тот же файл, открытый как страница, отправил 3 запроса вместе с cookie. Поэтому здесь SVG никогда не открывается страницей.

      Что страница скажет о строке

      СообщениеЧто это значитЧто делать
      Не Base64: символ и позицияВ строку попал посторонний знак — кириллица, кавычка, кусок кодаНайти символ по номеру позиции и убрать
      Строка обрезанаСтрока скопирована не до конца: лишний символ в конце или у файла нет окончанияСкопировать строку заново целиком
      Смешаны два алфавита или «=» внутриСклеены две разные строкиВставить строки по одной
      Это PDF, а не картинкаВнутри документ, а не картинкаСкачать файл с расширением .pdf
      Формат не распознанВнутри не картинка или незнакомый форматСкачать как .bin и открыть подходящей программой
      Картинка больше 64 МпПревью такого размера страница не строитСкачать файл — он целый
      💡

      Не верьте типу в начале строки

      Префикс data:image/png сообщает только то, что в него написали. Страница определяет формат по самим байтам, сохраняет файл с настоящим расширением и пишет пометку, если тип в префиксе другой. Если внутри не картинка, превью не будет, но файл можно скачать и открыть подходящей программой.

      Как перевести Base64 в картинку: пошаговая инструкция

      1

      Вставьте строку

      Вставьте Base64 или data URI в поле — сочетанием Ctrl+V или кнопкой «Вставить из буфера», если она есть, — либо загрузите файл .txt со строкой или перетащите его на поле.

      2

      Проверьте картинку

      Страница покажет превью на шахматном фоне, формат, ширину и высоту и вес файла. Если что-то не так, появится причина: символ и позиция, обрезанная строка или не картинка.

      3

      Задайте имя

      По умолчанию файл называется image, а расширение ставится по содержимому. Своё имя можно ввести в поле имени файла.

      4

      Скачайте файл

      Нажмите кнопку скачивания: файл сохранится в исходном формате, байт в байт таким, каким его закодировали.

      Примеры: что бывает в строке Base64

      Картинка из ответа API

      Сервис вернул в JSON поле с чистым Base64 без префикса. Строку вставляют как есть: формат определится по содержимому, и картинку можно сразу скачать с правильным расширением.

      Строка из CSS

      В таблице стилей нашлось правило с url() и data URI внутри. Его вставляют вместе с url() и кавычками: обёртка снимется, и станет видно, какая картинка спрятана в стилях.

      Строка с переносами

      Base64 из письма или файла настроек разбит на короткие строки. Переносы и пробелы убираются сами, и картинка собирается из всех строк сразу.

      В начале PNG, а внутри JPG

      В начале data URI написано image/png, а внутри JPG — так бывает, когда тип подставили вручную. Страница пометит расхождение и сохранит файл как JPG, чтобы его открыла любая программа.

      Частые вопросы о Base64 в картинку

      Что можно вставить в поле?
      Data URI целиком — например, data:image/png;base64 и дальше строка — или чистый Base64 без префикса. Переносы строк, пробелы и невидимые символы убираются сами, понимаются вариант для адресов со знаками «-» и «_» и строка без «=» в конце. Строку можно вставить и вместе с обёрткой из кода: url() из CSS, src из HTML, строкой из JSON.
      Почему строка не открывается как картинка?
      Обычно по одной из трёх причин: строку скопировали не целиком, в неё попали посторонние символы или внутри не картинка. Страница называет причину: символ и его позицию, «строка обрезана» или формат, который оказался внутри. Обрезанную строку скопируйте заново целиком, лишний символ уберите по номеру позиции.
      В каком формате скачается картинка?
      В том, который записан в самих байтах, с тем же расширением: PNG — .png, JPG — .jpg, SVG — .svg. Тип из начала data URI страница на веру не берёт: если там указан PNG, а внутри JPG, вы увидите пометку, и файл сохранится как JPG. Имя по умолчанию — image, его можно поменять в поле имени файла.
      Безопасно ли открывать чужую строку Base64?
      Картинка показывается только как картинка. SVG, в котором бывают скрипты, выводится через тег img — в таком режиме браузер скрипты не выполняет; в замере SVG со скриптом не сделал ни одного запроса. SVG и незнакомые файлы скачиваются как двоичные данные и не открываются страницей сайта. Строка раскодируется в браузере и не отправляется на сервер.
      Уходит ли строка на сервер?
      Нет. Строка раскодируется в браузере на вашем устройстве, картинка собирается там же, и ничего не отправляется на сервер ToolFox. Поэтому так можно смотреть и строки из рабочего кода, и картинки из выгрузок API.
      Почему нет превью, хотя строка целая?
      Браузеры на Chromium и Firefox не показывают HEIC и TIFF — такой файл страница предложит скачать и перевести в JPG. Для картинки больше 64 Мп превью страница не строит — такой кадр тяжёл для вкладки. Размер страница читает из заголовка файла заранее, поэтому просто скажет, что картинка слишком большая, а файл можно скачать целым.
      Какие форматы картинок распознаются?
      PNG, JPG, GIF, WebP, AVIF, BMP, ICO, CUR и SVG — по первым байтам файла. HEIC и TIFF тоже узнаются: их можно скачать, но превью не будет. Если внутри не картинка, страница так и скажет: PDF предложит скачать с расширением .pdf, а незнакомый формат — как .bin.
      Как получить Base64 из картинки?
      Для обратного направления есть «Картинка в Base64»: она переведёт файл в data URI, чистый Base64, тег img или CSS, покажет вес файла и длину строки и предупредит, если в фото записана геометка.

      Полезная информация

      🔒 Где раскодируется строка. Всё происходит в браузере на вашем устройстве: строка и картинка не отправляются на сервер ToolFox.

      🛡️ SVG — только как картинка. SVG из строки выводится через тег img с data URI, а не вставляется в страницу разметкой, поэтому скрипты внутри не выполняются: в замере SVG со скриптом, обработчиком onload и внешней картинкой не сделал ни одного запроса. Скачивается такой файл как двоичные данные.

      📐 Размер до показа. Ширину и высоту страница читает из заголовка файла ещё до показа. Для картинки больше 64 Мп превью не строится, но файл остаётся целым и скачивается.

      📱 Браузеры. Мы проверяли раскодирование в Chromium на компьютере; в Safari, Firefox и на телефонах — нет. HEIC и TIFF в data URI показывает только Safari: TIFF — по документации MDN, HEIC — по таблице caniuse, с Safari 17.

      Другие инструменты для картинок и Base64

      Закодировать картинку обратно, перевести её в другой формат или сделать легче:

      Комментарии

      Этот инструмент ещё ждёт первого комментария

      Без почты и пароля · публикуем после проверки, обычно за 1–2 дня

      • Руслан АвдеевОт автора проекта
        Все инструменты на ToolFox бесплатны, и я их дорабатываю сам. Напишите, если инструмент считает неверно, чего-то не хватает или что-то стоит поправить, — по таким комментариям я и решаю, чем заняться дальше.

      Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.