GIF Support

GIFs are still widely used for animated emojis and are currently supported for usage as a source for <img> elements. Prysm specifically optimizes for that usage by preloading the GIFs to avoid decoding at runtime. We recommend keeping the resolution below 128x128 and not exceeding 30 frames per animation.

Other usage of GIFs is not recommended for the following reasons:

  • The GIF image standard only supports 256 colors for images with no semi-transparency, meaning that every pixel is either completely transparent or completely opaque. As such, GIFs depicting complex colored images tend to look worse when compared to other widely-supported formats such as PNG and at the same time will have the same runtime performance cost.
  • GIF animations use a very old compression algorithm. For the same animation, a GIF tends to be 5-10 times larger than a similar efficiently encoded video. This leads to larger file sizes and longer load times.
  • Due to preloading, high-resolution and high-framerate animations will have a significant impact on the used memory.

Instead, prefer sprite sheet animations, live views or videos over GIFs. For example, using sprite sheet animations, you can paint frames directly into a render target and then display the end result in your UI via live views.

GIFs are not supported for usage as background-image, border-image, or mask-image. Further support and enhancements are not planned.