Using Animated GIFs for Your Blog and Marketing

Using Animated GIFs for Your Blog and Marketing

We’re going to look at several ways of creating animated gifs and how we can use them to support the content of our blog. I’ll go over several free online tools that will help you make your gifs. You’ll be creating gifs from images, videos, and even SlideShare presentations in no time.

What Are Animated GIFs

First, I guess I should offer a quick definition of a gif. I want to keep this as simple as possible so I’ll be very brief. Webster says:

GIF (Graphics Interchange Format) – Standard computer file format for graphic images. GIF files use data compression to reduce the file size. The current version supports animated GIFs (a graphics image that moves). GIF and JPEG are the most commonly used graphics formats on the Internet.

That’s actually a great definition. It’s just an image file format (Like .doc, .txt, & .pdf are for documents) that happens to support automation (moving image). It also supports transparency, much like .png, so the three most popular image formats we, as bloggers, use are .jpg, .png, and .gif.

Use GIFs for very simple tutorial images

Here at Hot Blog Tips, we love video tutorials but a video isn’t alway necessary or even the best method of teaching. Often the best tutorial only requires short text-based content with a few images. It’s this type of tutorial or how-to post that animated gifs can come into play nicely.

The example below is actually a text-based how-to post supporting a video tutorial on our dedicated video blog that’s slowly taking shape. (Very slowly). You can see the post image in action at: Using Windows Snipping Tool for Screenshots.

GIF tutorial example

Best practices: A couple of things to keep in mind when using gif animation in a blog post:

  • Use animated gifs sparingly – very sparingly. Don’t allow the animation to become overwhelming and distracting for your reader.
  • Be mindful that quality animated GIFs can have larger file sizes and increase your page load times and, if too much, can ultimately hurt user (that’s the real people reading your content) experience. Oh, Google doesn’t like slow pages either. 😉

Where to submit your gifs

There are far too many places to mention (or for me to find) to upload or submit your GIFs to. One word of caution, many of your options will probably be a waste of time if it’s traffic you’re looking for.

For example, websites like GiphyGIFstache, and ReactionGIFs can be a fun place to browse but they won’t tolerate promotional images so you’d have to be VERY clever (and creative) just to get noticed. That’s just the first hurdle because the real problem is you’ll almost certainly be in front of the wrong audience and even if you did somehow manage to get them to your site, they’d just increase your bounce rate Personally, I don’t waste my time.

It’s better to stick with mainstream social sites like Twitter, Scoop.It and Tumblr. There are a bunch of subreddits on Reddit for submitting GIFs but Reddit is a strange breed when it comes to submissions. If you’re not already familiar with the game of Reddit, learn the rules before jumping in. If you even appear like a marketer in many of the subreddits, they’ll bench you in a minute, kick you out of the league, or, worse, the other players might beat you up a bit.

How to Make Animated GIFs

Making these cool moving picture images (I’m as sick of writing animated gifs as you are reading it) is the fun part. Most of us non-graphic designers will create them from multiple images or video clips. If you are somewhat of a graphic designer, you already know how to create gifs from scratch and probably find this post boring. 😉

Creating your GIFs from multiple images

Below we have a promotional image for a fictitious logo design contest. Notice the only animation is the small “deadline” print in the top right corner. This helps ease the distraction issue while still bringing attention to the notice.

GIF animation from two images example

Next, I made an animated image for use on Tumblr promoting this very post. I created the image (taken from the still graphic I created for Instagram that matches our featured image) by making several layers within Paint.net. I then saved each completed layer as a separate .jpg image and dropped those images into a free gif maker.

Post Animation - Optimized

GIF Optimization: This image, as with most gifs, is very large in file size so I ran it through a free gif optimizer (Just as I did with the gif from video below). You can see the image before it was optimized on Tumblr.

Converting short video clips into animated GIFs

There are many tools for taking video, or parts of a video, and tuning that clip it into an image with that same automation. Now it can be viewed online without a player and all of the major internet browsers support the .gif file format.

Another cool thing you can do with the video clip is add text, either on certain frames or the entire image. With a little creative planning, adding the perfect message to the right clip can make a powerful statement, marketing copy, or call to action. Oh, it can just be funny or cute too (As a creative marketer, understand those emotions).

Here’s one I created as an example (See, heart, and reblog it on Tumblr).

He Haz Heart

How I made this image in less than 5 minutes: I simply found a short video on my harddrive (this is one of my grandsons rocking to Kid Rock a couple of years ago).

  • I uploaded the video to ImgFlip GIF Generator, found the clip location I wanted, added my text (I know, I should be jabbing, not sending a right hook with this image message – confused?), then I created the image from that video clip.
  • Once I downloaded this 5 second, 360 x 270 gif, I had a whopping 1.7MB file size. That was fine for Tumblr, but not on this blog. So I uploaded my new animated gif to ezgif Gif Optimizer and played around with it until I had the file size down to 639KB. Still far too big for my tastes and a great reason to think carefully before using this type of image on your website but I had to make exceptions for this post.

Hot Tip Animated GIFs from YouTube Videos

While many of the online tools allow you to upload a video from YouTube to create animated gifs, YouTube is actually rolling out their own gif making tool. At the time of this post, it’s just in BETA mode but you can:

  • Learn how it works
  • See real examples
  • Watch a video tutorial on…

HBT.tv: Make a GIF on YouTube

 

Another Video Option

Until YouTube gets their thing going, you can use a tool like GIF YouTube

Best practices:

Keep the clip you use short, on target, and sharable. Be as creative as you can and make every jab count$.

The biggest thing to keep in mind when using someone else’s video or images to create any content, animated or not, is be damn sure you have proper permission to do so. Don’t risk violating someone’s copyright.

Creating Animated GIFs from your SlideShare Presentations

I love SlideShare and, as you know, we put a lot of thought and work in creating those presentations. Slideshares look amazing on sites like Twitter  and ScoopIt but on Tumblr… not so much.

So converting that SlideShare presentation into an image is great for sharing and promoting your presentations on sites that don’t support SlideShare but do support .gif images. See the converted presentation as a GIF on Tumblr here.

Slideshare as an animated gif

Here’s that same image on Twitter:

Blogging Tip – How this post could have been better

Allow me a second of self critique to help YOU create a better blog post, even though it’s completely unrelated.

Tip One: There are enough call to actions in this post to keep you from doing anything at all. Limit your call to actions to the single most important reason for creating the content.

Tip Two: I wrote this post for YOU, not the search engines BUT it would have been better for SEO purposes to break it into two or three separate posts; titled something like, “Making Animated GIFs from Several Images“, “Creating Animated GIFs From Video“,  “Marketing with Animated GIFs“, etc. You get the point, I just wanted a single resource for you. 🙂

Download the sloppy blog post outline and notes I used to write this post:

Related Posts:

Amazing Off-Site Related Posts:

Inline Tools for Creating GIFs

Wrapping up

Well, we’ve come to the end of all my GIF wisdom but, hey, don’t be sad. Take home a souvenir: I’d LOVE to give you my my sloppy research notes for this post.

About Brian Hawkins

Blogging superhero by day and internet super villain by night. Blogger, future online millionaire and all around great guy. Subscribe to our
VIP List
and enjoy true connection.