CodeKitHubЩо це за інструмент?
Base64 — це спосіб представити бінарні дані, наприклад необроблені байти зображення, у вигляді звичайного тексту, використовуючи лише літери, цифри та кілька символів. Оскільки це простий текст, зображення у форматі Base64 можна вставити безпосередньо в HTML, CSS або JSON, замість того щоб посилатися на окремий файл.
"Data URL" обгортає цей текст Base64 невеликим префіксом (data:image/png;base64,), який повідомляє браузеру тип файлу, тож його можна одразу вставити в атрибут src або url() і відобразити без додаткового запиту.
Навіщо його використовувати?
- Отримайте обидва формати одразу — повний data URL для HTML/CSS та чистий Base64 (без префікса) для вбудовування в JSON чи конфігураційні файли.
- Без звернення до сервера: це усуває один HTTP-запит для маленьких іконок, аватарів чи вбудованих зображень.
- Зберігає оригінальні байти файлу точно без змін — без повторного кодування чи втрати якості, на відміну від інструментів, що декодують і перезберігають зображення.
- Показує різницю в розмірі, щоб ви знали, чим жертвуєте заради зручності.
- Приватність: файл читається локально за допомогою FileReader API браузера і ніколи не залишає ваш пристрій.
Як користуватися
- Натисніть на область завантаження або перетягніть файл зображення на неї.
- Скопіюйте повний data URL, якщо вставляєте його в <img src> або CSS background-image.
- Скопіюйте чистий Base64 (без префікса data:), якщо вбудовуєте значення в JSON, YAML чи інший конфігураційний формат, який уже знає тип файлу.
- Перевірте примітку про розмір — текст Base64 приблизно на третину більший за оригінальний бінарний файл.
Приклад
Введення
Файл іконки PNG розміром 12 КБ.Результат
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 КБ тексту) плюс той самий рядок без префікса data:.Збільшення розміру приблизно на 33% властиве кодуванню Base64 (3 байти бінарних даних стають 4 символами тексту) — це не помилка інструмента.
Де використовується кожен формат
| Формат | Типове використання |
|---|---|
| Повний data URL | HTML <img src="...">, CSS background-image: url(...), вбудовані зображення в листах |
| Чистий Base64 | JSON API-payload, YAML/конфігураційні файли, поля BLOB у базах даних, власні бінарні протоколи |
Base64 і розмір зображення — компроміс на практиці
~33% додаткового обсягу означає, що вбудовування Base64 краще залишати для маленьких файлів: іконка в 2 КБ стає безневинними ~2,7 КБ вбудованого тексту, але фото в 500 КБ перетворюється на ~665 КБ тексту прямо в HTML, що уповільнює парсинг і не може кешуватися окремо від сторінки.
Якщо ви вбудовуєте багато зображень або великі файли, зважте користь від економії одного запиту проти витрат на вагу сторінки — і розгляньте попереднє стиснення.
Часті запитання
Чому рядок Base64 набагато більший за файл мого зображення?
Base64 кодує кожні 3 байти бінарних даних як 4 текстові символи, що дає фіксовані ~33% додаткового обсягу. Для зображення в 100 КБ очікуйте приблизно 133 КБ тексту Base64. Це нормально і неминуче — така ціна представлення бінарних даних у вигляді безпечного, переносного тексту.
У чому різниця між data URL і чистим рядком Base64?
Data URL містить префікс data:image/png;base64,, який повідомляє браузеру чи іншому засобу відображення, у який MIME-тип декодується наступний текст. Вставляйте повний data URL у HTML src або CSS url(). Чистий Base64 (усе після коми) потрібен тоді, коли система вже окремо знає тип файлу — наприклад, поле JSON на кшталт { "format": "png", "data": "<чистий base64>" }.
Коли варто вбудовувати зображення як Base64 замість посилання на файл?
Вбудовування Base64 корисне для маленьких, часто використовуваних зображень (іконки, логотипи, крихітна UI-графіка), коли економія одного HTTP-запиту переважує ~33% зростання розміру, або в контекстах, де окремий файл непрактичний, наприклад вбудовані зображення в листах чи однофайлові HTML-експорти. Для великих фотографій або будь-чого, що використовується на багатьох сторінках, звичайний файл із посиланням і кешуванням у браузері майже завжди кращий.
Чи змінює або стискає конвертація в Base64 моє зображення?
Ні. Base64 — це кодування без втрат, що точно передає оригінальні байти — воно не торкається пікселів, роздільної здатності чи стиснення. Якщо потрібен менший файл, спочатку стисніть зображення компресором, а потім конвертуйте стиснутий результат у Base64.
Чи завантажується моє зображення кудись?
Ні. Файл читається безпосередньо у вашому браузері за допомогою FileReader API і кодується локально — він ніколи не надсилається через мережу.