How to display responsive animated gifs

[rootdev (Cy)]

People from the email support recommended me to start a thread here and tag you @Phil .

We have issues rendering responsive animated GIFs in our website.

If you see Rooms to try this week: Black History Month and Lunar New Year | mmhmm
animated gifs are served at a huge size no matter which screen resolution you use.

For example: this gif has 1,53MB in the network tab .

The problem is that the same 1,53MB size is served across all devices. Inspecting the markup, we see that the srcset has a lot of different sizes in there:

https://images.prismic.io/mmhmm-website/6975a249-42f8-4d0d-b3b0-81ae6495d92e_lit-lotus-bk.gif?auto=format%2Ccompress&rect=0%2C0%2C855%2C478&w=211&h=118&fit=max&q=50 211w, 
https://images.prismic.io/mmhmm-website/6975a249-42f8-4d0d-b3b0-81ae6495d92e_lit-lotus-bk.gif?auto=format%2Ccompress&rect=0%2C0%2C855%2C478&w=423&h=236&fit=max&q=50 423w, 
https://images.prismic.io/mmhmm-website/6975a249-42f8-4d0d-b3b0-81ae6495d92e_lit-lotus-bk.gif?auto=format%2Ccompress&rect=0%2C0%2C855%2C478&w=845&h=472&fit=max&q=50 845w, 
https://images.prismic.io/mmhmm-website/6975a249-42f8-4d0d-b3b0-81ae6495d92e_lit-lotus-bk.gif?auto=format%2Ccompress&rect=0%2C0%2C855%2C478&w=1268&h=709&fit=max&q=50 1268w, 
https://images.prismic.io/mmhmm-website/6975a249-42f8-4d0d-b3b0-81ae6495d92e_lit-lotus-bk.gif?auto=format%2Ccompress&rect=0%2C0%2C855%2C478&w=1690&h=945&fit=max&q=50 1690w

but only the biggest one is being served.

What are we doing wrong? We are using gatsby-image, which works well for all the other formats except this.

[Phil (Phil Snow)]

Hi Team,

Yes @antoine.gilbert explained this once to me a bit and I investigated a different image than these. Though from these images that you've sent to me in this thread I can see they are being served at different sizes.

When I check this one in the network tab it's returned at 1.4mb:
https://images.prismic.io/mmhmm-website/6975a249-42f8-4d0d-b3b0-81ae6495d92e_lit-lotus-bk.gif?auto=format%2Ccompress&rect=0%2C0%2C855%2C478&w=845&h=472&fit=max&q=50 845w,

This one at 464kb:
https://images.prismic.io/mmhmm-website/6975a249-42f8-4d0d-b3b0-81ae6495d92e_lit-lotus-bk.gif?auto=format%2Ccompress&rect=0%2C0%2C855%2C478&w=423&h=236&fit=max&q=50 423w,

This one at 158kb:
https://images.prismic.io/mmhmm-website/6975a249-42f8-4d0d-b3b0-81ae6495d92e_lit-lotus-bk.gif?auto=format%2Ccompress&rect=0%2C0%2C855%2C478&w=211&h=118&fit=max&q=50 211w,

Which makes me think the issue is coming from Gatsby image as you said, which I know does something similar to imgix in it's compression and caching of images. So this double compression is probably what's causing your issues.

I would recommend when working with images coming from imgix that you use the imgix-react plugin instead, this will give you control of you images without the double compression:

imgix/react-imgix

Let me know if this helps.

Thanks.

[rootdev (Cy)]

Thanks. I am not sure I understand how to implement imgix correctly. I read this blog post and also the documentation here and it seems it will regenerate all images again? We dont need to do that because they are already processed by prismic, right?

Our query already give us a fluid.srcSet that has all srcset sizes as the examples above, why would we need imgix?

If you can give me an example using gatsby, that would be awesome.

[rootdev (Cy)]

I am still struggling with this issue since days.
I did a codesandbox to test solutions, here you can see the code

But again if you see the preview link, it's just one file which is 2,17MB and its not responsive at all. What is the right way to make this work?

[Pau]

Hey @rootdev, gatsby-image doesn't support gif resizing. So, going for using Imgix for all of your images, gifs, etc., is the way to go. It allows you to have a lot of customization for your images and because, as Phil said, having two compression processes at the same time it's not ideal.

And for the responsive views, you can use a picture tag and select a breakpoint for each gif image. I modified your code to exemplify this.