Изображение ↔ Base64
Преобразуйте изображения в Base64 data URL и обратно — со сниппетами CSS и HTML
Об этом инструменте
Перетащите, выберите или вставьте изображение — и получите его Base64 во всех нужных видах: готовый data URL, объявление CSS background-image, полный тег <img> с реальными размерами и чистый Base64-пейлоад. Обратное направление тоже работает: вставьте data URL или голую Base64-строку — изображение будет декодировано, показано и доступно для скачивания файлом.
Формат определяется по магическим байтам, а не по расширению или заявленному MIME-типу, поэтому PNG, переименованный в .jpg (или data URL с неверной меткой), всё равно конвертируется правильно. Панель размеров честна насчёт цены: Base64 раздувает данные примерно на треть, и точный размер после кодирования показан рядом с исходным — сразу видно, стоит ли встраивание того.
В отличие от большинства сайтов «картинка в Base64», здесь ничего не загружается на сервер — файл читается браузерным API FileReader и кодируется прямо на странице. Поэтому сюда безопасно класть скриншоты внутренних дашбордов, невыпущенные продуктовые изображения и всё, что не хочется отдавать чужому серверу.
Частые вопросы
- Когда встраивать изображение как Base64, а когда ссылаться на файл?
- Когда изображение маленькое (примерно до 10 КБ), редко меняется и иначе стоило бы лишнего HTTP-запроса — иконки, логотипы в письмах, однофайловые HTML-документы. Для всего крупнее выигрывает отдельный файл: он кешируется независимо, грузится параллельно и не раздувает HTML или CSS на 33%.
- Почему версия в Base64 примерно на треть больше файла?
- Base64 представляет каждые 3 байта двоичных данных четырьмя ASCII-символами — структурные +33% (плюс до двух символов выравнивания). Gzip или Brotli на сервере часть отыгрывает, но раздувание заложено в саму кодировку: она меняет размер на возможность встроить бинарные данные в текст.
- Можно ли декодировать data URL, найденный в стилях или HTML?
- Да — переключитесь на «Base64 → картинка» и вставьте целиком, вместе с префиксом data:. Data URL для SVG с процентным кодированием (без ;base64) тоже декодируются, а переносы строк и пробелы в пейлоаде убираются автоматически. Результат показывается на странице и скачивается с правильным расширением.
- Работает ли это с SVG, GIF и ICO или только с PNG и JPEG?
- Всё, что распознаёт сниффер, конвертируется в Base64: PNG, JPEG, WebP, GIF, SVG, BMP, ICO и AVIF. Отдельно про SVG: его XML-исходник часто меньше и читабельнее при прямом встраивании — кодировать SVG в Base64 имеет смысл в основном тогда, когда мешают кавычки или экранирование.