Декодер изображений Base64 | Декодирование и предварительный просмотр изображений онлайн

Что такое декодер изображений base64?

Декодер изображений base64 — это инструмент, который преобразует обратно в изображение текстовую строку, закодированную в base64. Base64 — это способ записывать двоичные данные, например байты файла изображения, используя только 64 обычных текстовых символа: буквы, цифры, +, / и = для заполнения. Браузеры, электронные письма и многие API хранят изображения таким способом, чтобы изображение передавалось внутри обычного текста, а не отдельным файлом. Декодер выполняет обратное преобразование: строка вставляется в поле, и появляется исходное изображение.

Формат URL данных

В интернете изображение base64 обычно записывают как URL данных. Шаблон имеет вид:

Например:

Каждая часть выполняет свою функцию:

• data: обозначает URL данных, а не обычный веб-адрес.
• image/png — это MIME-тип, сообщающий браузеру, что это за тип файла.
• ;base64 указывает, что данные после запятой закодированы в base64.
• Всё после запятой — само закодированное изображение.

Как работает декодер

Декодирование выполняется в четыре шага.

1. Инструмент проверяет, начинается ли строка с data:. URL данных, в котором указан тип медиаданных, отличный от изображения, например data:text/plain, сразу отклоняется, поскольку его невозможно показать как изображение.
2. Из строки удаляются пробелы, табуляции и переносы строк, поскольку длинные строки base64 иногда разбиваются на несколько строк. Данные с процентным кодированием вместо base64, которое также допускается RFC 2397, передаются без изменений.
3. Текст base64 декодируется обратно в необработанные байты.
4. Декодер проверяет первые несколько байтов результата. Каждый распространённый формат изображения начинается с фиксированной последовательности байтов, называемой сигнатурой или «магическим числом». Файлы PNG начинаются с 89 50 4E 47, файлы JPEG — с FF D8 FF и так далее. Декодер сопоставляет эти сигнатуры и присваивает изображению соответствующий тип.

Приоритет имеют байты, а не метка. Если в URL данных указано data:image/png, но байты начинаются с FF D8 FF, декодер заново формирует URL как data:image/jpeg, поэтому строка, предлагаемая кнопкой «Копировать URL изображения», никогда не описывает своё содержимое неправильно.

Если в строке нет префикса data:, декодер рассматривает её как необработанные данные base64, декодирует их и таким же образом считывает сигнатуру. Если байты не соответствуют ни одной известной сигнатуре изображения и не похожи на текст SVG, декодер сообщает, что строка, по-видимому, не является изображением. Он не угадывает формат и не использует тип по умолчанию.

SVG обрабатывается иначе, поскольку это текстовый формат (XML), а не двоичный, поэтому фиксированной сигнатуры байтов у него нет. Декодер проверяет первые 1024 байта декодированного текста на наличие тега <svg, объявления XML, например <?xml version="1.0"?>, за которым следует такой тег, либо объявления типа документа SVG, за которым следует такой тег. Маркер порядка байтов в самом начале, который некоторые редакторы добавляют в файлы UTF-8, игнорируется. Поскольку SVG нельзя определить по сигнатуре байтов, URL данных с типом image/svg+xml сохраняет указанный в нём тип.

Формула размера изображения в base64

Base64 преобразует каждые 3 байта двоичных данных в 4 текстовых символа. Формула длины закодированных данных имеет вид:

Символы ⌈ ⌉ означают «округлить вверх до следующего целого числа», поскольку base64 всегда работает с группами по 4 символа и дополняет неполную группу знаками =.

Для больших файлов это даёт примерно 33 % увеличения размера, поскольку 4 ÷ 3 ≈ 1,33. У небольших файлов процент увеличения может быть выше, поскольку округление вверх до следующей группы из 4 символов сильнее сказывается при малом объёме исходных данных.

Пример расчёта

Приведённый выше пример PNG после декодирования содержит 85 байта данных изображения. Подставим их в формулу:

Длина строки base64 действительно составляет 116 символов, что совпадает с расчётом. Это на 36 % больше исходных 85 байт (116 ÷ 85 ≈ 1,36), то есть немного больше показателя 33 %, поскольку файл очень мал.

Поддерживаемые форматы изображений

Декодер считывает сигнатуру байтов декодированных данных, чтобы определить формат. Он распознаёт следующие типы:

Как декодировать изображение base64

1. Скопируйте строку base64 с префиксом data:image/... или без него из HTML, CSS, ответа API или электронного письма.
2. Вставьте её в поле ввода.
3. Изображение декодируется автоматически через мгновение после прекращения ввода или после нажатия кнопки декодирования.
4. Декодированное изображение появляется в области предварительного просмотра. Его URL данных можно скопировать кнопкой «Копировать URL изображения», а само изображение — сохранить, щёлкнув по нему правой кнопкой мыши в области предварительного просмотра и выбрав сохранение изображения, поскольку в браузере оно отображается как обычный элемент изображения.

Распространённые случаи использования изображений base64

• Встраивание в HTML, CSS или JavaScript: размещение данных изображения непосредственно в коде устраняет необходимость в отдельном запросе файла.
• Шаблоны электронных писем: некоторые почтовые клиенты по умолчанию блокируют изображения по внешним ссылкам, но встроенное изображение base64 по-прежнему отображается.
• Однофайловые HTML-инструменты: целую страницу, включая изображения, можно передать как один автономный файл.
• Ответы API: изображение может передаваться внутри полезной нагрузки JSON без отдельной конечной точки.
• Фоны и значки CSS: небольшие значки иногда записывают непосредственно в таблицу стилей как URL данных.

Компромиссы при использовании изображений base64

Кодирование base64 удобно, но имеет свои издержки:

• Закодированный текст примерно на треть больше исходного файла.
• Браузеры не могут кэшировать встроенное изображение так же, как файл по ссылке, поэтому оно загружается заново при каждой загрузке содержащей его страницы или таблицы стилей.
• Браузер должен декодировать текст base64 до отображения изображения, что требует небольшого дополнительного объёма вычислений.
• Из-за увеличения размера и отсутствия кэширования встраивание base64 подходит для небольших изображений, например значков и простых логотипов. Большие фотографии обычно лучше предоставлять как обычные файлы изображений.

Часто задаваемые вопросы

Что такое декодер изображений base64?

Это инструмент, который преобразует закодированную в base64 текстовую строку обратно в просматриваемое изображение, например файл PNG, JPEG, GIF, WebP, BMP или SVG.

Как декодировать изображение base64?

Вставьте строку base64 с префиксом data:image/... или без него в декодер. Он прочитает строку, декодирует её и покажет получившееся изображение.

Можно ли декодировать строку base64 без префикса URL данных?

Да. Декодер рассматривает её как необработанные данные base64, декодирует байты и считывает первые несколько байтов, чтобы определить формат по сигнатуре, например PNG, JPEG, GIF, WebP, BMP или ICO. SVG определяется по наличию тега <svg в декодированном тексте. Если ни одна из сигнатур не совпадает, декодер сообщает, что строка, по-видимому, не является изображением, вместо того чтобы угадывать формат.

Почему моё изображение base64 не декодируется?

В большинстве случаев причина одна из трёх. Строка может содержать символы, отсутствующие в стандартном алфавите base64: A–Z, a–z, 0–9, +, / и =; в варианте base64url, используемом в некоторых веб-токенах, вместо них применяются - и _, и такой вариант не принимается. Строка могла быть оборвана, из-за чего её длина стала на единицу больше числа, кратного четырём, а у корректной строки base64 такого быть не может. Или байты просто могут не соответствовать одному из поддерживаемых форматов изображений. Само по себе отсутствие дополнения = не является проблемой, а пробелы и переносы строк удаляются перед декодированием.

Является ли кодирование base64 разновидностью защиты или шифрования?

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

Насколько строка base64 больше исходного изображения?

Для больших файлов — примерно на треть, поскольку каждые 3 байта исходных данных превращаются в 4 текстовых символа. Изображение размером 100 КБ после кодирования занимает примерно 133 КБ. У небольших изображений процент увеличения может быть несколько выше из-за округления.

История

Base64 возник из схем кодирования, разработанных в 1970-х и 1980-х годах для передачи двоичных данных через почтовые системы, поддерживавшие только обычный текст; для электронной почты этот подход был формализован в RFC 989 (1987), а позднее — в RFC 1421. Использование этого формата для встраивания изображений в веб-страницы стало возможным после определения схемы URL data: в RFC 2397 (1998), а в середине 2000-х этот подход стал более распространённым, поскольку разработчики искали способы сократить число отдельных HTTP-запросов, особенно при медленных мобильных соединениях.

Источники

1. RFC 4648: Кодировки данных Base16, Base32 и Base64
2. RFC 2397: Схема URL «data»
3. MDN Web Docs: URL данных
4. Стандарт WHATWG для определения MIME-типа