СИГНАЛЬНАЯ СИСТЕМА / v1.0
IMAGE
FLOW
FLOW
⚡
Загрузить изображение
Данных нет
Статус системы
ГОТОВ К ПЕРЕДАЧЕ
Base64 на выходе
СИГНАЛЬНАЯ СИСТЕМА / v1.0
Загрузить изображение
Данных нет
Статус системы
ГОТОВ К ПЕРЕДАЧЕ
Base64 на выходе
Коротко об инструменте
Здесь всё идёт в обратную сторону: на входе файл с диска, на выходе текстовая строка, которую можно вставить прямо в код. Файл читается локально через FileReader, никуда не отправляется, а результат появляется в поле вывода как готовый data URI. Так поступают, когда картинку неудобно хранить отдельным файлом: логотип в шаблоне письма, иконка в CSS, аватар в JSON-запросе к API. Лишний HTTP-запрос исчезает, но текст растёт примерно на треть. Смотрите также: обратное превращение строки Base64 в картинку, уменьшение веса картинки до кодирования, кодирование произвольного файла в Base64.
Примерно на 33 процента плюс небольшая приставка. Кодировка укладывает три байта в четыре печатных символа, поэтому иконка на 200 байт превращается в 270 символов, а фотография на 3 МБ — в текст около 4 МБ. Для мелкой графики это выгодный обмен на сэкономленный запрос, для фотографий — почти всегда нет.
Практическая граница — единицы килобайт: логотипы, иконки, точечные подложки, спрайты состояний. Крупная картинка внутри стилей блокирует отрисовку страницы, потому что до конца разбора CSS браузер не начнёт рисовать, и главное — теряет кеш: файл кешировался бы отдельно, а встроенная строка перекачивается вместе с каждой версией стилей.
Доступ к буферу обмена браузеры дают только на защищённом соединении и только по прямому действию пользователя. Если страница открыта локально по file:// или в старом браузере, вызов может быть заблокирован. Обходной путь простой: кликните в поле вывода, нажмите Ctrl+A, затем Ctrl+C — результат тот же.
Закодировать можно, файл читается как любой другой. Но для SVG Base64 обычно проигрывает: векторную разметку допустимо вставлять в CSS в исходном виде через url("data:image/svg+xml,...") с процентным экранированием, и такая запись короче и читаемее. Base64 для SVG имеет смысл, когда среда не переносит кавычки и угловые скобки в значении.
Нет. Файл открывается браузерным API FileReader прямо с вашего диска, страница читает байты и переводит их в текст на месте. Никакой передачи содержимого наружу код не выполняет, а после закрытия вкладки в памяти ничего не остаётся. Поэтому кодировать можно и внутренние макеты, и сканы документов.
Это верный признак того, что картинку не следовало встраивать. Уменьшите изображение по пикселям и пережмите его перед кодированием, либо оставьте файл обычной ссылкой на статику. Если строка нужна именно такой, храните её в отдельном файле-константе и подключайте импортом, чтобы не тормозил редактор.
До: check-16.png, 214 байт
После: .ok::before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...)} До: avatar.jpg, 24 КБ
После: {"avatar":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..."} Оценка и фидбек помогают понять, что улучшать дальше.