Бесплатно · без регистрации · для HTML и CSS
Картинка в Base64
Переведи изображение в Base64 и готовый data:URI — со сниппетами для HTML, CSS и сырой строкой. Показываем реальный вес после кодирования и подскажем, когда инлайн выгоден. Можно пережать в WebP.
Загрузка инструмента...
Готовые сниппеты
data:URI, CSS background, HTML <img> и сырая строка — копируй одной кнопкой.
Честный вес
Показываем реальный размер после кодирования и раздутие +33% — без сюрпризов.
Пережать в WebP
Уменьши исходные байты — а значит и Base64-строку — сменой формата на WebP.
Уменьшить размер
Опция «до 256 px» делает инлайн лёгким для иконок и лого.
Подсказка о выгоде
Предупредим, когда инлайн тяжеловат и лучше оставить обычный файл.
Данные не сохраняются
Кодирование в памяти на время запроса, без хранения и логирования.
Как это работает
Как перевести картинку в Base64 — 3 шага
Перетащи JPG, PNG или WebP в окно инструмента. Слева появится превью и размер исходного файла.
Оставь «Как есть» или пережми в WebP для меньшего веса. При желании — «Уменьшить до 256 px», чтобы инлайн был лёгким. Нажми «Получить Base64».
Готовые блоки: data:URI, CSS background, HTML <img> и сырая Base64-строка. Кнопка «Копировать» рядом с каждым. Мы покажем реальный вес после кодирования.
FAQ
Вопросы о Base64 и data:URI
Base64 — способ записать бинарные данные (например картинку) обычным текстом из букв, цифр и знаков. data:URI — это строка вида «data:image/png;base64,...», которую можно вставить прямо в атрибут src тега или в CSS background — тогда картинка встроена в код и не требует отдельного файла и HTTP-запроса.
Главная польза — убрать лишний HTTP-запрос: маленькая иконка, логотип или SVG-спрайт, вшитые прямо в HTML или CSS, загружаются вместе со страницей, без отдельного обращения к серверу. Это ускоряет отрисовку для крошечных ассетов и удобно для email-вёрстки, где внешние картинки часто блокируются.
Да, примерно на 33%. Base64 кодирует каждые 3 байта данных четырьмя символами, поэтому строка всегда тяжелее исходного файла. Мы честно показываем это: «Изображение 22 КБ → Base64 29 КБ (+33%)». Именно поэтому инлайн оправдан для мелких ассетов (иконки, лого до нескольких КБ), а для крупных фото лучше обычный файл.
Для больших изображений. Тяжёлая Base64-строка раздувает HTML/CSS, который нельзя закешировать отдельно от страницы (в отличие от обычного файла картинки), и замедляет первую отрисовку. Если картинка больше нескольких десятков КБ — оставьте её обычным файлом. Инструмент предупредит, когда инлайн получается тяжёлым, и предложит пережать в WebP или уменьшить размер.
Да, двумя способами прямо здесь: пережать картинку в формат WebP (обычно заметно легче JPG/PNG при том же виде) и/или уменьшить ширину до 256 px. Оба варианта сокращают исходные байты, а значит и итоговую Base64-строку.
Мы даём сразу четыре готовых блока: data:URI (для src и url()), CSS-сниппет background-image, HTML-тег и сырую Base64-строку без префикса. Копируйте нужный одной кнопкой.
Этот инструмент работает с растровыми картинками (JPG, PNG, WebP). Если вам нужно встроить SVG, его можно вставлять в HTML напрямую как разметку — это обычно эффективнее, чем Base64. А для перевода SVG в растровую картинку используйте инструмент «SVG в PNG».
Нет. Картинка кодируется в памяти сервера на время запроса и сразу возвращается строкой — ничего не хранится и не логируется.
Помимо этого инструмента
Это только один из инструментов Gobanana
Под капотом — полноценный ИИ-редактор: нейрофотосессии, карточки для Wildberries и Ozon, замена фона, реставрация старых снимков — текстовой командой на русском, за 30 секунд.
Бесплатно · без установки · 3 генерации в подарок при регистрации
Смотри также
Другие возможности Go Banana
Что такое Base64 и data:URI
Base64 — это кодировка, которая записывает бинарные данные (картинку, шрифт, любой файл) обычным текстом из 64 символов: латинские буквы, цифры, + и /. Такую строку можно вставить прямо в код. Для картинок используют формат data:URI:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Эту строку можно подставить в src тега <img> или в CSS background-image: url(...) — и картинка встроится прямо в разметку, без отдельного файла.
Зачем встраивать картинку в код
- Меньше HTTP-запросов — мелкая иконка или лого грузятся вместе со страницей, без отдельного обращения к серверу.
- Email-вёрстка — во многих почтовых клиентах внешние картинки блокируются; встроенная в CSS/HTML отображается сразу.
- Автономность — один файл HTML/CSS содержит всё нужное, ничего не «отвалится» при переносе.
- CSS-спрайты и псевдоэлементы — маленькие декоративные изображения удобно держать прямо в стилях.
Важно: Base64 раздувает вес на ~33%
Кодировка Base64 записывает каждые 3 байта данных 4 символами, поэтому строка всегда тяжелее исходного файла примерно на треть. Мы показываем это честно:
Изображение 22 КБ → Base64 29 КБ (+33%)
Поэтому инлайн через Base64 оправдан только для мелких ассетов — иконок, логотипов, крошечных фонов (до нескольких КБ). Для больших фото это вредно.
Когда Base64 — плохая идея
| Ситуация | Почему плохо |
|---|---|
| Большое фото (десятки КБ и больше) | Раздувает HTML/CSS, замедляет первую отрисовку |
| Картинка используется на многих страницах | Обычный файл кешируется браузером, а инлайн — нет |
| Часто меняющееся изображение | Пришлось бы менять весь HTML/CSS вместо одного файла |
Для таких случаев оставляйте картинку обычным файлом. Инструмент предупредит, когда инлайн получается тяжёлым.
Как уменьшить вес инлайна
Если Base64-строка получается большой, здесь же можно:
- Пережать в WebP — современный формат, который обычно заметно легче JPG/PNG при том же виде.
- Уменьшить ширину до 256 px — для иконок и лого этого более чем достаточно, а вес падает в разы.
Что дальше
- Нужен крошечный размытый плейсхолдер для ленивой загрузки фото — сделай LQIP.
- Встраиваешь SVG — его лучше вставлять как разметку; а перевести SVG в PNG можно отдельным инструментом.
- Хочешь просто уменьшить вес картинки-файла — используй сжатие фото.