Кодирование файла в Base64 строку
Коротко об инструменте
Страница читает выбранный файл и отдаёт его Base64 представление — ту самую длинную строку, которую вставляют в атрибут src, в CSS-свойство background-image или в поле JSON при отправке вложения. Тип файла не ограничен: картинка, шрифт, PDF, архив. Никакой загрузки на сервер не происходит, файл читает встроенный механизм браузера прямо во вкладке, а результат забирается кнопкой «Копировать». Смотрите также: декодировать Base64 обратно в файл, вставить картинку в CSS как data URI, кодирование обычного текста в Base64.
Примерно на 33 процента: каждые три байта исходных данных превращаются в четыре текстовых символа, плюс добавляются символы выравнивания в конце. Картинка на 90 КБ даст строку около 120 КБ. Именно поэтому встраивать в вёрстку имеет смысл мелкие иконки, а фотографии лучше оставлять отдельными файлами.
Любые — фильтра по расширению здесь нет. PNG, SVG, шрифт woff2, PDF, ZIP, документ docx кодируются одинаково, потому что Base64 работает с байтами и не разбирается в содержимом. Разница проявится позже: чтобы браузер понял строку, в префиксе data: должен стоять правильный MIME-тип для этого формата.
Обычно нет. Встроенная строка не кэшируется отдельно от стилей, увеличивает файл CSS и блокирует первую отрисовку, а браузер не может загрузить её параллельно. Разумный порог — единицы килобайт: логотип, иконка, крошечная подложка. Всё, что крупнее, выгоднее отдавать обычным файлом со своим кэшем.
Нет. Файл открывается штатным механизмом чтения файлов внутри вкладки, и полученные байты сразу превращаются в строку на этой же странице. Ни файл, ни результат не отправляются наружу, так что кодировать можно и внутренние документы, не вынося их за пределы своего компьютера.
Чаще всего дело не в кодировании, а в приёмнике: некоторые редакторы и поля форм ограничивают длину вставляемого текста или сворачивают очень длинные строки. Пользуйтесь кнопкой «Копировать» вместо выделения мышью, а в редакторе отключите перенос строк и проверьте, что скопированный фрагмент заканчивается там же, где и в поле результата.
Да: в мобильном браузере поле выбора открывает системную галерею или файловый менеджер, а результат можно скопировать одной кнопкой. Учтите только, что снимок с камеры весит несколько мегабайт, и строка получится очень длинной — на слабом устройстве вкладка может задуматься на несколько секунд.
До: favicon-16.png, 412 байт
После: background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ..."); До: contract.pdf, 84 КБ
После: {"filename": "contract.pdf", "content": "JVBERi0xLjQKJcfsj6IKNSAwIG9iag..."} Оценка и фидбек помогают понять, что улучшать дальше.