Конвертер зображення ↔ Base64
Перетворюйте зображення на Base64 data URL і навпаки — зі шматками коду CSS і HTML
Про цей інструмент
Перетягніть, виберіть чи вставте зображення — і отримайте його форму Base64 в усіх різновидах, які можуть знадобитися: готовий до вживання data URL, оголошення background-image для CSS, повний тег <img> із власними розмірами та сирі дані Base64. Зворотний напрямок теж працює — вставте data URL чи голий блок Base64, і зображення буде декодовано, показано й доступно для завантаження файлом.
Формат визначається за сигнатурними байтами, а не за розширенням файлу чи оголошеним mime-типом, тож PNG, перейменований на .jpg (або data URL із хибною міткою), однаково перетвориться правильно. Панель розміру чесна щодо ціни: Base64 роздуває дані приблизно на третину, і точний закодований розмір показано поруч із оригінальним, щоб ви вирішили, чи варто вбудовувати.
На відміну від більшості сайтів «зображення в Base64», тут нічого не вивантажується — файл читається через FileReader API браузера й кодується на сторінці. Тому це безпечно для знімків внутрішніх панелей, ще не випущених продуктових зображень чи будь-чого іншого, що ви радше не віддасте серверу незнайомця.
Часті запитання
- Коли вбудовувати зображення як Base64 замість посилання на файл?
- Коли зображення маленьке (приблизно до 10 КБ), майже не змінюється й інакше коштувало б додаткового HTTP-запиту — це про іконки, логотипи в листах чи HTML-документи в одному файлі. Для чогось більшого окремий файл виграє: він кешується незалежно, вантажиться паралельно й не роздуває ваш HTML чи CSS на 33%.
- Чому версія в Base64 приблизно на третину більша за мій файл?
- Base64 подає кожні 3 байти двійкових даних як 4 символи ASCII — це структурні +33% накладних витрат (плюс до двох символів доповнення). Gzip чи Brotli на вашому сервері дещо відіграють назад, але роздування властиве самому кодуванню: воно міняє розмір на можливість вбудувати двійкові дані в текст.
- Чи можна декодувати data URL, знайдений у стилях або HTML?
- Так — перемкніться на Base64 → зображення й вставте все цілком, разом із префіксом data:. Відсотково закодовані data URL для SVG (ті, що без ;base64) теж декодуються, а переноси рядків чи пробіли всередині даних прибираються автоматично. Результат показується на сторінці й завантажується з правильним розширенням.
- Чи працює це для SVG, GIF та ICO, чи лише для PNG і JPEG?
- Усе, що розпізнає визначник, перетворюється на Base64: PNG, JPEG, WebP, GIF, SVG, BMP, ICO та AVIF. Щодо SVG зокрема: його XML-джерело часто менше й читабельніше, якщо вбудувати його напряму — кодувати SVG у Base64 має сенс здебільшого тоді, коли лапки чи екранування стають проблемою.