Using GIF's in your portfolio Using GIF's in your portfolio

Using GIF's in your portfolio

In recent years animated GIF's have grown in popularity with filmmakers as a simple way of displaying a snippet, or loop, from a video into a format that both browsers and website platforms like Fabrik can work with.

Firstly, yes you can use GIF's for your cover images. And yes, those GIF's can be animated. However, the humble GIF was never designed to be used in this manner, and there are some important considerations to keep in mind when using them.

GIF compression works by turning many pixels that carry the same colour value into a single pixel value, where possible and then rewrites the information back out when displayed. It's this single factor that allows the GIF format to remain small, and is the reason why such an old format has prevailed on the internet since it found an audience in the nineties. Yes, the nineties!

And the GIF format works really well at compressing imagery that features flat, solid colour, but when used in photographic images the results aren't so desirable. At it's most inefficient a GIF can only hold 256 colours and, depending on the algorithm used to encode the GIF, these colours will most certainly have travelled away from the original colours when converting any sort of photographic image to a GIF.

Since the rise of video on the web a lot of video applications have featured an export to GIF output option, but when saving a video sequence to GIF the result can very quickly become incredibly unwieldy, and can go as far as crashing browsers too.

To avoid you literally destroying your own website and angering your viewers by crashing their browsers, Fabrik has a 4Mb filesize limit on uploaded GIF's. Imagine a scenario where your viewer hits your work page and ends up trying to download thumbnail images for, say, 20 projects. Boom, that's like 80Mb trying to force itself down the pipe in one go and suddenly your graphics card goes supernova trying to render them all out.

So try the following for good GIF'ing:

Subtle

Choose a sequence with limited movement, and keep within a scene. Not only does this help keep the colours down, but it makes for a much more subtle GIF that is nicer to view when displayed next to a bunch of other GIF's.

Short

Keep GIF loops short - render out a second or two of animation tops.

Loop

Try a reverse and run your sequence backwards to return the loop to its origin. This lovely effect makes GIF's 'dance' and is an excellent way of enticing viewers into content like music videos.

Small

If you're using GIF's as cover images then you're always going to get a pixellated result (its the nature of how a GIF works) so you don't need high-res imagery. Keep your pixel sizes low. There's no need to output a GIF at anything higher than 720p (1280x720px) and really you won't see any difference outputting higher than 540p either.