Automating Multi‑Format Sequence‑Frame Conversion for Web Animations

1. Project Background

During development, converting sequence‑frame animations into different formats (APNG, AVIF, WEBP, etc.) improves compatibility and performance. Previously, designers had to use tools like AE to convert formats, and developers wrote complex compatibility logic, causing redundant work.

The platform now offers automatic multi‑format conversion, decoupling design from development and reducing the need for compatibility handling.

2. Sequence‑Frame Format Overview

The platform supports exporting animations as Lottie, APNG, WEBP, AVIF, ordinary video, and transparent video. Each format has distinct advantages and drawbacks:

Lottie : cross‑platform, consistent playback, but larger file size.

APNG : high clarity, no distortion, but larger size and higher memory usage.

WEBP : high compression, small files, supports transparency and animation, but may lose quality at high compression and lacks support in older browsers.

AVIF : best compression and color fidelity, suitable for high‑quality small files, but limited browser support and higher encoding/decoding cost.

Video (normal & transparent) : smaller than APNG, suitable for large‑size or high‑frame‑count animations; transparent video adds extra memory overhead.

3. Applicable Scenarios

Choose formats based on cross‑platform needs, size, frame count, and transparency requirements. For small icons or banners, APNG is recommended; for larger animations without transparency, ordinary video is preferred; when transparency is needed, transparent video or Lottie can be used.

4. Platform Conversion Capability

The platform allows direct upload of sequence‑frame files and batch conversion into multiple formats, generating ready‑to‑use animation components for Web and React‑Native. Exported assets include the original files, runtime configuration, and a Vue component wrapper.

Architecture diagram:

The trans‑server service (Node‑based) handles upload, conversion task creation, RPC calls to the conversion engine, and caching via Redis.

5. Optimal Animation Format Dynamic Matching

At build time, the platform exports APNG, WEBP, and AVIF versions. At runtime, the <picture> element with multiple <source> tags selects the best supported format, saving bandwidth and improving user experience.

<code>&lt;picture&gt;
  &lt;!-- AVIF preferred --&gt;
  &lt;source srcset="path/to/animated-image.avif" type="image/avif"&gt;
  &lt;!-- WEBP fallback --&gt;
  &lt;source srcset="path/to/animated-image.webp" type="image/webp"&gt;
  &lt;!-- APNG as last resort --&gt;
  &lt;source srcset="path/to/animated-image.apng" type="image/apng"&gt;
  &lt;img src="path/to/animated-image.apng" alt="Animation"&gt;
&lt;/picture&gt;</code>

The runtime was extended to create a picture element programmatically, insert source tags based on the configuration, and load the appropriate image.

<code>export function mountConvertibleImage(instance: InternalInstance&lt;ApngConvertibleImageExportConfig&gt;) {
  const picture = document.createElement('picture');
  const sources = [{ srcset: instance.config.entrySrc!, type: 'image/apng' }];
  if (instance.config.extraData.convertible === true || (Array.isArray(instance.config.extraData.convertible) && instance.config.extraData.convertible.includes('webp'))) {
    sources.unshift({ srcset: instance.config.extraData.entrySrcWebp!, type: 'image/webp' });
  }
  if (instance.config.extraData.convertible === true || (Array.isArray(instance.config.extraData.convertible) && instance.config.extraData.convertible.includes('avif'))) {
    sources.unshift({ srcset: instance.config.extraData.entrySrcAvif!, type: 'image/avif' });
  }
  const sourcesElemMap = sources.map(source => {
    const sourceElem = document.createElement('source');
    sourceElem.type = source.type;
    sourceElem.srcset = source.srcset;
    picture.appendChild(sourceElem);
    return sourceElem;
  });
  const img = document.createElement('img');
  picture.appendChild(img);
  instance.wrapper.appendChild(picture);
  assignInstance(instance, {
    getBaseInstance: () => picture,
    load: async () => {
      const loader = loadPicture(instance, sourcesElemMap, sources, img);
      return loader;
    },
    play: async () => {
      sourcesElemMap.forEach(elem => {
        elem.srcset = sources.find(s => s.type === elem.type)!.srcset;
      });
      img.src = instance.config.entrySrc!;
    },
    destroy: () => { picture.parentNode?.removeChild(picture); }
  });
  return instance;
}</code>

The exported animation configuration file now includes new fields to describe the convertible formats:

<code>import entrySrc from './assets/effect.png';
import entrySrcWebp from './assets/effect.webp';
import entrySrcAvif from './assets/effect.avif';
export default Object.seal({
  type: 'apng',
  entrySrc,
  extraData: {
    convertible: true,
    entrySrcAvif,
    entrySrcWebp,
  },
});</code>

6. Conclusion

The article presented the characteristics and suitable scenarios of various sequence‑frame formats, described the platform’s multi‑format conversion capabilities, and introduced a runtime that dynamically matches the optimal animation format, thereby improving development efficiency and end‑user performance.