Кодування
Data URI / Base64 зображення
Кодування зображення у Data URI (data:image/…;base64,…) для вставки в CSS/HTML і декодування Data URI або сирого Base64 назад у файл — усе прямо в браузері.
Перегляд зображення з’явиться тут.
Часті запитання
Навіщо вставляти зображення як Data URI замість посилання на файл?
Data URI вбудовує саме зображення прямо в CSS чи HTML як Base64-рядок, тож браузеру не потрібен окремий HTTP-запит до файлу. Це зручно для маленьких іконок і спрайтів, коли важливо скоротити кількість запитів.
Чи є обмеження на розмір Data URI?
Так, і це головний недолік підходу: великі Data URI роздувають розмір самого HTML/CSS-файлу, деякі email-клієнти й старі браузери мають ліміти на довжину, а головне — на відміну від звичайного файлу за URL, такий рядок не кешується браузером окремо. Тому Data URI підходить лише для невеликих зображень.
Чи безпечно завантажувати сюди зображення?
Так — кодування, декодування і перегляд відбуваються повністю у вашому браузері. Файл ніколи не надсилається на сервер.