Кодувати зображення у Base64 / Data URI

Data URI - це URL, який містить безпосередньо дані ресурсу замість того, щоб вказувати на віддалений файл. Його загальна форма data:[<mediatype>][;base64],<data>. Для зображення зазвичай маємо data:image/png;base64,iVBORw0KGgo…. Ресурс вбудований у HTML, CSS або JSON і завантажується без будь-якого додаткового HTTP-запиту.

Поширені причини:

• Зменшити HTTP-запити: вбудувати іконку безпосередньо у CSS замість її окремого завантаження
• Підпис email з вбудованим зображенням: без ризику блокування зображення як зовнішнього вмісту
• Web Components / Web Workers: де завантаження зовнішнього ресурсу часто викликає проблеми scope або CORS
• Локальне сховище (LocalStorage, IndexedDB, база даних): серіалізація мініатюри аватара у рядок
• Self-contained snippets: HTML-файл, що не потребує зовнішніх залежностей

Кілька конкретних контекстів, де кодування Base64 зображення виправдане:

• Вбудовані SVG іконки у CSS (background-image: url("data:image/svg+xml;base64,…"))
• Персоналізовані підписи email з логотипом
• Швидке прототипування автономної сторінки, яка поширюється електронною поштою
• Автономні веб-компоненти (один файл для розгортання)
• Генерація PDF на стороні браузера (jsPDF) з вбудованими мініатюрами
• Тестові дані (mocks), що містять зображення

Три кроки:

1. Завантажте своє зображення (PNG, JPG, SVG, WebP, GIF) через зону завантаження
2. Натисніть "Кодувати"
3. Скопіюйте результуючий Data URI за допомогою відповідної кнопки та вставте у ваш HTML, CSS або JSON

Base64 не є чарівним рішенням. Кілька застережень:

• Base64 збільшує розмір приблизно на 33%: 4 ASCII символи для кожних 3 бінарних байт
• Закодовані зображення не кешуються окремо браузером; вони перезавантажуються з HTML/CSS, що їх містить
• Надавайте перевагу для зображень менше 10 КБ; понад цього розміру зовнішній файл зазвичай ефективніший
• Для SVG надавайте перевагу URL-кодуванню (через encodeURIComponent) а не Base64: результат коротший і залишається парсабельним як текст
• Сучасні інструменти збірки (Webpack, Vite) автоматизують вибір Base64 проти зовнішнього файлу через налаштовуваний поріг розміру

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

В чому різниця між Base64 і бінарним?

Бінарний представляє сирі байти файлу. Base64 - це кодування, яке перетворює ці байти у 64 друкованих ASCII символи (A-Z, a-z, 0-9, +, /). Текстові контексти (HTML, JSON, email) не можуть переносити бінарні дані; Base64 вирішує цю проблему ціною збільшення розміру на 33%.

Чому мій Data URI такий довгий?

Зображення розміром 30 КБ у бінарному форматі стає ~40 КБ у Base64. І кожен символ - це ASCII байт, тому так, рядок довгий. Це невід'ємна властивість кодування. Для великих зображень зберігайте зовнішній файл.

Чи підтримують усі браузери Data URI?

Так, без винятків серед сучасних браузерів (Chrome, Firefox, Safari, Edge навіть з IE8). Історичні обмеження: IE8 мав максимум 32 КБ. Сьогодні немає проблем у вебі.

Як декодувати Data URI?

Наш декодер зображень Base64 виконує зворотну операцію: вставте ваш Data URI, отримайте файл зображення (PNG, JPG, SVG, WebP) готовий для завантаження або збереження.

Base64 проти URL-кодування для SVG?

Для SVG URL-кодування (через encodeURIComponent) дає коротший рядок, ніж Base64, і залишається читабельним як текст. Це рекомендований вибір у CSS при вбудовуванні SVG inline. Для бінарних форматів (PNG, JPG) Base64 залишається обов'язковим.

Чи впливає кодування Base64 на якість зображення?

Ні. Кодування є lossless: це побієкція бінарний байт ↔ рядок Base64. Оригінальні пікселі суворо зберігаються. Лише розмір файлу, що транспортується, збільшується на 33%.