Use GIFs and still have a good PageSpeed?

Flad45
New Member
4 0 0

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?

Replies 11 (11)
JHKCreate
Shopify Partner
3451 618 875

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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Flad45
New Member
4 0 0

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
Shopify Partner
3451 618 875

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

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
JHKCreate
Shopify Partner
3451 618 875

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.

 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Flad45
New Member
4 0 0

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
Shopify Partner
3451 618 875

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:

JHKC_0-1599585568993.png

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. 

 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Flad45
New Member
4 0 0

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
Shopify Partner
205 24 114

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
techisours
New Member
2 0 0

Our Quality is Novelity...

techisours
New Member
2 0 0

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

rsdimitrov
Shopify Partner
94 8 28

@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>
I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov