Конвертер Image to base64 превращает картинку в строку Base64 и сразу даёт готовые варианты: чистый Base64, Data URI, тег <img> и правило CSS background-image. Так изображение можно вставить прямо в HTML, CSS или письмо без отдельного файла.
Как это работает
Файл читается в браузере, его байты кодируются в Base64, а впереди дописывается тип: data:image/png;base64,iVBORw0KGgo.... Браузер понимает такую строку как обычную картинку.
Пример использования
- HTML:
<img src="data:image/svg+xml;base64,PHN2Zy8+"> - CSS:
background-image: url("data:image/png;base64,...")
Когда встраивать картинку
- Маленькие иконки и спрайты (до 2–5 КБ) — экономится отдельный HTTP-запрос.
- HTML-письма — встроенные картинки показываются без загрузки внешних ресурсов (но часть почтовых клиентов, например Gmail, data: URI не показывает — проверяйте).
- CSS — фоновые иконки, курсоры, мелкие декоративные элементы рядом со стилями.
- Однофайловые страницы, отчёты, прототипы, которые нужно передать одним файлом.
Когда не стоит
- Большие изображения и фото — Base64 на ~33% тяжелее файла, и страница грузится дольше.
- Кеш — отдельный файл браузер кеширует один раз, а встроенный скачивается заново вместе с каждым HTML или CSS при их изменении.
- Одна картинка на многих страницах — лучше отдельный файл: он загрузится один раз.
- Встроенная картинка блокирует разбор CSS/HTML, пока не загрузится весь текст, и её нельзя загрузить лениво (lazy loading).
Полезно знать
- Для SVG часто выгоднее не Base64, а URL-кодирование:
data:image/svg+xml,%3Csvg...— получается короче. - Загрузка по URL работает, только если сервер картинки разрешает CORS; иначе скачайте файл и загрузите его.
- Тип (image/png, image/jpeg, image/gif, image/webp, image/svg+xml) определяется по файлу автоматически.
Как пользоваться страницей
- Укажите адрес изображения и нажмите «Загрузить» — или перетащите файл в область загрузки либо выберите его.
- Скопируйте нужный вариант: Base64, Data URI, тег image или CSS background.