IT Market
Инструменты/Код/Данные/Файл в Base64 — кодировщик онлайн бесплатно
Файл → Base64

Кодирование файла в Base64 строку

Коротко об инструменте

Файл в Base64 — кодировщик онлайн бесплатно

Страница читает выбранный файл и отдаёт его Base64 представление — ту самую длинную строку, которую вставляют в атрибут src, в CSS-свойство background-image или в поле JSON при отправке вложения. Тип файла не ограничен: картинка, шрифт, PDF, архив. Никакой загрузки на сервер не происходит, файл читает встроенный механизм браузера прямо во вкладке, а результат забирается кнопкой «Копировать». Смотрите также: декодировать Base64 обратно в файл, вставить картинку в CSS как data URI, кодирование обычного текста в Base64.

Как пользоваться

  1. Нажмите поле «Выберите файл» и укажите картинку, шрифт, PDF или любой другой файл с диска.
  2. Дождитесь, пока в поле «Base64 результат» появится строка — крупный файл читается пару секунд.
  3. Нажмите «Копировать», чтобы забрать всю строку целиком, не выделяя её мышью вручную.
  4. Вставьте результат туда, где он нужен: в атрибут src, в правило url() внутри CSS или в поле JSON.
  5. Учитывайте рост объёма: закодированная строка примерно на треть тяжелее исходного файла.

Вопросы и ответы

На сколько вырастает размер после кодирования в Base64?

Примерно на 33 процента: каждые три байта исходных данных превращаются в четыре текстовых символа, плюс добавляются символы выравнивания в конце. Картинка на 90 КБ даст строку около 120 КБ. Именно поэтому встраивать в вёрстку имеет смысл мелкие иконки, а фотографии лучше оставлять отдельными файлами.

Какие типы файлов принимает поле выбора?

Любые — фильтра по расширению здесь нет. PNG, SVG, шрифт woff2, PDF, ZIP, документ docx кодируются одинаково, потому что Base64 работает с байтами и не разбирается в содержимом. Разница проявится позже: чтобы браузер понял строку, в префиксе data: должен стоять правильный MIME-тип для этого формата.

Стоит ли встраивать большие картинки в CSS через Base64?

Обычно нет. Встроенная строка не кэшируется отдельно от стилей, увеличивает файл CSS и блокирует первую отрисовку, а браузер не может загрузить её параллельно. Разумный порог — единицы килобайт: логотип, иконка, крошечная подложка. Всё, что крупнее, выгоднее отдавать обычным файлом со своим кэшем.

Загружается ли выбранный файл на сервер сайта?

Нет. Файл открывается штатным механизмом чтения файлов внутри вкладки, и полученные байты сразу превращаются в строку на этой же странице. Ни файл, ни результат не отправляются наружу, так что кодировать можно и внутренние документы, не вынося их за пределы своего компьютера.

Почему строка обрывается при вставке в редактор?

Чаще всего дело не в кодировании, а в приёмнике: некоторые редакторы и поля форм ограничивают длину вставляемого текста или сворачивают очень длинные строки. Пользуйтесь кнопкой «Копировать» вместо выделения мышью, а в редакторе отключите перенос строк и проверьте, что скопированный фрагмент заканчивается там же, где и в поле результата.

Работает ли выбор файла на телефоне?

Да: в мобильном браузере поле выбора открывает системную галерею или файловый менеджер, а результат можно скопировать одной кнопкой. Учтите только, что снимок с камеры весит несколько мегабайт, и строка получится очень длинной — на слабом устройстве вкладка может задуматься на несколько секунд.

Примеры

Иконка прямо в стилях, без отдельного файла
До: favicon-16.png, 412 байт
После: background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQ...");
Вложение в теле JSON-запроса
До: contract.pdf, 84 КБ
После: {"filename": "contract.pdf", "content": "JVBERi0xLjQKJcfsj6IKNSAwIG9iag..."}