how to make your own website gif
Today’s post was inspired by a client who wanted to learn to make her own gifs. Gifs are those super fun moving images you send via text or social media when you want to celebrate a win with a pal.
Today I’ll teach you what a gif is, why they’re important in web design, and how to make one yourself.
Are gifs a video or an image?
The age old adage… 😉
Gifs are actually images taken from a video clip, brought down to a lower quality, and kept stitched together. Kind of like the original “moving picture - movies” from a bygone era, gifs’ unique nature allows them to look like video but not take up much space on your website.
Why Gifs are Important in Web Design
One of my secrets to super engaging websites is the use of movement – videos, animations, and gifs.
Movement helps draw a website visitor’s eye and attention. It breaks up the monotony of text. It makes the experience of being on your site just plain fun.
Videos are great to use on your website. I love using them as backgrounds for top banners and in “Introduction to the Company” sections.
But when you’re building a website on Squarespace or any other DIY platform, you’ll be limited in how much video space you can use. Using lots of video can slow down your website load time. And even though they’re super engaging, videos can still be passed over. If visitors don’t click “play” they won’t get to see what’s in your video.
Gifs have amazing capacities to engage website visitors. They’re as eye-capturing as video content but take up way less space and load time – they’re the space of an image. They also “play” continuously so scrollers and scanners can’t skip over them.
How to Make a Gif and Use it in Your Squarespace Website
Once you learn the basics of making a gif, it’ll be really easy and fun to create moving images for your website.
You’ll need to use a 3rd Party gif maker, like Giphy.com
Follow the step-by-step below to learn how. These instructions will actually help you create a test gif with stock video as you build your website.
Where to Use a Gif in Your Squarespace Website
You can use your new gif anywhere you want to use an image. I suggest using them sparingly and only when you want to emphasize something or to break up text.
If you are using a video banner on your desktop website, you can also use a gif as your mobile fallback image so it looks like there’s a “video playing” even when you’re on mobile. More about that in a future post!
