Кодування
Data URI / Base64 зображення
Кодування зображення у Data URI (data:image/…;base64,…) для вставки в CSS/HTML і декодування Data URI або сирого Base64 назад у файл — усе прямо в браузері.
Перегляд зображення з’явиться тут.
Data URI дозволяє вбудувати вміст файлу (зазвичай зображення) безпосередньо в HTML чи CSS у вигляді Base64-рядка, замість посилання на окремий файл. Це прибирає додатковий мережевий запит ціною збільшення розміру самого документа.
Як користуватися
- Кодування: завантажте зображення — інструмент згенерує готовий data:image/…;base64,… рядок для вставки в src, href чи CSS.
- Декодування: вставте Data URI або сирий Base64, щоб отримати оригінальний файл назад для завантаження.
- Скопійований рядок можна одразу вставити в HTML-атрибут чи CSS-властивість без додаткової обробки.
Типові сценарії
- Вбудовування маленьких іконок чи спрайтів у CSS, щоб уникнути додаткового HTTP-запиту.
- Створення email-шаблонів, де зовнішні зображення можуть блокуватися поштовим клієнтом.
- Швидке прев’ю зображення у вигляді самодостатнього рядка без завантаження файлу на хостинг.
Що варто памʼятати
Base64-кодування збільшує розмір даних приблизно на 33% — для великих зображень Data URI зазвичай гірший вибір, ніж окремий файл із кешуванням браузера.
Data URI не кешується браузером окремо від документа, у якому він вбудований, — при кожному завантаженні сторінки він завантажується заново разом з нею.
Стаття про цей інструмент: Data URI: коли вбудовувати зображення прямо в код
Часті запитання
Навіщо вставляти зображення як Data URI замість посилання на файл?
Data URI вбудовує саме зображення прямо в CSS чи HTML як Base64-рядок, тож браузеру не потрібен окремий HTTP-запит до файлу. Це зручно для маленьких іконок і спрайтів, коли важливо скоротити кількість запитів.
Чи є обмеження на розмір Data URI?
Так, і це головний недолік підходу: великі Data URI роздувають розмір самого HTML/CSS-файлу, деякі email-клієнти й старі браузери мають ліміти на довжину, а головне — на відміну від звичайного файлу за URL, такий рядок не кешується браузером окремо. Тому Data URI підходить лише для невеликих зображень.
Чи безпечно завантажувати сюди зображення?
Так — кодування, декодування і перегляд відбуваються повністю у вашому браузері. Файл ніколи не надсилається на сервер.
Чи можна використати Data URI для SVG без Base64?
Так. SVG — це текст (XML), тому замість Base64 достатньо percent-encoding спецсимволів: data:image/svg+xml,%3Csvg...%3E. Такий варіант компактніший і лишається редагованим прямо в CSS-файлі.
Чи можна вставити Data URI в атрибут href чи background-image?
Так, Data URI працює всюди, де очікується посилання на ресурс — в src, href, background-image в CSS і навіть у @import. Синтаксис і обмеження розміру ті самі, що й для тегу img.