You are here

GFYs: Why you should be using them, and how you can make them!

Body: 

So since I started developing my stupid game I've been posting GFYs of it. I am a massive advocate of this format, and I think more people should use it. Sadly I don't see a whole lot of uptake, and oftentimes I see people using animated gifs or YouTube videos where GFYs would be way better. So I thought I would write something up to advocate and argue for their use, and also explain the technical steps I take in order to make them myself, so anyone reading this might get a headstart. I think this is called "raising awareness" or something. That sounds important, so lets say I'm trying to "raise awareness" of GFYs.

First things first: What is a GFY? -- simply, a GFY (pronounced jiffy apparently, but I'd disagree!) is a HTML5 video that wraps around an animated gif, meaning that the file size is dramatically smaller than the original gif, but is just as easily embeddable into your web-pages and tweets. Like the GIF, it's a short. looping animation at its core. Don't get me wrong -- GIFs are great, but they're very slow and big, and resource intensive. I always prefer GIFs or videos of games, because I think screenshots are often quite boring and static. Videos are typically used for more substantial stuff though -- if I spend the time loading a video, usually involving going to YouTube or Vimeo or something, and it turns out to only be about 3-4 seconds in length, I usually feel a bit ripped off. The GIF/GFY however has a nice place where it sits inbetween the static, boring screenshot and the more substantial video, where you can show off short clips of cool stuff in your game with a minimum of hassle for your viewers.

This is a GFY from my game:

The GIF version of this is 57.2mb. The GFY version is 6mb with no noticable loss in quality, and loads basically instantly on any modern broadband connection. The awesome amazing website GFYcat will convert your media into GFY format automatically, and host the resultant GFY for you.

For making GFYs, I use Fraps to make the original videos and Photoshop to turn them into animated GIFs, though obviously any other software with the same workflow will do. You do not actually need to convert the videos to GIFs, as GFYcat will allow you to upload up to 15sec of raw video. However I prefer to convert my videos to GIFs first, because it means the filesize will be smaller, meaning a faster upload and processing time on GFYcat, and I am incredibly impatient. Usually when I post a GFY it's because I added something new to the game that I think is cool and I absolutely have to show off right now right this second argghhhhhh look at it!. Be aware though that building GIFs in Photoshop is very memory intensive -- the GIF above took around 4-5gig of memory while it was processing, and took around 5-7 minutes to generate in total. This is because Photoshop has to reduce the colour palette to 256 colours available to GIFs, which is quite resource intensive it seems on big files. Perhaps it does other stuff too. Overall, my procedure for building these things is:

1) Make video in fraps.
2) In Photoshop go to File->Import frames as layers.
3) Select the bit of the video I want to make a GIF of.
4) Re-size and crop the image if need be.
5) Go to File->Save for Web.
6) Go and have a cup of tea, as this bit might take a while!
7) Save, upload the resulting file to GFYcat.

Step 6 is where the colour reduction will happen, and this can be a bit of a nightmare to configure, as there are various knobs and dials to fiddle with and some of them will make your video look awful. For a kick start, here's the settings I use for Tiny Robot Justice Squad on this page.

The most important thing for me is to ensure 'Convert to SRGB' is turned off, and ensure Adaptive Mode is turned on. These seem to give me the best results, but your mileage may vary.

So that's roughly how it's done. I hope this might be of use to someone down the line, or might inspire someone to start making GFYs of their games. Remember they embed pretty much seamlessly into web-pages and tweets, so they're great for posting to things like #screenshotsaturday and #indiedevhour and stuff.