Format Atlas

Guides

Choose a format for animation

Use GIF or animated WebP/AVIF for short image loops. Consider video when you need longer playback, audio, or controls; test real files in the target environment.

Which format should you choose?

Choose by the role each file plays in your workflow.

  • Short loop with broad compatibility → GIF
  • Transparent animation for the web → WebP
  • Compare size and quality where AVIF is supported → AVIF
  • Longer video, audio, or playback controls → MP4

Decide whether it is an image loop or video

GIF, WebP, and AVIF can encode short sequences of image frames. For longer content, audio, playback position, or user controls, consider MP4 or another video format instead.

Check transparency and delivery support

GIF transparency is limited. For animated WebP or AVIF, verify browser, CMS, and conversion support, then compare files using the intended dimensions, frame count, and settings.

Formats to consider

GIF

Good for: Short, simple loops where compatibility matters

Less suitable for: Long, colorful motion

WebP

Good for: Transparent animated images for web delivery

Less suitable for: Delivery without checking support

AVIF

Good for: Optimized animation where AVIF support is confirmed

Less suitable for: Workflows where generation and viewing support are unknown

MP4

Good for: Longer video with audio or playback controls

Less suitable for: A simple short image loop

Before you export

  • GIF conversion can change colors and partial transparency.
  • Check the source, loop behavior, and frame rate before conversion.
  • Autoplay and file-size behavior depend on the delivery implementation and user environment.

Related comparisons

AVIF vs JPEGAVIF is a newer option for optimizing web images and can support transparency. JPEG is a widely compatible lossy format for photo delivery. Choose based on measured results and audience support.PNG vs WebPBoth PNG and WebP can support transparency. PNG is a widely supported lossless format; WebP is an option for optimizing web delivery and can also support animation. Compare real assets and target browsers.AVIF vs WebPAVIF and WebP both target web images and support lossy and lossless options and transparency. Compare quality, size, encoding speed, and support using the same images; serving more than one format may be appropriate.MP4 vs WebMMP4 and WebM are containers for audio and video, not single codecs. MP4 is widely used across devices and services; WebM is a Matroska-based subset associated with web delivery. Size and quality depend on the encoded streams, settings, and playback environment.

Guides

Choose a web image formatDecide what kind of image you are serving and which browsers and tools must support it before choosing a web format.Choose a transparent image formatFor transparency, consider whether you need partial opacity, photographic detail, or scalable vector artwork, then check destination support.Choose a video distribution formatChoose the container and the codecs inside it according to the playback destination and production workflow.

References and specifications