Как пользоваться
Картинка → Base64. Добавьте изображение — получите его в виде data URL, «голого» Base64, готового правила CSS или тега <img>. Скопируйте результат и вставьте в код.
Base64 → картинка. Вставьте data URL или строку Base64 — изображение появится сразу, его можно скачать. Формат определяется по содержимому, даже если в заголовке он указан неверно.
Всё работает в браузере, файл никуда не загружается.
Пример
Прозрачный PNG размером 1 × 1 пиксель весит 70 байт, а в виде data URL выглядит так:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGNgYGBgAAAABQABpfZFQAAAAABJRU5ErkJggg==
Когда это нужно
- Маленькие иконки и картинки прямо в CSS или HTML — без лишнего запроса к серверу.
- Изображения внутри JSON, писем и шаблонов, где нельзя приложить файл.
- Отладка: посмотреть, что за картинка спрятана в строке Base64 из API или базы данных.
Частые вопросы
Почему Base64 весит больше файла? Каждые 3 байта превращаются в 4 символа, поэтому объём растёт примерно на треть.
Стоит ли так вставлять большие фото? Нет: страница станет тяжелее, а браузер не сможет закешировать картинку отдельно. Data URL хорош для файлов размером в несколько килобайт. Большие изображения лучше сжать и подключить обычной ссылкой.
Чем Base64 отличается от шифрования? Это просто другая запись тех же данных — раскодировать её может кто угодно. Для текста есть кодирование Base64.