Конвертер изображений в Base64

Что делает инструмент

Этот инструмент превращает изображение в текст Base64 и готовый к вставке data URI. Data URI встраивает изображение прямо в HTML, CSS, Markdown, JSON или письмо, поэтому странице нужно на один HTTP-запрос меньше, а фрагмент работает без размещения отдельного файла. Работает и в обратную сторону: вставьте Base64 или data URI, чтобы посмотреть изображение и скачать его.

Как пользоваться

1. Перетащите изображение в область загрузки, нажмите Выбрать изображение или нажмите Пример, чтобы загрузить логотип в SVG.
2. Предпросмотр показывает изображение с его типом, размером файла, размером Base64 и размерами в пикселях.
3. Выберите Формат вывода:
   • Data URI: data:image/png;base64,… — для атрибутов src и JSON.
   • Только Base64: голая строка, при желании с переносом через 76 символов для MIME и PEM.
   • CSS background: полное объявление background-image: url("…");.
   • HTML <img>: тег изображения с data URI в src.
   • Markdown: ![image](data:…).
4. Скопируйте результат. Чтобы декодировать, вставьте Base64 или data URI в поле ввода и нажмите Скачать изображение.

Пример

PNG размером 2×1 пиксель превращается в:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

В CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Когда встраивать изображения

Встраивание полезно для маленьких часто используемых изображений: иконок, крошечных фонов, индикаторов загрузки и подписей в письмах. Для фотографий и крупной графики оно подходит плохо: Base64 добавляет примерно треть к размеру, изображение нельзя закэшировать отдельно от страницы или таблицы стилей, и оно задерживает разбор остальной части файла. Как правило, держите встроенные изображения в пределах нескольких килобайт. Для SVG data URI с процентным кодированием (data:image/svg+xml,…) часто меньше, чем Base64, и инструмент принимает оба варианта.