Без завантаження, 100% локально, без облікового запису

Конвертер зображення → Base64

Кодуйте будь-яке зображення в Base64 data URI або вставте data URI, щоб декодувати його назад у зображення. Скопіюйте результат або візьміть фрагмент CSS url(). Нічого не залишає ваш пристрій.

Як працює Зображення в Base64

Зображення у Base64 зчитує ваш файл зображення та кодує його як URI даних Base64, який можна вбудувати безпосередньо в HTML, CSS або JSON без окремого запиту файлу. Конвертація використовує FileReader API у браузері; жодний байт вашого зображення не надсилається на сервер. Можна також вставити рядок Base64 назад, щоб декодувати його та переглянути зображення, і все це локально.

URI даних Base64 приблизно на 33% більший за бінарний оригінал, оскільки кожна група з трьох байтів розширюється до чотирьох ASCII-символів. Це очікуваний компроміс заради зручності вбудовування зображення в документ або таблицю стилів. Інструмент показує і сирий рядок Base64, і готовий для використання фрагмент HTML-тегу img, та фрагмент CSS background-image для швидкого копіювання у проект.

Автор: Bastien Sulyan

Зображення в Base64: покрокова інструкція

  1. Перетягніть файл зображення на область завантаження або натисніть, щоб вибрати. Підтримувані формати: JPEG, PNG, WebP, GIF, SVG.
  2. URI даних Base64 з'являється відразу у полі виводу.
  3. Скопіюйте сирий рядок Base64 або використайте готовий HTML-тег img або фрагмент CSS background-image.
  4. Для декодування вставте рядок Base64 у поле введення і перейдіть у режим декодування для перегляду зображення.
  5. Натисніть кнопку копіювання поруч із будь-яким фрагментом, щоб скопіювати його в буфер обміну.

Поширені сценарії використання

  • Front-end розробник вбудовує маленьку іконку як URI даних у CSS-файл, щоб виключити зайвий HTTP-запит.
  • Розробник вбудовує маленький завантажувальний спінер як атрибут src у Base64, щоб зображення-заповнювач було доступним до завантаження JavaScript-бандлу.
  • QA-інженер копіює Base64 тестового зображення для вставки безпосередньо в JSON-навантаження для тестування API.
  • Розробник шаблонів електронних листів вбудовує логотип підпису як URI даних Base64, оскільки деякі поштові клієнти блокують запити до зовнішніх зображень.

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

Чому вивід Base64 приблизно на третину більший за оригінальний файл?

Кодування Base64 представляє кожні три бінарних байти як чотири ASCII-символи (коефіцієнт 4/3). Зображення 100 КБ у бінарному вигляді стає приблизно 133 КБ як рядок Base64. Це притаманно схемі кодування, а не обмеження інструменту.

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

Ні. FileReader API зчитує бінарний файл із локального диска та передає результат безпосередньо функції кодування JavaScript у вкладці браузера. Дані зображення не покидають пристрій.

Чи можна використовувати вихід URI даних у будь-якому контексті HTML або CSS?

Так. URI даних, що починається з data:image/jpeg;base64,, за яким йде кодований рядок, може використовуватися як атрибут src тегу img або як значення url() у властивості CSS background-image. Усі сучасні браузери підтримують URI даних. Дуже великі URI даних можуть уповільнити відтворення сторінки, тому вбудовування зазвичай резервується для невеликих зображень розміром кілька кілобайтів.

Чи підтримує інструмент анімовані GIF?

Інструмент кодує весь бінарний вміст будь-якого файлу, що ви надаєте, включаючи анімовані GIF. Отриманий URI даних при використанні як src тегу img відтворюватиме анімацію в браузерах, що підтримують анімацію GIF.

Як декодувати рядок Base64 назад у зображення?

Перейдіть у режим декодування інструменту, вставте рядок Base64 (з префіксом data: або без нього), і інструмент декодує його та запропонує бінарне зображення для завантаження, а також покаже попередній перегляд.

Схожі інструменти

Тримайте все локально, досліджуйте додаткові інструменти.

Усі інструменти для зображень