Дотримуйтесь цього робочого прикладу, а потім адаптуйте ті самі елементи керування до власного зображення. Відкрити Конвертер зображення у Base64.
Виберіть зображення та перегляньте його ідентифікатор
Відкрийте конвертер «Зображення в Base64». Виберіть зображення або спробуйте зразок. У прикладі використовується favicon-orbit.png розміром 512 × 512 пікселів, який містить 202,491 байтів. Редактор показує зображення над його кодом, щоб ви могли підтвердити, що вибрали потрібний ресурс.
PNG, JPG, WebP, GIF, BMP та AVIF підтримуються, якщо ваш браузер може декодувати їх для попереднього перегляду. Максимальний розмір файлу становить 25 МБ, з обмеженнями 60 мегапікселів та 16,000 пікселів на сторону. Розмітка SVG не приймається цим растровим конвертером.
Інструмент зчитує оригінальні байти файлу. Він не використовує попередній перегляд для відновлення зображення, зміни його розміру або повторного стиснення. Тому існуючі метадані та анімація GIF зберігаються в закодованих даних.
Перед кодуванням скористайтеся «Змінити розмір зображення» (Resize Image) або «Компресор зображень» (Image Compressor), якщо вам потрібен менший ресурс. Сам Base64 не зменшує розмір зображення.
Виберіть представлення, яке очікує ваш проєкт
Відкрийте «Налаштування» (Settings) і виберіть зображення HTML у розділі «Формат коду» (Code format) для цього прикладу. Результатом є тег img, що містить Data URL Base64. Атрибут alt спочатку порожній; напишіть корисний альтернативний текст, коли зображення передає інформацію.
Data URL починається з префікса, такого як data:image/png;base64, за яким слідують закодовані дані. Plain Base64 містить лише дані. Фон CSS обгортає Data URL у декларацію background-image. Ці представлення обслуговують різні цілі, тому копіюйте форму, яку запитує ваш застосунок, а не просто змінюйте назву файлу.
Панель коду оновлюється відразу після зміни формату коду. Значок копіювання копіює поточне представлення та видає підтвердження копіювання. Коли доступ до буфера обміну заблоковано, код виділяється для ручного копіювання.
Повний тег HTML img не є те саме, що data URL. Використовуйте лише значення src, коли поле запитує URL.
Приклад у цьому посібнику
Спробуйте приклад: favicon-orbit.png, 512 × 512 пікс., 202,491 байтів. Оберіть зображення HTML у форматі коду. Натисніть «Почати» та завантажте favicon-orbit-base64.txt.
- Оригінал PNG
- 512 × 512 пікс. · 202,491 байтів
- Текстовий вивід HTML
- 270,029 байтів
- Кодування
- Оригінальні байти; без перестискання
Завантажте код і дізнайтеся його розмір
Виберіть Start, а потім Download. Приклад зберігає favicon-orbit-base64.txt, що містить HTML код зображення. Його 270,029 байтів більші за 202,491-байтове джерело. Порівняння у статті показує початок завантаженого тексту, скорочений лише для зручності читання.
Base64 зазвичай перетворює три вихідні байти на чотири текстові символи, додаючи приблизно третину перед невеликою обгорткою. Вбудовування маленької іконки може зробити документ автономним, але розміщення великих рядків зображень всередині HTML або CSS також збільшує цей документ і заважає кешуванню зображення як окремого файлу.
Кодування — це не шифрування. Будь-хто, хто має повний рядок Base64, може відновити вихідне зображення. Поводьтеся з кодом так само обережно, як і з вихідним файлом, якщо він містить конфіденційну інформацію.
Скорочений уривок у цій статті є пояснювальним. Використовуйте повний завантажений TXT або скопіюйте повний код з інструмента.
Поширені запитання
Чи зменшить кодування якість зображення?
Ні. Кодування зберігає вихідні байти. Воно не змінює розмір, не стискає та не перемальовує зображення.
Чому рядок Base64 більший за зображення?
Base64 представляє три вхідні байти за допомогою чотирьох текстових символів, тому зазвичай додає близько однієї третини перед обгорткою або префіксом.
Чи зберігаються анімації GIF?
Кодування зберігає вихідні GIF байти, включаючи анімацію. Попередній перегляд може показувати статичний кадр, тоді як закодовані дані зберігають усі кадри.
Чи безпечний Base64 для секретних зображень?
Base64 — це не шифрування. Зберігайте рядок у приватності, якщо вихідне зображення є конфіденційним. Сам конвертер обробляє його локально у вашому браузері.
Перетворіть потрібне зображення на потрібний код.
Спробуйте зразок або використайте власний файл і перегляньте результат перед поширенням.
