Встраивание изображений в base64

В Lottie-анимациях изображения могут быть представлены как внешние файлы или встроенные ресурсы. При работе с Lottie Web ключевое значение имеет структура секции assets, где описываются все растровые элементы, используемые в композиции.

Типичный элемент изображения в assets:

{
  "id": "image_0",
  "w": 512,
  "h": 512,
  "u": "images/",
  "p": "img_0.png",
  "e": 0
}

Поля:

  • id — уникальный идентификатор ресурса
  • w, h — размеры изображения
  • u — путь к файлу (URL или папка)
  • p — имя файла или данные изображения
  • e — флаг режима хранения (0 — внешний файл, 1 — встроенный ресурс)

При использовании внешних файлов Lottie Web загружает изображения по пути u + p, формируя URL для запроса.

Встраивание изображений в base64

Встроенные изображения используются для устранения внешних зависимостей и упрощения деплоя. В этом случае содержимое изображения кодируется в Base64 и помещается непосредственно в поле p.

Структура встроенного изображения:

{
  "id": "image_0",
  "w": 256,
  "h": 256,
  "u": "",
  "p": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...",
  "e": 1
}

Особенности структуры:

  • u становится пустым, так как внешний путь не используется
  • p содержит data URI с Base64-строкой
  • e устанавливается в 1, указывая на встроенный ресурс

Формат data URI включает MIME-тип изображения и закодированные бинарные данные:

data:[<mediatype>][;base64],<data>

Поведение Lottie Web при загрузке встроенных изображений

Библиотека Lottie Web обрабатывает assets в момент инициализации анимации. При встрече объекта с e: 1 выполняется следующий сценарий:

  • значение p интерпретируется как готовый источник изображения
  • дополнительная загрузка через сеть не производится
  • создаётся HTMLImageElement с data URI
  • изображение кешируется внутри внутреннего менеджера ресурсов

Упрощённый процесс:

const img = new Image();
img.src = asset.p; // data:image/...;base64,...

После загрузки изображение связывается с соответствующим слоем композиции.

Генерация base64 при помощи Bodymovin

Экспорт из After Effects через Bodymovin может включать опцию встраивания изображений. При включении этого режима выполняется:

  • извлечение растровых ресурсов из проекта
  • преобразование каждого файла в base64
  • замена пути u + p на data URI
  • установка флага e: 1

Результат экспортированного файла становится самодостаточным JSON без внешних зависимостей.

Фрагмент экспортированного assets:

"assets": [
  {
    "id": "img_1",
    "w": 128,
    "h": 128,
    "u": "",
    "p": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...",
    "e": 1
  }
]

Программное преобразование изображений в base64

В среде JavaScript преобразование выполняется через FileReader или fetch с последующей конвертацией в blob URL.

Пример преобразования:

function toBase64(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onl oad = () => resolve(reader.result);
    reader.readAsDataURL(file);
  });
}

Результат используется для замены поля p в структуре Lottie:

const asset = {
  id: "img_0",
  w: 300,
  h: 300,
  u: "",
  p: base64String,
  e: 1
};

Подключение Lottie-анимации с embedded изображениями

Lottie Web инициализирует анимацию через метод loadAnimation, принимающий JSON с встроенными ресурсами:

lottie.loadAnimation({
  container: document.getElementById("animation"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  animationData: animationJson
});

При наличии base64-изображений библиотека не выполняет дополнительных HTTP-запросов, так как все ресурсы уже содержатся внутри JSON.

Особенности использования base64 в Lottie

Использование встроенных изображений влияет на поведение анимации на уровне загрузки и рендеринга:

  • увеличивается размер JSON-файла за счёт Base64 (~33% overhead)
  • уменьшается количество сетевых запросов
  • ускоряется первичная загрузка при локальном использовании
  • ухудшается эффективность кеширования на уровне браузера

Base64-данные не разделяются между анимациями, каждая копия JSON содержит полный набор изображений.

Ограничения встроенных изображений

При использовании Lottie Web с base64-ресурсами возникают технические ограничения:

  • большие изображения значительно увеличивают время парсинга JSON
  • SVG-рендеринг может замедляться при частых пересчётах DOM
  • память браузера расходуется быстрее из-за хранения декодированных изображений
  • отсутствует возможность переиспользования ресурсов через HTTP cache

Особенно заметно влияние при множественных экземплярах одной анимации на странице.

Структурные отличия между внешними и встроенными ресурсами

Сравнение моделей хранения:

Внешний ресурс:

{
  "u": "images/",
  "p": "img.png",
  "e": 0
}

Встроенный base64:

{
  "u": "",
  "p": "data:image/png;base64,...",
  "e": 1
}

Ключевое различие заключается в полном отсутствии зависимости от файловой системы или CDN при значении e: 1.

Оптимизация base64-изображений в Lottie-проектах

При работе с embedded-изображениями критическим становится контроль размера данных. На практике применяются следующие подходы:

  • использование WebP вместо PNG при возможности
  • уменьшение разрешения до фактического размера отображения
  • предварительное сжатие перед кодированием
  • удаление альфа-канала при отсутствии прозрачности

Снижение исходного размера изображения напрямую влияет на итоговый размер JSON и скорость парсинга в Lottie Web.

Поведение при динамической подмене assets

Lottie Web допускает модификацию загруженной анимации через API. Встроенные изображения могут быть заменены аналогично внешним:

animation.updateImage = function(asset) {
  asset.p = "data:image/png;base64,...";
  asset.e = 1;
};

После обновления требуется перерисовка текущего кадра, так как WebGL/SVG слой не отслеживает изменения бинарного содержимого автоматически.

Совместимость рендереров с base64 assets

Поддержка встроенных изображений зависит от выбранного рендерера:

  • SVG: полная поддержка через <image> элементы
  • Canvas: декодирование в CanvasImageSource
  • HTML: использование DOM-элементов <img>

Во всех режимах data URI интерпретируется нативно браузером без дополнительных преобразований.

Кэширование и повторное использование данных

Base64-изображения не участвуют в HTTP-кешировании, так как не являются сетевыми ресурсами. Повторное использование возможно только на уровне:

  • памяти JavaScript (один объект JSON)
  • повторного использования уже загруженного animation instance

Отсутствие URL исключает механизмы ETag, Cache-Control и CDN-дистрибуции.

Оглавление