Как перевести картинку в Base64
- Перетащите изображение в поле, нажмите, чтобы выбрать файл, или вставьте картинку из буфера обмена сочетанием Ctrl+V.
- Выберите формат результата: data URI, «чистый» Base64, HTML, CSS, Markdown или JSON.
- Нажмите Копировать и вставьте код в HTML, CSS, шаблон письма или запрос к API.
Когда стоит встраивать изображения в Base64?
Встроенные Base64-изображения избавляют от лишнего HTTP-запроса — это удобно для небольших иконок, подписей в письмах, HTML-документов из одного файла и данных для API. Но Base64 примерно на 33% больше исходного файла и не кешируется отдельно, поэтому фотографии и всё, что весит больше нескольких килобайт, лучше оставлять обычными файлами.
Форматы результата
- Data URI —
data:image/png;base64,…для атрибутовsrcи CSS. - Только Base64 — «чистая» строка для API и баз данных.
- HTML / CSS / Markdown — готовые фрагменты кода, которые можно сразу вставить.
- JSON — имя файла, MIME-тип и данные в одном объекте.
Часто задаваемые вопросы
Увеличивается ли размер картинки при переводе в Base64?
Да, примерно на треть. PNG размером 30 КБ превращается примерно в 40 КБ текста Base64. Если размер важен, сначала сожмите изображение или уменьшите его разрешение.
Какие форматы изображений можно конвертировать?
Любые, которые умеет открывать ваш браузер: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF и другие. Нужный MIME-тип добавляется в data URI автоматически.
Как использовать картинку в Base64 в CSS?
Выберите формат CSS и вставьте результат в своё правило, например .logo { background-image: url("data:image/png;base64,…"); }.