Moving from GIF to video format

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
A great article highlighting an aspect of improvement that I believe few know about. Thanks, Chris!
Indeed, it was fairly new to me, as I hadn't tried this out before. But the difference it makes is ENORMOUS! ✨
That's a small change that has a huge impact! I'm wondering if hashnode will also support this in the future.
Indeed Danny, it's such a small change, but also quite hard to change. I first wanted to automate but that was a bit hard.
Catalin Pit Perhaps the team could use this above code, i'm pretty sure your CDN would allow this as a "action" script.
Happy to help where possible ✨
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Perhaps you've seen my recent tweet about improving the technical side of the website.
I've noted the biggest technical downside is the actual size of images that are being served.
And looking at the data ahrefs gives us, it looks like GIFs are the biggest struggle.

Let's take a page with the biggest GIF in file size and see what it looks like now.
We'll be looking for the second GIF and see how we can improve.
The first thing I'll do from here is open the actual URL and run the Lighthouse report for this page.

As you can see, Lighthouse states we should use video formats for animated content (GIFs). Also, below that, you'll see we should avoid enormous network payloads, which well also fix by moving from GIF to Video.
Then I'll go ahead and download the GIF from the website and save it on my desktop.
Now I'm going to open my terminal and navigate to the Desktop folder.
The first conversion is from GIF to MP4.
ffmpeg -i {original}.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p {output}.mp4
Note: change the variables to the actual names of the files you are using and want to get.
This will give us a converted MP4 file, but let's also make a WebM file. These are even smaller.
ffmpeg -i {original}.gif -c vp9 -b:v 0 -crf 41 {output}.webm
To see the difference, let's check out the finder and see what we gained.

This is a massive difference:
GIF: 13,2MBMP4: 945KBWEBM: 370KBAs you can imagine, this will make our website way faster already, and it actually doesn't make much difference user experience-wise.
Currently a image is loaded like this:
<img src="image.gif" alt="descriptive text" loading="lazy" />
To convert this into video, we can use the video tag and specify both formats.
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
After this, let's deploy the website and see if we fixed anything.

You can see no more errors in the console, and the total requests are down to 119KiB. This is a massive improvement without really disbursing the user. If any, we help them by serving the website faster.
I'll be converting my GIF content to video this way throughout the weeks. Are you joining me?
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter