What is a Gifographic?

Make a bigger impact with a gifographic

What is a Gifographic?

A Gifographic is basically a animated version of an infographic, using a image format called a .Gif

A GIF (Graphics Interchange Format) file is a graphic image on a Web page that moves – for example, a twirling icon or a banner with a hand that waves or letters that magically get larger. An animated GIF can loop endlessly (and it appears as though your document never finishes arriving) or it can present one or a few sequences and then stop the animation. Animated GIFs are frequently used in Web ad banners.

Starwars Gif

GIFs have been around since 1987 when CompuServe introduced the image format. Fast forward 20 years and the popularity of infographics has had artists playing around with animated infographics.


Gifographics offer significant marketing benefits.

  • Give the viewer something animated and interesting to look at
  • Stand out of Twiiter and Google+
  • Save the viewer’s time with no need for lengthy explanations
  • Gifographic are relative rare
  • If you can create the graphic, you can create a simple animation
  • Great for SEO (Search engine optimization)
  • Look great on mobile devices


Gifographics have a few issues.

  • They don’t work on Linkedin or Facebook
  • They don’t work on Outlook
  • Harder to get right for SEO
  • They take longer to load than normal images
  • Although not difficult to produce it will take longer to create

Things to consider when producing a Gifographic:

Don’t go mental with the animations. Plan your layout, divide each animation into section rather than one large image. Ask yourself, are the animations making the information easier to comprehend? Are they making the information more memorable? Or, are they distracting the viewer?

Manageable file sizes:

Gifographics are going to be larger files than normal infographics, there’s really no getting around it. Each frame is a separate image. Try to keep the file size below 1 MB so viewers don’t have to wait 5 minutes to view your content. Remember viewers will look on mobiles with slower loading times.

How to make a gifographic

  • The best program to use is Photoshop
  • Create a storyboard
  • Create a draft of the infographic…. how it will generally look

Open your artwork in Photoshop, it’s doesn’t matter at this stage what the image size is, you can always change this later.

In Photoshop open “Timeline” from the window tab. This is the timeline for the animation, within here you will be able to set the sequence, how long each frame lasts and wither the animation will display only once or repeat forever.

Within your graphic choose the areas you want to modify. Cut, rotate, move and add to your image sequence and icons per your storyboard.

It’s probably best to play around creating a simple animation before you jump into building a multi level Gifographic. Have some fun with it!! Here is a good resource, it’s where I learned how to create animated Gif’s. www.creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/

You will build your animation from layers, or Photoshop can do it automatically by using the Tween function. It’s basically like doing a stop motion or flipbook animation. Each frame you create will be a different layer.

Set your timing for each frame, press play and see your animation come to life.

Rather than just saving the file you will need to export it and “Save for Web”.

That’s you all done, all you need to do now is share it everywhere

Share your beautiful creation with the world. Pinterest is a great place to curate it. Gifographics are still a rarity and if you make a semi-decent one, you’re likely to see interaction and shares on a level never experienced.


gifographic 004
Gifographic example sourced from www.knowledge.hsbc.co.uk/the-elevator/article/gifographic-growth-through-people