ToolBox ProБлогEnglish

Кодировщик изображений Base64

Конвертируйте изображения в Base64 data URI для CSS и HTML. Перетаскивание PNG, JPG, GIF, WebP, SVG и декодирование обратно. Бесплатно, всё в браузере.

Всё работает в вашем браузере — данные не отправляются на сервер.

Зачем использовать кодировщик изображений Base64?

Иконка весит два килобайта, а для неё браузер делает отдельный запрос к серверу. Встройте её как Base64 data URI — и запрос исчезнет: картинка живёт прямо в HTML. Это работает для мелких иконок, email-шаблонов и одностраничных HTML-документов. Перетащите картинку в окно — инструмент закодирует её, покажет, насколько вырос размер, и выдаст готовый фрагмент: raw data URI, тег img или CSS background-image.

Ключевые возможности

  • Перетаскивание или выбор файлов изображений (PNG, JPG, GIF, WebP, SVG)
  • Мгновенная конвертация изображений в Base64 data URI
  • Конвертация Base64 обратно в загружаемые изображения
  • Сравнение размеров: оригинал vs Base64 кодирование
  • Копирование как raw Base64, HTML img тег или CSS background-image

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

  1. Перетащите или выберите файлы изображений для кодирования
  2. Просмотрите Base64 data URI и сравнение размеров
  3. Скопируйте как raw data URI, HTML img тег или фрагмент CSS
  4. Или вставьте Base64 data URI для декодирования и скачивания как изображение

Технические детали

Этот инструмент использует API FileReader с readAsDataURL для кодирования, что создаёт строку data URI, содержащую MIME тип и двоичные данные в кодировке Base64. Для декодирования используется функция atob() для конвертации Base64 обратно в двоичный формат, затем создаётся Blob для скачивания. Вся обработка происходит на стороне клиента.

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

Когда следует использовать изображения в кодировке Base64?

Кодирование Base64 лучше всего подходит для маленьких изображений (до 10 КБ), таких как иконки и логотипы, где устранение HTTP запроса перевешивает увеличение размера на ~33%. Это также полезно для email шаблонов, однофайловых HTML документов и CSS-проектов, где внешние файлы недоступны.

Насколько больше становится изображение в кодировке Base64?

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

Полезные статьи

Base64 простыми словами: что это такое и зачем он нужен

Что значит строка SGVsbG8sIHdvcmxkIQ==, почему Base64 — это не шифрование, где он встречается: письма, JWT, data-URI. Как быстро закодировать и декодировать онлайн.

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

Кодирование / Декодирование Base64

Кодируйте текст в Base64 или декодируйте строки Base64 с поддержкой Unicode

URL-кодирование / Декодирование

Кодируйте и декодируйте URL-адреса с полным или компонентным режимом

Определение кодировки

Определите кодировку текста или файла онлайн: UTF-8, UTF-16, ASCII, Windows-1251, KOI8-R. Уверенность определения, разбор байтов и превью «как выглядит текст» в разных кодировках

Кодирование / Декодирование HTML-сущностей

Кодируйте и декодируйте HTML-сущности вроде < > & "

Декодер JWT-токенов

Декодируйте JWT-токены для просмотра заголовка, полезной нагрузки и подписи

Шифр ROT13

Кодируйте или декодируйте текст с помощью шифра подстановки ROT13

← На главную