Use GIFs and still have a good PageSpeed?

[Flad45]

Hello

How can I get my GIFs under 1 mb or even smaller? 

I just found out that my Bounce Rate is 82%, so tested my PageSpeed first. Page Speed Insights gave me a score of 23 of 100. PingDom gives me a score of 72 of 100... whatever. I read that the PageSize should be under 4mb or even better under 2mb. My landingpage is 20mb, because I use 4 GIFS which sizes are between 2mb and 9mb. I used ezgif.com to create them out of my .mp4-video. I don't know how to get them smaller, but I need those videos/gifs for my langing page.

I got PhotoShop too and tried to "safe for web" and it is still a very big file.

Please can you guys help me?

[JHKCreate]

GIF compression is not straightforward, using Ezgif.com you will be able to produce compressed versions of GIFs however they cannot be uploaded to Shopify. Can you share your store's URL so I can see what's going on exactly?

Cheers!

[Flad45]

Thank you for answering!

This is my landingpage:

https://hexalumen.store/products/app-controlled-hexalights

When you use ezgif and then after creating the gif also use https://ezgif.com/repair and click  gifsicle unoptimize you can upload them. 

Thanks

[JHKCreate]

Yes that is correct, but more aggressive forms of compression will not work here, been there 😞

[JHKCreate]

I tried applying a heavy compression on the biggest GIF, dropped from 5MB to 1.5MB however as expected Shopify is rejecting it unfortunately. 

I suggest you upload the videos to YouTube then add the link in the gallery, much faster and the video content will remain the same.

[Flad45]

Thank you for helping me.

1. Don't you think you could put that 1.5mb GIF into the repair gif tool and then it work? (the link I talked about in the last reply)

2. You said I should upload it to youtube and add it to the gallery. Will it then still be an automatic played video which I can put in my product description? I want it to look exactly like my current page. And can you tell me real quick which steps I have to do for that?

Thanks.

[JHKCreate]

1. Tried it, didn't work as well. I've had previous problems with that unfortunately!

2. First upload the video to YouTube, then get the video's URL, go to your Product and use this:

For the layout let's check to see how it will look then, make sure to upload it in a square format and not rectangular. 

[Flad45]

I actually newer saw this option for the product pictures, I will use this in future 🙂

But don't you know a solution for the GIFs down in product description? Because I really like the videos play automatic for the user and I don't want them to press play and see the youtube title of my video.

Thanks!

[oreoorbitz]

The simple truth is GIF's are incredibly heavy and don't optimize well. There's no magic bullet, you either use a video, or you use a GIF and deal with the large file size and accept that a certain amount of your users won't see the gif as it won't load fast enough.

[techisours]

Our Quality is Novelity...

[techisours]

 I think the simple truth is GIF's are incredibly heavy and don't optimize well...

[rsdimitrov]

---

@techisours wrote:

 I think the simple truth is GIF's are incredibly heavy and don't optimize well...

---

Guys,

The solution to the gif problem is not to optimize them or replace them with YouTube videos.

YouTube adds an extra 750kb code to load the video player.

You can emulate a gif with webm/mp4 video for 1/10 of the size or less.

Upload the gifs to a gif hosting service, like gfycatg then get the embed code and use it instead of the gifs. Their code will determine the best type of resource to load based on the client. That's it. It doesn't have to be more complicated than that.

If you want to make it complicated, you can upload to imgur, download the mp4, upload it to your theme's assets folder then link it with this code instead of the gif code:

<video autoplay loop muted playsinline src="{ 'video.mp4' | asset_url }"></video>