СценарииПримеры

Как использовать Base64-изображения

Здесь собраны частые сценарии и готовые примеры. Замените пример своим результатом, чтобы быстро протестировать.

Вы получите два формата: Data URL (с MIME-префиксом) и чистый Base64 (без префикса)

Data URL (рекомендуется)

data:image/png;base64,QUJDZA==

Чистый Base64

QUJDZA==

Показать прямо на странице (HTML)

Подходит для быстрых превью, статических страниц и случаев без отдельного хостинга ресурсов

<img
  src="data:image/png;base64,QUJDZA=="
  alt="Base64 Image"
  width="240"
/>

Использовать как фон (CSS)

Подходит для иконок, плейсхолдеров и небольших декоративных изображений — уменьшает один запрос

.banner {
  background-image: url("data:image/png;base64,QUJDZA==");
  background-size: cover;
  background-position: center;
}

API / JSON передача

Полезно для отладки, прототипов и временной передачи. Не рекомендуется долго inline-использовать большие изображения в production.

{
  "filename": "image.png",
  "mime": "image/png",
  "dataUrl": "data:image/png;base64,QUJDZA=="
}

Если backend нужен только чистый Base64, отправьте QUJDZA== и передайте MIME/type отдельно.

Mobile / кроссплатформенное использование (примеры)

Работает в любой среде с поддержкой Base64. Примеры помогают быстро заменить значение и проверить результат.

import 'dart:convert';
import 'package:flutter/widgets.dart';

final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);

Когда стоит избегать Base64?

Большие изображения inline на длительный срок (размер сильно растет и ухудшает загрузку)
Статические ресурсы, которым нужен CDN-кэш и долгосрочное повторное использование
Production-изображения, где критичны первая загрузка и стратегия кэширования

Base64 лучше подходит для потоков данных и быстрой доставки, а не как замена полноценному пайплайну статических ресурсов