Base64 — схема кодирования бинарных данных в текстовую форму из 64 символов ASCII. В веб-разработке используется для встраивания изображений в HTML/CSS, передачи файлов в JSON и хранения бинарных данных в текстовых протоколах. В этой статье разберём принцип работы, сценарии применения и подводные камни.
Для кодирования и декодирования Base64 используйте Base64 Encoder на reChecker.
Как работает Base64
Принцип
Данные разбиваются на блоки по 3 байта (24 бита). Каждый блок кодируется 4 символами из алфавита: A–Z, a–z, 0–9, +, /. Символ = используется для паддинга, когда исходный размер не кратен 3.
Исходные байты: [01001000] [01100101] [01101100]
↓
Base64: S G V s
Размер
Base64 увеличивает объём данных примерно на 33%: 3 байта становятся 4 символами. Для изображения 10 КБ результат — около 13.3 КБ.
| Исходный размер | Base64 размер |
|---|---|
| 1 КБ | ~1.37 КБ |
| 10 КБ | ~13.3 КБ |
| 100 КБ | ~133 КБ |
Применение в вебе
Data URI в HTML и CSS
Встраивание изображений напрямую в разметку или стили:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Иконка">
.hero {
background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAA...') center/cover;
}
Плюсы: нет отдельного HTTP-запроса, контент доступен сразу. Минусы: увеличение размера HTML/CSS, отсутствие кэширования отдельно от страницы.
Передача файлов в JSON
API часто не поддерживают бинарные данные напрямую. Base64 позволяет передать файл в JSON-поле:
{
"filename": "document.pdf",
"content": "JVBERi0xLjQKJeLjz9MK..."
}
Сервер декодирует строку и сохраняет как файл.
Basic Authentication
Заголовок Authorization с логином и паролем:
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Строка username:password кодируется в Base64. Важно: Base64 не шифрование. Данные легко декодируются. Используйте только поверх HTTPS.
Хранение в localStorage/sessionStorage
Эти API принимают только строки. Для хранения бинарных данных (например, небольшого изображения) применяют Base64.
Когда использовать Base64
Подходящие сценарии
| Сценарий | Обоснование |
|---|---|
| Критичные иконки (favicon, логотип в header) | Устраняет запрос, ускоряет First Paint |
| Очень маленькие изображения (< 2 КБ) | Накладные расходы на запрос превышают overhead Base64 |
| Динамическая генерация (капча, QR) | Данные уже в памяти, встраивание логично |
| Email-рассылки | Вложения как inline-изображения для лучшей доставки |
Неподходящие сценарии
| Сценарий | Проблема |
|---|---|
| Большие изображения (> 10 КБ) | Рост размера, блокировка рендеринга, нет кэширования |
| Много мелких иконок | Спрайт или SVG-спрайт эффективнее |
| Контент, меняющийся редко | Кэширование отдельного файла выгоднее |
| Критичный CSS | Увеличение размера блокирующего ресурса |
Ограничения и подводные камни
Размер URL
Браузеры и серверы ограничивают длину URL (часто 2–8 КБ). Длинные Data URI в url() могут не работать в старых браузерах. Для больших данных используйте Blob URL или отдельные файлы.
Кэширование
Встроенное изображение кэшируется только вместе со страницей или CSS-файлом. При обновлении одной иконки пользователь загрузит весь обновлённый ресурс заново.
Gzip/Brotli
Текстовые форматы (HTML, CSS, JS) сжимаются. Base64-строка внутри них сжимается плохо — это уже сжатое представление бинарных данных. Отдельный бинарный файл (PNG, JPEG) сжимается лучше при передаче.
Безопасность
Base64 не обеспечивает конфиденциальность. Не кодируйте пароли или токены «для безопасности» — это не шифрование.
Работа с Base64 в коде
JavaScript: кодирование
// Строка в Base64
btoa('Hello, World!'); // "SGVsbG8sIFdvcmxkIQ=="
// Unicode: сначала encodeURIComponent
btoa(encodeURIComponent('Привет')); // "JUUwJUJDJUJFJUUwJUI4JTgxJUUwJUI4JUI0"
JavaScript: декодирование
atob('SGVsbG8sIFdvcmxkIQ=='); // "Hello, World!"
// Unicode
decodeURIComponent(atob('JUUwJUJDJUJF...'));
File/Blob в Base64
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // data:image/png;base64,...
reader.readAsDataURL(file);
Node.js
const buffer = fs.readFileSync('image.png');
const base64 = buffer.toString('base64');
Практические рекомендации
- Порог размера — не встраивайте изображения больше 2–4 КБ через Base64
- Критичность — резервируйте Base64 для ресурсов, блокирующих отрисовку
- Инструменты — используйте Base64 Encoder на reChecker для быстрой проверки и конвертации
- Альтернативы — для иконок рассмотрите SVG-спрайты, для изображений — lazy loading с отдельными файлами
- Метрики — проверяйте влияние на LCP и размер документа через DevTools
Base64 — полезный инструмент при осознанном применении. Злоупотребление ухудшает производительность; умеренное использование — решает задачи встраивания и передачи данных.
Альфавит Base64
Стандартный алфавит (RFC 4648): A-Z, a-z, 0-9, +, /. Символ = используется для паддинга в конце. Вариант Base64url (для URL) заменяет + на - и / на _, убирает паддинг — удобно для передачи в query-параметрах и JWT.
Ограничения длины в разных контекстах
| Контекст | Типичный лимит |
|---|---|
| URL в браузере | 2–8 КБ в зависимости от браузера |
| CSS url() | Практически без ограничений, но большие Data URI блокируют рендеринг |
| JSON | Зависит от парсера, обычно до нескольких МБ |
| Email (HTML) | Рекомендуется до 10–20 КБ на изображение |
При превышении лимитов используйте внешние файлы или Blob URL.
Отладка Base64
При проблемах с отображением встроенных изображений проверьте: корректность формата MIME (image/png, image/jpeg, image/svg+xml), отсутствие лишних пробелов и переносов в строке, кодировку (только ASCII). Инструмент Base64 Encoder на reChecker показывает размер до и после кодирования, что помогает оценить overhead.
Base64 в Data URI для SVG
SVG можно встраивать без base64 — в виде «сырого» текста с экранированием спецсимволов:
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">...</svg>');
Спецсимволы (#, ?, &) нужно закодировать. Base64 избавляет от этой необходимости — весь SVG кодируется целиком. Для маленьких SVG «сырой» вариант может быть компактнее; для сложных — base64 проще в поддержке.
Сравнение с внешними файлами
| Критерий | Base64 inline | Внешний файл |
|---|---|---|
| HTTP-запросы | Меньше | Больше |
| Кэширование | Вместе с HTML/CSS | Отдельно |
| Размер | +33% overhead | Исходный |
| Первая отрисовка | Быстрее (нет запроса) | Медленнее (блокировка) |
| Повторное использование | Нет | Да |
Выбор зависит от контекста. Критичные мелкие ресурсы — inline; остальное — внешние файлы с кэшированием.