Как преобразовать изображение в Base64
- 1Перетащите изображение в рамку, вставьте скриншот из буфера обмена или нажмите «Выбрать файл».
- 2Выберите формат: data URI, только Base64, HTML, CSS или Markdown.
- 3Скопируйте код и вставьте его в страницу, таблицу стилей или запрос к API.
Форматы вывода
data:image/png;base64,iVBOR…Подходит везде, где можно указать URL.iVBORw0KGgoAAAANSUhEUg…Для полей JSON и API, которым нужна только часть Base64.<img src="data:image/png;base64,…" alt="">Встроенная картинка для HTML-писем и страниц из одного файла.background-image: url("data:…");Мелкие иконки и узоры без лишнего запроса.README и заметки с поддержкой data URI.Когда стоит встраивать изображение
Base64 увеличивает изображение примерно на треть, а встроенную картинку нельзя кешировать отдельно от страницы. Встраивание оправдано для мелких иконок, логотипов в HTML-письмах и документов из одного файла. Фото и всё, что больше примерно 10 КБ, обычно быстрее отдавать обычным файлом.
Частые вопросы
Есть ли ограничение на размер файла?
Жёсткого ограничения нет — всё происходит в браузере. Но большие изображения дают очень длинные строки, которые замедляют редакторы, поэтому встраивайте небольшие картинки.
Ухудшается ли качество при преобразовании?
Нет. Байты файла кодируются как есть, без масштабирования и пересжатия. При декодировании получается тот же самый файл.
Работают ли Base64-картинки в письмах?
Apple Mail и большинство мобильных клиентов их показывают. Gmail и некоторые версии Outlook блокируют data URI, так что проверьте в клиентах вашей аудитории.
Как превратить строку обратно в изображение?
Вставьте её в Base64 в изображение, чтобы посмотреть и скачать.