[QUESTION] WordPress Speed Issue with Animated Gifs

RogerM

RogerM

Well-known member
Mar 3, 2020
461
439
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

RogerM

Well-known member
Mar 3, 2020
461
439
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

RogerM

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

e2869da8a8af4e7a656e702a6b8c2dbe.png
 
Mscv50

Mscv50

! 𝖎'𝖒 𝖜𝖆𝖙𝖈𝖍𝖎𝖓𝖌 𝖞𝖔𝖚 !
Babiato Lover
GiveAway Master
Trusted Uploader
Jan 10, 2020
3,712
18,802
113
🦇The Dark Night🦇
You don't have to convert that, just upload it and embed..
 
Mscv50

Mscv50

! 𝖎'𝖒 𝖜𝖆𝖙𝖈𝖍𝖎𝖓𝖌 𝖞𝖔𝖚 !
Babiato Lover
GiveAway Master
Trusted Uploader
Jan 10, 2020
3,712
18,802
113
🦇The Dark Night🦇
you client files are gifs, right?
upload that and embed, or are you getting the same result regarding the speed?
 
Mscv50

Mscv50

! 𝖎'𝖒 𝖜𝖆𝖙𝖈𝖍𝖎𝖓𝖌 𝖞𝖔𝖚 !
Babiato Lover
GiveAway Master
Trusted Uploader
Jan 10, 2020
3,712
18,802
113
🦇The Dark Night🦇
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.
 
RogerM

RogerM

Well-known member
Mar 3, 2020
461
439
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.
 
Mscv50

Mscv50

! 𝖎'𝖒 𝖜𝖆𝖙𝖈𝖍𝖎𝖓𝖌 𝖞𝖔𝖚 !
Babiato Lover
GiveAway Master
Trusted Uploader
Jan 10, 2020
3,712
18,802
113
🦇The Dark Night🦇
.gif is an image bro, and you can use the plugin as i mentioned above.
 
RogerM

RogerM

Well-known member
Mar 3, 2020
461
439
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

Mscv50

! 𝖎'𝖒 𝖜𝖆𝖙𝖈𝖍𝖎𝖓𝖌 𝖞𝖔𝖚 !
Babiato Lover
GiveAway Master
Trusted Uploader
Jan 10, 2020
3,712
18,802
113
🦇The Dark Night🦇
There is a lot of gif compressors out there, you can try one of them:
gifcompressor.com

Compress GIF Animations Online

Is your GIF too big? Try our free GIF compressor. Compress multiple files at once, each up to 50MB.
gifcompressor.com gifcompressor.com
ezgif.com

Animated GIF optimizer and compressor

Free online tool for optimizing animated GIF images to reduce file size. Compress GIFs with LZW compression, reduce colors or frame rate, remove duplicate frames.
ezgif.com ezgif.com
www.iloveimg.com

Compress your GIF & animated GIFs in seconds for free!

Choose your GIF images and compress them in seconds maintaining animation! Shrink GIF images to reduce filesize for free!
www.iloveimg.com www.iloveimg.com

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

wish you all the best, time for a nap now 😴
 
Mscv50

Mscv50

! 𝖎'𝖒 𝖜𝖆𝖙𝖈𝖍𝖎𝖓𝖌 𝖞𝖔𝖚 !
Babiato Lover
GiveAway Master
Trusted Uploader
Jan 10, 2020
3,712
18,802
113
🦇The Dark Night🦇
Oh yes, i forget to mention this plugin to, give it a try :
wordpress.org

Featured Video Plus

Add Featured Videos to your posts and pages. Works like magic with most themes which use Featured Images. Local Media, YouTube, Vimeo and many more.
wordpress.org wordpress.org
 
rachidjunk

rachidjunk

Active member
Nov 15, 2020
129
71
28
RogerM said:
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?
Click to expand...
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>
 
RogerM

RogerM

Well-known member
Mar 3, 2020
461
439
63
Maracaibo, Venezuela
rachidjunk said:
HI @RogerM How doing?
Click to expand...
All good mate, how are you?
rachidjunk said:
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.
Click to expand...
That´s the thing, I´ve tested that code snippet and nothing works. Also, the page is NOT built on DIVI.
rachidjunk said:
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>
Click to expand...
You lost me.
 
rachidjunk

rachidjunk

Active member
Nov 15, 2020
129
71
28
RogerM said:
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.
Click to expand...

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
 
You must log in or register to reply here.

Similar threads

freedomdad
I have a Question about membership site??
Replies
2
Views
496
General Tech Discussion
vinu
vinu
rojo_salas
[Question] Automate subtitle TEXT EFFECTS
Replies
0
Views
341
General Tech Discussion
rojo_salas
rojo_salas
rasel.
i have a question about video share site
Replies
0
Views
387
General Tech Discussion
rasel.
rasel.
C
Software Question
Replies
0
Views
617
General Tech Discussion
craigburmr
C
C
Senior Software Developer question
Replies
1
Views
532
General Tech Discussion
thediv
thediv

Latest posts

Forum statistics

Threads
69,226
Messages
908,441
Members
237,052
Latest member
test2025

Share this page

Share this page

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

Forums Contact us

User Menu

Login
Community platform by XenForo © 2010-2022 XenForo Ltd.
Top Bottom