Перетащите изображение сюда
или нажмите, чтобы выбрать файл · JPG, PNG, WebP, GIF, SVG · до 5 МБ
🖼️ Форматы вывода:
Base64 — закодированная строка без префикса, для передачи в JSON или хранения в базе
Data URL — data:image/png;base64,…, подставляется в любой атрибут со ссылкой на картинку
HTML <img> — готовый тег со встроенным изображением
CSS фон — правило background-image: url(…)
📐 Полезно знать:
— Строка Base64 примерно на 33% тяжелее исходного файла (3 байта → 4 символа)
— Выгодно для маленьких иконок (до 5–10 КБ); большие фото лучше подключать обычными файлами
⚠️ Важно:
— Встроенная картинка не кэшируется отдельно — для повторяющихся изображений выгоднее файл
— Качество не теряется: Base64 не сжимает, а лишь иначе записывает те же данные
Описание
Как пользоваться инструментом
- Загрузите картинку — перетащите файл в зону или нажмите для выбора. Поддерживаются JPG, PNG, WebP, GIF и SVG до 5 МБ.
- Посмотрите превью и размер — инструмент покажет миниатюру и длину получившейся строки.
- Выберите формат вывода — чистый Base64, Data URL, готовый тег
<img>или правило CSS. - Скопируйте или скачайте результат. Кнопка «Загрузить пример» подставит образец, «Очистить» — сбросит.
Всё работает прямо в браузере — изображение не отправляется на сервер.
Что такое Base64 и Data URL
Base64 — это способ записать двоичный файл (в нашем случае картинку) обычной строкой из букв, цифр и нескольких символов. Data URL — это адрес, который содержит сами данные прямо в строке, а не ссылку на отдельный файл. Выглядит он так: data:image/png;base64,iVBORw0KGgo…, где после data: указан тип картинки, а после base64, — её содержимое. Такую строку можно вставить прямо в код страницы, и браузер покажет картинку без обращения к отдельному файлу.
Четыре формата вывода
- Base64. Только закодированная строка — пригодится, когда нужно передать картинку через JSON или сохранить в базе данных.
- Data URL. Полный адрес
data:image/...;base64,...— подставляется в любой атрибут, ожидающий ссылку на картинку. - HTML <img>. Готовый тег картинки со встроенными данными — вставляйте сразу в страницу.
- CSS фон. Правило
background-image: url(...)для оформления блока картинкой.
Зачем встраивать картинку в код
- Меньше запросов к серверу. Маленькие иконки и логотипы, встроенные прямо в HTML или CSS, не требуют отдельной загрузки — страница открывается чуть быстрее.
- Один самодостаточный файл. Удобно для писем, шаблонов и примеров, где нельзя приложить отдельные картинки.
- Быстрые прототипы. Можно показать макет, не настраивая хранение файлов.
Почему строка больше файла
При кодировании в Base64 каждые 3 байта данных превращаются в 4 символа, поэтому объём вырастает примерно на 33%. Картинка 100 КБ станет строкой около 134 КБ. Это нормально для маленьких изображений, но ощутимо для больших — ещё один довод встраивать только лёгкие иконки. Если файл крупный, разумнее сначала сжать изображение и подключить его обычным файлом.
Когда это удобно, а когда нет
- Подходит: маленькие иконки и логотипы (примерно до 5–10 КБ), картинки для одной страницы, изображения в письмах.
- Не стоит: большие фотографии — строка раздувает код, а встроенная картинка не кэшируется отдельно, поэтому для повторяющихся на многих страницах изображений выгоднее отдельный файл.
Как это связано с обычным Base64
Этот инструмент — частный случай кодирования Base64, заточенный под картинки: он сразу даёт Data URL, тег и CSS-правило. Если нужно закодировать или раскодировать произвольные данные — текст или любой файл, — используйте общий кодировщик Base64. А если требуется не встроить, а сменить формат картинки (например, PNG в WebP), пригодится конвертер изображений.
Частые вопросы
- Сохраняется ли качество? Да, Base64 не сжимает и не портит картинку — это просто другая форма записи тех же данных.
- Можно ли вернуть картинку из Base64? Да: вставьте Data URL в адресную строку браузера или раскодируйте строку обратно.
- Поддерживается ли SVG? Да. Для SVG иногда компактнее обычное кодирование адреса, но Base64 работает везде одинаково.
- Безопасно ли загружать картинку? Да, всё обрабатывается в браузере и никуда не отправляется.
- Какого размера картинку можно загрузить? До 5 МБ; но для встраивания в код берите небольшие изображения.