PixelTool

Base64 кодировщик

Кодируйте и декодируйте данные в формате Base64

Текст
Base64

Что такое строка data:image/png;base64

Если вы встретили в коде страницы длинную строку вида data:image/png;base64,iVBORw0KG..., это картинка, закодированная в Base64 и вставленная прямо в HTML или CSS вместо ссылки на файл. Быстрее всего увидеть саму картинку так: скопировать строку целиком (вместе с data:) и вставить в адресную строку браузера. Он отрисует её как обычное изображение.

Чем URL-безопасный Base64 отличается от обычного

Переключатель «URL-безопасный» меняет два символа алфавита: + и / на - и _, а завершающие = убираются. Так строку можно безопасно использовать прямо в адресе страницы. Именно в таком виде закодированы части JWT-токенов . Если вставить такую часть сюда без включённого переключателя, декодер покажет ошибку или мусор вместо текста.

Зачем вообще нужен Base64, какие ошибки чаще всего ломают декодирование и что лежит внутри длинной строки с картинкой, разобрано в статье Что такое Base64: как раскодировать строку и посмотреть, что внутри.

Похожие инструменты

Другие полезные инструменты из той же категории

JSON Web Tokens
JWT: расшифровать токен

Покажет payload, claims, алгоритм и срок действия. Токен не уходит с вашего устройства

Попробовать
SVG
SVG URL кодировщик

Кодируйте SVG для использования в CSS свойстве background-image

Попробовать
JSON: форматирование, проверка и перевод в YAML

Вставьте JSON или YAML — получите читаемый вид, сжатую версию, перевод между форматами и разбор структуры.

Попробовать
CSS clamp(): адаптивный шрифт без медиазапросов

Задайте минимальный и максимальный размер — калькулятор соберёт clamp(), и шрифт будет плавно тянуться за шириной экрана.

Попробовать
CSS Flexbox генератор

Визуальный генератор CSS Flexbox: расположите и выровняйте элементы, скопируйте готовый код CSS или Tailwind.

Попробовать
CSS Grid генератор

Визуальный генератор CSS Grid: постройте адаптивную сетку без кода и скопируйте результат в CSS или Tailwind.

Попробовать
Специфичность CSS: калькулятор веса селектора

Вставьте селектор и узнайте его вес — станет понятно, какое правило победит в каскаде и почему стиль не применяется.

Попробовать
Cubic-bezier: кривая плавности для CSS

Потяните за контрольные точки и получите свою cubic-bezier() для transition-timing-function или animation-timing-function.

Попробовать
Конвертер цветов

Переводите цвет между HEX, RGB, HSL, CMYK и LAB: вставьте значение в любом формате — остальные посчитаются автоматически.

Попробовать

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

Base64 - это метод преобразования двоичных данных в ASCII-текст с использованием 64 символов (A-Z, a-z, 0-9, +, /). Широко используется в веб-разработке, вложениях электронной почты, data URL и API, где двоичные данные нужно передавать как текст.

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

Можно кодировать файлы любого типа: изображения (PNG, JPG), документы (PDF, DOC), текстовые файлы, исполняемые файлы и т.д. Инструмент конвертирует двоичное содержимое в текст Base64, независимо от формата файла.

Кодирование Base64 увеличивает размер данных примерно на 33%, поскольку использует 4 ASCII-символа для представления каждых 3 байтов исходных данных. Эти накладные расходы - компромисс за безопасную передачу через текст.

Используйте Base64 для встраивания небольших изображений в CSS/HTML как data URLs, кодирования двоичных данных для JSON API, подготовки загрузки файлов для веб-форм и в любых ситуациях, где нужно передавать двоичные данные через текстовые каналы.