Конвертер зображень у Base64

Як конвертувати зображення в Base64

1. У розділі Зображення → Base64 перетягніть зображення в зону завантаження або натисніть на неї, щоб вибрати файл (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
2. Виберіть Вивід: Data URI (data:image/png;base64,…), Лише Base64, CSS background-image або Тег HTML , який також містить ширину й висоту зображення.
3. Натисніть Копіювати або Завантажити як .txt для довгих результатів.

У рядку під зоною завантаження показано справжній формат (його визначено за байтами файлу, а не за іменем), розміри, розмір файлу та довжину data URI.

Як перетворити Base64 назад на зображення

1. У розділі Base64 → зображення вставте текст у поле Текст Base64 або data URI. Можна вставити чистий рядок Base64, повний data URI або навіть цілу CSS-властивість чи тег <img>: data URI буде знайдено всередині. Розриви рядків і пробіли ігноруються, а Base64 для URL (із - і _) також працює.
2. Натисніть Декодувати зображення. З’являться перегляд, тип, розміри та розмір файлу.
3. Натисніть Завантажити зображення, щоб зберегти його з правильним розширенням.

Тип перевіряється за «магічними байтами» – сигнатурою на початку кожного формату зображень (наприклад, 89 50 4E 47 для PNG або FF D8 FF для JPEG). Якщо data URI стверджує, що це image/jpeg, а всередині PNG, інструмент повідомить про це й використає справжній тип. Усе, що не є розпізнаним зображенням, відхиляється, а ліміт становить 20 МБ даних зображення.

Як працює Base64

Base64 перетворює кожні 3 байти файлу на 4 символи, що друкуються, із набору A–Z, a–z, 0–9, + і /, а = слугує вирівнюванням у кінці. Саме тому закодований текст приблизно на 33% більший за файл: іконка 30 КБ стає текстом близько 40 КБ. Data URI додає короткий заголовок data:<тип>;base64,, щоб браузер знав, як його читати.

Коли варто вбудовувати зображення як data URI

Data URI зручні для:

• невеликих іконок, логотипів і фонів у CSS, щоб заощадити запит;
• HTML-листів і однофайлових HTML-документів, які мають працювати без зовнішніх файлів;
• API на JSON і конфігураційних файлів, які можуть містити лише текст.

Для великих фотографій вони погано підходять. Текст на третину більший за файл, він не може кешуватися окремо від сторінки чи таблиці стилів, у яку вбудований, і сповільнює відображення. Починаючи приблизно від 10–100 КБ, зазвичай виграє звичайний файл зображення з нормальним кешуванням, тому для зображень понад 100 КБ інструмент показує нагадування.

Усе працює у вашому браузері: зображення й вставлений текст ніколи не завантажуються на сервер.