Изображение в Base64
Конвертируйте изображения PNG, JPG, WebP или GIF в data URI Base64, обычную строку Base64, HTML-тег img или CSS-фон. Идеально для встраивания небольших
Перетащите файл изображение сюда
или нажмите, чтобы выбрать файлы
Превратите PNG, JPG, WebP, GIF или SVG в Base64 и получите результат в действительно нужном виде: полный data URI, просто строку Base64, HTML-тег <img> или CSS-объявление background, готовое к вставке.
Встраивание небольшой графики прямо в код убирает сетевой запрос и гарантирует, что иконка появится даже до загрузки таблицы стилей, — поэтому data URI так популярны для иконок, спиннеров и подписей в письмах. Обратная сторона — размер: Base64 примерно на треть больше двоичного файла и не кэшируется отдельно, поэтому ограничьтесь небольшими ресурсами, а крупные изображения подключайте обычной ссылкой.
Как конвертировать изображение в Base64
Выберите изображение
Выберите нужный формат вывода
Скопируйте data URI, тег или CSS
Частые вопросы
Когда изображение лучше встроить, а не подключать ссылкой?
Для небольших часто используемых графических элементов примерно до 10 КБ — иконок, логотипов, спиннеров, — где экономия запроса важнее роста размера. Большие фотографии лучше оставлять файлами, чтобы браузер мог их кэшировать.
Почему строка Base64 больше моего файла?
Base64 кодирует каждые три байта четырьмя символами, что добавляет около 33%. Эти накладные расходы неизбежны в самом кодировании.
Какие форматы можно использовать?
PNG, JPG, WebP, GIF и SVG. Векторный SVG, встроенный как data URI, остаётся масштабируемым, поэтому для иконок это часто лучший выбор.
Работает ли это в CSS так же, как в HTML?
Да, скопируйте форму для CSS, чтобы использовать её в объявлении background-image, либо форму для HTML для атрибута src тега img.
Отобразят ли это почтовые клиенты?
Большинство современных клиентов отображает, но некоторые из соображений безопасности вырезают data URI. Для шаблонов писем разместите изображение на сервере и дайте ссылку, если внешний вид важен.
Моё изображение куда-то загружается?
Нет, кодирование происходит в вашем браузере.
Кратко
| Ввод | изображение |
|---|---|
| Несколько файлов | Да |
| Где работает | В вашем браузере — файлы никуда не загружаются |
| Работает офлайн | Да — после загрузки страницы |
| Цена | Бесплатно, без регистрации, без водяных знаков |
Где конвертации незаметно ломаются
Большинство ошибок конвертации — не про синтаксис, а про смысл. Столбец CSV с почтовыми индексами теряет ведущие нули в тот момент, когда таблица решает, что это число; длинный идентификатор выходит за пределы точности чисел с плавающей запятой; даты меняют смысл в зависимости от того, что идёт первым — день или месяц. Ключи JSON не упорядочены, а массивы упорядочены, и инструмент, сортирующий ключи, ничего не меняет, тогда как сортирующий массивы меняет данные. Unicode — ещё одна ловушка: текст может прийти в UTF-8, в UTF-16 или с BOM, и декодер, который угадает неверно, превращает буквы с диакритикой в «кракозябры». Прежде чем доверять любой конвертации, выборочно проверьте первую и последнюю строку, любое поле с ведущими нулями и любое поле, содержащее кавычки, запятые или переводы строк.
Как выбрать формат данных
JSON — выбор по умолчанию для всего, что возвращает API или читает программа: он естественно работает с вложенными структурами, числами, логическими значениями и null, и его разбирает любой язык. CSV компактнее и открывается прямо в таблице, но в нём нельзя выразить вложенность и нет общего стандарта для разделителя, кавычек и кодировки — именно здесь конвертации и ломаются. XML многословен, но несёт атрибуты, смешанное содержимое и схемы, поэтому до сих пор доминирует в форматах документов и устаревших интеграциях. YAML самый читаемый для конфигурации, но чувствителен к пробелам и удивляет приведением типов («no» превращается в false, версия вроде 1.10 — в 1.1). Выбирайте формат, который предпочитает потребляющий инструмент, а не тот, что выглядит красивее.