Sanity does not support APNG, but Lottie files can be used for lightweight animations.

5 replies
Last updated: Apr 22, 2024
does Sanity support APNG (animated PNGs)?
AI Update

Based on the documentation I reviewed, Sanity's image transformation pipeline does not explicitly list APNG (Animated PNG) among its supported formats.

The image transformations documentation states that transformations are limited to JPEG, PNG, WebP, PJPG, TIFF, AVIF, and GIF. While standard PNG is supported, APNG is not specifically mentioned as a supported animated format.

For animated images, the changelog confirms that as of August 2024, Sanity's Asset CDN supports animated GIF and animated WebP files, which will be transformed and returned as animated images. APNG is notably absent from this list.

Your options for animated content in Sanity

Since APNG isn't explicitly supported for transformations, here are your alternatives:

  1. Animated WebP - This is your best bet. It offers similar (often better) compression than APNG, maintains good quality, and is well-supported by Sanity's image pipeline and modern browsers.

  2. Animated GIF - Widely supported everywhere, though it has larger file sizes and limited color palette compared to APNG or WebP.

  3. Upload APNG as-is - You can upload APNG files to Sanity's asset system, but you won't be able to apply transformations like resizing, cropping, or format conversion. The file would be served as originally uploaded.

If you need APNG specifically for your project, I'd recommend converting your animations to WebP format, which gives you the benefits of Sanity's image transformation pipeline (on-the-fly resizing, cropping, CDN delivery, etc.) while maintaining excellent quality and compression. You could also reach out to Sanity's support team to express interest in APNG support if it's important for your use case.

No, unfortunately. It’ll just get converted to a PNG of the first frame.
figured I can use APNG if I go with a
file
type instead of
image
Awesome!
Checkout lottie files as well if your looking for a more lightweight animation option.
I just did some exploration for a client and the load time is super quick, and easy to integrate.
Ohh, that is pretty cool.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?