Что такое изображение в Base64?
Изображение в Base64 преобразует файл изображения в строку в кодировке Base64 с помощью встроенного в браузер API FileReader. Результат можно отформатировать как необработанную строку Base64, полный data URI, объявление CSS background-image или тег HTML img — в зависимости от целевого сценария использования.
Как использовать изображение в Base64
- Перетащите файл изображения в зону загрузки или нажмите, чтобы выбрать.
- Выберите выходной формат: Data URI, необработанный Base64, CSS background-image или тег HTML img.
- Скопируйте результат в буфер обмена одним щелчком.
- Вставьте напрямую в HTML, CSS, JSON или любое другое место.
Понимание кодирования изображений в Base64 ▾
Пример
Типичные сценарии использования
- Встроить небольшой логотип в HTML-письмо
- Встроить индикатор загрузки или значок в CSS-файл
- Передать данные изображения как строку JSON в API
- Создавайте самодостаточные HTML-файлы со встроенными изображениями
Зачем использовать этот инструмент
- Четыре формата вывода — data URI, чистый Base64, CSS и HTML.
- Показывает исходный и закодированный размер, а также процент увеличения.
- Предупреждает, если изображение достаточно большое, чтобы повлиять на производительность страницы.
- Файлы не загружаются — всё работает в вашем браузере.
Часто задаваемые вопросы
Base64 — это способ кодирования двоичных данных (например, изображения) в виде простой текстовой строки ASCII. Data URI — это строка Base64 с префиксом MIME-типа в формате data:image/png;base64,... — её можно напрямую указать в атрибуте src тега img или в CSS background-image, чтобы встроить изображение без отдельного запроса файла.
Data URI идеально подходят для небольших значков, логотипов или встроенных изображений в HTML-письмах, где внешние ссылки на файлы могут блокироваться. Для больших изображений они увеличивают вес страницы и могут ухудшить производительность, поэтому используйте их умеренно.
Нет. FileReader API кодирует изображение прямо в вашем браузере. Изображение не покидает ваше устройство.
Кодирование Base64 увеличивает размер данных примерно на 33%, потому что каждые 3 байта двоичных данных становятся 4 символами ASCII. Изображение размером 100 KB становится строкой Base64 примерно на 133 KB.