Bug: Problem uploading GIF images to Storefront

[juliomoreira]

Describe the bug
GIF images are loosing animation when uploaded to Storefront

To Reproduce
Steps to reproduce the behavior:

1. Go to Storefront;
2. Edit an element that supports image upload like a Carousel;
3. Upload animated GIF file;
4. See that the image looses its animation properties;

Expected behavior
Uploading animated GIFs should retain animation data;

[hapoza]

@brunojdo Had told me that they're not going to allow GIF's, it's vtex.file-manager-graphql that strips the frames from the file, because GIF's are very large and would negatively impact the website performance.
The ideal case that he mentioned, is for vtex.file-manager-graphql to allow upload of videos, and following this best practice for animated images as videos https://web.dev/replace-gifs-with-videos
But for that to work, the "image renderers" all should be updated to render self playing videos (like image, carousel, info-card).

I already have an issue with the same discussion vtex-apps/file-manager-graphql#4

Workarounds for now could be to use rich-text or sandbox, but that doesn't work for all cases (like carousel)

[fabiofeichtinger]

I think this approach is too aggressive, a lot of big e-commerce use gifs as medium type. For example Americanas.com, Dafiti:
https://images-americanas.b2w.io/spacey/2019/07/01/semana-tec_ESTRELA_28-06_02-CEEEERTO.gif
https://dafitistatic-a.akamaihd.net/cms/onsite/2017/HomeNeutra_285x155_Socialmedia_110717.gif

This image above only has ~100kb.

I don't know if the market is prepared to this mindset, maybe it should be considered in a future release as a Major of the StoreFront, allowing stores to migrate to this new paradigm after it's mature enough.

[fabiofeichtinger]

Maybe the solution is limit the file update maximum size more than block gifs

[klzns]

I think we should accept GIFs as upload files and transform them to mp4 or WebM in our backend.

As suggested here: https://web.dev/replace-gifs-with-videos

[saviomuniz]

We do have a way of displaying GIFs in the store, although not recommended nowadays for performance issues, like pointed previously. You guys could use the Image component and use the src prop to point to a gif image.

[klzns]

Fixed some time ago