• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

[QUESTION] WordPress Speed Issue with Animated Gifs

RogerM

Well-known member
Mar 3, 2020
459
467
63
Maracaibo, Venezuela
Hi there BABIATO!!

I have an issue with a client´s site in regards to performance.

The client is just in love (literally) with displaying animated gifs on his site. The problem with this is that each file is like 8MB-10MB and it´s seriously hurting performance.

So, I was recommended to convert those gifs into webm format and add them as HTML5 videos.

With all honesty, I converted the gif into a webm format, and this weighs less than 200Kb and its quality is decent but, I have no freaking idea how to add it as an HTML5 video.

I found this resource online from Divi (the site actually uses Divi) but I am not good with HTML stuff.

Thoughts?
 
Yeah the problem is not converting the image or NOT hosting them locally. That part I got it covered.

My issue is being able to replace the gif file for that webp file or embed the URL from an external source as a featured image.

The site is a local company hosting recreational events so, very often they publish a banner in a form of animated gifs and it´s starting to be a pain in the butt.

I need to get around this and be able to change the gif file for either a webp one or embed an external URL link.
 
Yeah, just tried that actually and the video feature is a premium feature.

e2869da8a8af4e7a656e702a6b8c2dbe.png
 
you client files are gifs, right?
upload that and embed, or are you getting the same result regarding the speed?
 
Because in this case you will use imgur like a CDN ! And it will load faster !
But maybe i am wrong , 03:55 AM HERE.
Just trying to help, sorry.
 
No, you´re 100% right about everything.

I am just not seeing how I can embed the video URL as a featured image?

Perhaps I forgot to mention this is an event post.
 
I know is an image file but, as stated in my original post, that animated gif files weigh 8+ MB and affecting speed.

The post already has an animated gif as a featured image.

I need to compress it or even convert it into a different format.

I was able to convert it to webp and the quality is decent and the file only weights 165Kb

HUUUGE DIFFERENCE!

So, now, back to my video embed issue.

Or, do you know a better and more effective way to compress gifs?
 
There is a lot of gif compressors out there, you can try one of them:

But you can try also this tip from the video below:

wish you all the best, time for a nap now 😴
 
Oh yes, i forget to mention this plugin to, give it a try :
 
Hi there BABIATO!!

I have an issue with a client´s site in regards to performance.

The client is just in love (literally) with displaying animated gifs on his site. The problem with this is that each file is like 8MB-10MB and it´s seriously hurting performance.

So, I was recommended to convert those gifs into webm format and add them as HTML5 videos.

With all honesty, I converted the gif into a webm format, and this weighs less than 200Kb and its quality is decent but, I have no freaking idea how to add it as an HTML5 video.

I found this resource online from Divi (the site actually uses Divi) but I am not good with HTML stuff.

Thoughts?
HI @RogerM How doing?
Actually you really don't need to be "good with HTML stuff".

You just have to follow the resource you found and when they tell you to insert the HTML video code snippet, you just go ahead and use the DIVI code module.

Remember when you insert the video code snippet below, to adjust the path to your webm files (in the "src" attribute):

Code:
<video autoplay loop muted width="400" height="400">
    <source type="video/webm" src="wp-content/uploads/2017/04/chaplin.webm">
</video>
 
HI @RogerM How doing?
All good mate, how are you?
Actually you really don't need to be "good with HTML stuff".

You just have to follow the resource you found and when they tell you to insert the HTML video code snippet, you just go ahead and use the DIVI code module.
That´s the thing, I´ve tested that code snippet and nothing works. Also, the page is NOT built on DIVI.
Remember when you insert the video code snippet below, to adjust the path to your webm files (in the "src" attribute):

Code:
<video autoplay loop muted width="400" height="400">
    <source type="video/webm" src="wp-content/uploads/2017/04/chaplin.webm">
</video>
You lost me.
 
All good mate, how are you?

That´s the thing, I´ve tested that code snippet and nothing works. Also, the page is NOT built on DIVI.

You lost me.

OK my bad for Divi-based suggestion, I was mistaken by your own remark stating "the site actually uses Divi", so I thought your website was based on DIVI.

Let's clarify the situation:
1) Your website isn't based on DIVI
2) You want to convert your Gif into videos
3) You know how to convert and store (possibly externally) your Gif in videos
4) You looking for a no-code way to insert videos in place of your current GIF images.

A general answer to your problem really depends on which theme you're using (and for non builder-based themes, you'll certainly need to have to insert some code or at least short-codes)

If the GIF images you trying to replace are specifically feature images, then a Google search on "Wordpress Feature Video" will show up several plugins that pretend to do just that.
I can't give you specific advices on how to use those plugins as I never experienced any of them.
But they certainly will add some input field in the Dashboard for posts where you can choose a video that will be displayed in place of or beside the feature image.

The bad news is that you probably have to:
1) To convert manually your GIFs and store the videos
2) Enter manually the path of the feature video for each post


Here's a 2017 tuto describing the workflow for one of these plugin.

Take care Bro
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock