[QUESTION] WordPress Speed Issue with Animated Gifs

  • 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"

RogerM

Well-known member
Mar 3, 2020
448
427
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?
 

RogerM

Well-known member
Mar 3, 2020
448
427
63
Maracaibo, Venezuela
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.
 

RogerM

Well-known member
Mar 3, 2020
448
427
63
Maracaibo, Venezuela
Yeah, just tried that actually and the video feature is a premium feature.

e2869da8a8af4e7a656e702a6b8c2dbe.png
 

RogerM

Well-known member
Mar 3, 2020
448
427
63
Maracaibo, Venezuela
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.
 

RogerM

Well-known member
Mar 3, 2020
448
427
63
Maracaibo, Venezuela
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?
 

Mscv50

Well-known member
Jan 10, 2020
2,485
13,532
113
🦇The Dark Night🦇
google.com
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 😴
 

rachidjunk

Active member
Nov 15, 2020
134
76
28
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:
You don't have permission to view the code content. Log in or register now.
 

RogerM

Well-known member
Mar 3, 2020
448
427
63
Maracaibo, Venezuela
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:
You don't have permission to view the code content. Log in or register now.
You lost me.
 

rachidjunk

Active member
Nov 15, 2020
134
76
28
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
 

Similar threads

Forum statistics

Threads
50,573
Messages
557,687
Members
137,047
Latest member
elamnix
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock    No Thanks