CodeKitHubЧто это за инструмент?
Base64 — это способ представить бинарные данные, например необработанные байты изображения, в виде обычного текста, используя только буквы, цифры и несколько символов. Поскольку это обычный текст, изображение, закодированное в Base64, можно встроить прямо в HTML, CSS или JSON вместо того, чтобы ссылаться на отдельный файл.
«Data URL» оборачивает этот текст Base64 небольшим префиксом (data:image/png;base64,), который сообщает браузеру тип файла, чтобы его можно было сразу вставить в атрибут src или url() и отобразить без дополнительного запроса.
Зачем его использовать?
- Получите оба формата сразу — полный data URL для HTML/CSS и необработанный Base64 (без префикса) для встраивания в JSON или конфигурационные файлы.
- Без обращения к серверу: устраняет один HTTP-запрос для небольших иконок, аватаров или встроенных изображений.
- Сохраняет исходные байты файла в точности — без перекодирования и потери качества, в отличие от инструментов, которые декодируют и пересохраняют изображение.
- Показывает разницу в размере, чтобы вы понимали, чем жертвуете ради удобства.
- Конфиденциально: файл читается локально с помощью FileReader API браузера и никогда не покидает ваше устройство.
Как использовать
- Нажмите на область загрузки или перетащите туда файл изображения.
- Скопируйте полный data URL, если вставляете его в <img src> или CSS background-image.
- Скопируйте необработанный Base64 (без префикса data:), если встраиваете значение в JSON, YAML или другой конфигурационный формат, который уже знает тип файла.
- Обратите внимание на подсказку о размере — текст Base64 примерно на треть больше исходного бинарного файла.
Пример
Ввод
PNG-файл иконки размером 12 КБ.Результат
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 КБ текста) плюс та же строка без префикса data:.Увеличение размера примерно на 33% — неотъемлемая часть кодирования Base64 (3 байта бинарных данных превращаются в 4 текстовых символа), а не ошибка инструмента.
Где используется каждый формат
| Формат | Типичное использование |
|---|---|
| Полный data URL | HTML <img src="...">, CSS background-image: url(...), встроенные изображения в письмах |
| Необработанный Base64 | JSON-пейлоады API, файлы YAML/конфигурации, поля BLOB в базах данных, пользовательские бинарные протоколы |
Base64 и размер изображения — компромисс на практике
Накладные расходы около 33% означают, что встраивание в Base64 лучше всего подходит для небольших ресурсов: иконка в 2 КБ превращается в безобидные ~2,7 КБ встроенного текста, а фотография в 500 КБ превращается в ~665 КБ текста прямо внутри вашего HTML, что замедляет парсинг и не может кешироваться отдельно от страницы.
Если вы встраиваете много изображений или изображения большего размера, взвесьте выгоду от сэкономленного запроса против стоимости увеличения веса страницы — и подумайте о предварительном сжатии.
→ Кодировщик/декодировщик Base64 · Программа для сжатия изображений
Часто задаваемые вопросы
Почему строка Base64 намного больше, чем файл моего изображения?
Base64 кодирует каждые 3 байта бинарных данных как 4 текстовых символа, что даёт фиксированную накладную нагрузку около 33%. Для изображения в 100 КБ ожидайте примерно 133 КБ текста Base64. Это нормально и неизбежно — это цена представления бинарных данных в виде безопасного, переносимого текста.
В чём разница между data URL и необработанной строкой Base64?
Data URL включает префикс data:image/png;base64,, который сообщает браузеру или средству рендеринга, в какой MIME-тип декодируется следующий текст. Вставляйте полный data URL в HTML src или CSS url(). Необработанный Base64 (всё после запятой) нужен, когда система уже отдельно знает тип файла — например, в поле JSON вроде { "format": "png", "data": "<необработанный base64>" }.
Когда стоит встраивать изображение как Base64 вместо ссылки на файл?
Встраивание в Base64 полезно для небольших, часто переиспользуемых изображений (иконки, логотипы, мелкая графика интерфейса), когда экономия одного HTTP-запроса перевешивает штраф в размере около 33%, или в случаях, когда отдельный файл непрактичен — например, встроенные изображения в письмах или экспорт в один HTML-файл. Для крупных фотографий или всего, что переиспользуется на многих страницах, обычный файл со ссылкой и кешированием браузера почти всегда лучше.
Меняет или сжимает ли преобразование в Base64 моё изображение?
Нет. Base64 — это кодирование текста без потерь, сохраняющее исходные байты в точности — оно не затрагивает пиксели, разрешение или сжатие. Если нужен файл меньшего размера, сначала сожмите изображение с помощью инструмента сжатия изображений, а затем преобразуйте сжатый результат в Base64.
Загружается ли моё изображение куда-либо?
Нет. Файл читается напрямую в вашем браузере с помощью FileReader API и кодируется локально — он никогда не отправляется по сети.