Результати надаються виключно в інформаційних цілях і можуть містити помилки. Перевіряйте важливу інформацію самостійно. Використання цього інструмента здійснюється на ваш власний ризик.
Що робить цей інструмент
Конвертер зображення в Base64 перетворює файл зображення на data URL — один рядок тексту, що починається з data:image/png;base64, (або з типу вашого файлу), а далі містить байти зображення, закодовані в Base64. Виберіть PNG, JPG, GIF, SVG, WebP чи будь-яке інше зображення — і текст з’явиться разом із попереднім переглядом, готовий до копіювання.
Файл читається через FileReader браузера, тож нікуди не завантажується. Data URL можна використати всюди, де працює звичайна адреса зображення: в <img src>, у CSS background-image: url(...), у JSON-даних чи в шаблоні листа. Base64 збільшує обсяг даних приблизно на третину порівняно з вихідним файлом, тому найкраще підходить для невеликих зображень.
Коли використовувати
- Вбудовування невеликої іконки чи логотипа в CSS, щоб сторінка робила на один запит менше.
- Розміщення зображення всередині одного самодостатнього HTML-файлу, як-от звіту чи демо.
- Надсилання зображення в запиті до JSON API, який не приймає multipart-завантаження.
- Додавання вбудованого зображення в HTML-підпис листа чи в тестову фікстуру.
Приклад
Введення
pixel.png (1 × 1 px, синій, 69 байтів)Виведення
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCCЗапитання про цей інструмент
Чому текст Base64 більший за моє зображення?
Base64 записує кожні 3 байти як 4 текстові символи, тож результат приблизно на 33% більший за файл. Зображення на 30 КБ перетворюється приблизно на 40 КБ тексту. Стиснення Gzip або Brotli на сервері частину цього відіграє.
Коли не варто вбудовувати зображення?
Уникайте цього для великих фотографій і для зображень, що використовуються на багатьох сторінках. Звичайний файл зображення браузер кешує один раз, а вбудоване зображення завантажується знову з кожним HTML- чи CSS-файлом, що його містить.
Як використати результат у CSS?
Обгорніть його в url(): background-image: url("data:image/png;base64,...");. Для SVG-іконок SVG, закодований для URL, часто менший за Base64; підготувати такий допоможе сторінка Кодування URL.
Як перетворити Base64 назад на зображення?
Вставте повний data URL в адресний рядок браузера й збережіть зображення або, якщо потрібні сирі байти, декодуйте частину після коми за допомогою інструмента Декодування Base64.
Цей інструмент безкоштовний?
Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.
Як отримати результат?
Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.