Файл у Base64
Закодувати картинку чи файл у data URI
Дані не залишають ваш браузер
Цей інструмент повністю працює на вашому пристрої: обчислення виконує JavaScript у вкладці. Ми не надсилаємо введений текст на сервер, не зберігаємо і не логуємо його. Можете сміливо працювати з робочими даними - і навіть відключити інтернет після завантаження сторінки.
Навіщо кодувати файл у Base64
Щоб покласти двійковий файл туди, де очікується текст: у CSS, в HTML, у JSON-запит, у поле бази. Це той самий Base64, тільки з файлу, а не з тексту. Найчастіший результат - data URI, рядок виду data:image/png;base64,iVBORw0KG..., який браузер розуміє як повноцінне зображення.
Файл читається у вашому браузері через FileReader і нікуди не завантажується. Це відрізняє інструмент від більшості онлайн-конвертерів, які спершу приймають файл на свій сервер і лише потім кодують.
Коли data URI доречний
Маленькі іконки й фонові патерни в CSS - економить HTTP-запит:
.icon-check {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}
Картинки в листах. Поштові клієнти часто блокують зовнішні зображення, а вбудовані показують. Хоча Gmail і тут вибагливий - для листів надійніший CID-вкладення.
Логотип у PDF, який генерується без доступу до файлової системи.
Файл у JSON-запиті до API, яке не приймає multipart.
Коли не варто
Розмір зростає приблизно на третину. Файл на 300 КБ стає рядком на 400 КБ - і цей рядок уже не кешується окремо від сторінки, не стискається так само добре і блокує парсинг CSS, доки не дочитається.
Практичне правило: до ~5 КБ - можна, далі краще звичайний файл. SVG-іконка - так; фотографія - ні.
І окремо: data URI не кешується браузером як самостійний ресурс. Та сама картинка, вбудована на десять сторінок, завантажиться десять разів.
У PHP і Laravel
// Файл у data URI
$path = storage_path('app/logo.png');
$dataUri = 'data:' . mime_content_type($path) . ';base64,' . base64_encode(file_get_contents($path));
// Зворотний бік: файл, що прийшов у Base64 через API
$binary = base64_decode($request->input('file'), strict: true);
abort_if($binary === false, 422, 'Некоректний файл');
Storage::disk('r2')->put("uploads/{$name}", $binary);
strict: true тут не формальність: без нього base64_decode() мовчки проковтне сміття й поверне пошкоджені байти замість помилки.
// Звичайне завантаження - через UploadedFile, а не Base64
$path = $request->file('avatar')->store('avatars', 'r2');
Останнє варте наголосу: якщо файл можна прийняти як multipart, приймайте як multipart. Base64 у тілі запиту роздуває його на третину і змушує тримати весь файл у пам'яті.
Обмеження за розміром
Тут стоїть межа в 5 МБ. Не тому, що браузер не впорається, а тому, що data URI на більший файл - майже завжди неправильне рішення: рядок на сім мільйонів символів не варто ні вставляти в CSS, ні тримати в колонці бази.