Image → Base64

Перетворення зображення на data URI у Base64 з готовим кодом <img> і CSS або розкодування data URI назад у зображення — просто в браузері.

Про Image → Base64

Що це

Цей інструмент кодує зображення — PNG, JPEG, WebP, GIF, AVIF, BMP, ICO чи SVG — у Base64, щоб вбудувати його просто в HTML, CSS чи JSON. Результат буде як data URI, сирий Base64 чи, для SVG, URL-кодований data URI, а також готовий код для вставлення. Працює й навпаки: вставте data URI, щоб побачити й зберегти зображення.

Основні можливості

  • PNG, JPEG, WebP, GIF, AVIF, BMP, ICO і SVG; тип визначається за самим файлом.
  • Результат як data URI, сирий Base64 чи URL-кодований (коротший для SVG).
  • Готовий код для тегу <img> і CSS зі справжніми шириною й висотою.
  • Крихітна розмита заглушка (LQIP) для зображень із відкладеним завантаженням.
  • Розкодування: вставте Base64 чи data URI, щоб отримати зображення назад.

Як користуватися

  1. Перетягніть зображення на область, клацніть її, щоб обрати файл, або натисніть «Приклад».
  2. Оберіть формат результату.
  3. За потреби увімкніть мікрозаглушку (LQIP).
  4. Скопіюйте результат чи готовий код; щоб розкодувати, вставте data URI в текстове поле.

Коли корисно

  • Вбудувати маленьку іконку в CSS без зайвого запиту.
  • Вставити зображення в HTML-лист чи сторінку з одного файлу.
  • Подивитися, яке зображення ховається в довгому data URI в коді.

Конфіденційність та обмеження

Ваші дані

Ваше зображення обробляється в браузері й не завантажується на сервер — сайт отримує лише анонімну подію «інструмент відкрито», без вмісту. Результат, надісланий в інший інструмент, зберігається на цьому пристрої 24 години в «Останніх діях».

Обмеження

  • Base64 збільшує зображення приблизно на третину, тож підходить для маленьких зображень, а не фото.
  • Вбудоване зображення браузер не може закешувати окремо.

Поширені запитання

Коли data URI — добра ідея?

Для маленьких іконок, логотипів і заглушок, де зекономлений окремий запит важить більше за розмір. Для великих фото краще звичайний файл: він менший, і браузер може його закешувати.

Що таке заглушка LQIP?

Дуже маленька розмита версія зображення — кілька сотень байтів, — яку показують, доки вантажиться справжнє, щоб сторінка не стрибала.

Чому для SVG краще URL-кодування?

SVG — це текст, тож його можна записати в data URI майже як є. URL-кодування лишає його читабельним і зазвичай коротшим за Base64.