Practicalities of using animated gifs | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Thursday, 29th March, 2012

Practicalities of using animated gifs

Have you seen the cool new generation of animated gifs? Want to do the same but are worried about download speed? I am here to help!

Design Short Audio Tips:
The estimated time to read this article is 5 minutes
Play

Earlier this month I wrote a post encouraging you to reconsider the use of animated gifs. I argued that animated gifs can create truly stunning visual affects reminiscent of the moving pictures in Harry Potter.

Along with many others, Derek from the comments argued the images were too large to download.

I think this is an issue of page weight. The one for the guy adjusting his jacket is almost 800k.

This is a fair comment and the examples I showed were extremely large. In this post I want to suggest some ways of creating and then optimising these animated gifs to minimise their file size.

Creating your animated GIF

Although you could create an animated gif from pretty much any digital video, using an iPhone app called cinemagr.am is much easier.

Cinemagram

Creating an animated gif couldn’t be simpler in Cinemagram. First, record a short video of whatever you wish to animate. Second, select the elements within the image that you wish to animate (leaving the rest of the image static). Finally, apply filters to the image, such as making it black and white.

This works flawlessly. Creating the gif is the easy part. The hard part is working out what to animate. The biggest challenge with animated gifs is creating a feeling of movement without recording a massive video. It needs to loop in order to create this effect, which means choosing the subject with care.

If keeping the file size down is important to you, only animate a small portion of the overall image. The more of the image area that animates, the larger the file size.

Although Cinemagram is great at creating animated gifs, it is terrible at optimising them. When I saved my first gif, it came out at a whopping 3.9mb! Not the kind of thing you can include on a website.

Luckily with a little work I managed to get that file size down to only 114k. This was with little change in the animation or image. Let me explain how.

Optimising your animated gif in Photoshop

You maybe unaware as animated gifs have fallen out of fashion, but Photoshop has a built in animation feature. If you open up an animated gif you will see a timeline of your animation.

Photoshop timeline

By taking 5 simple steps in Photoshop I was able to reduce the file size considerably. These steps were:

Crop wherever possible

When it comes to gifs every pixel counts, so crop the image as tightly as possible. Jpegs have made us a little lazy in this regards because they compress in a different way. But with gifs you must minimise the number of pixels downloaded. This means you might also want to consider resizing the image too.

Remove unnecessary frames

The timeline in Photoshop allows you to see all of the frames in the animation. I found that Cinemagram produced far more frames than necessary to give the illusion of movement. The same is true with video. The eye can be tricked into seeing smooth movement with very few frames, so experiment with taking frames out and see what it looks like.

Photoshop timeline with delete highlighted

In my experiment I managed to go from over 80 frames down to just 14 and achieve almost exactly the same effect.

Each frame removed will significantly reduce the file size.

Only animate portions of the picture

I suggested only animating a portion of the image to keep the file size low. Unfortunately Cinemagram doesn’t do a great job at minimising the amount that changes. Luckily you can do this yourself in Photoshop.

Instead of updating the whole image for each frame, only update the elements that have changed.

Cinemagram places each frame of the animation on its own layer, which makes things easier. Pick one layer to be your default background layer. This will be the background on top of which you animate. It should be turned on for every frame of the animation.

Photoshop layers showing multple frames

For each frame, delete elements that do not change from your background layer. This deletes data that would have otherwise been stored in the final image. This data is already contained in our background layer so doesn’t need to be loaded for each frame.

Make use of delays

If you want to pause the action in a video, you insert a number of frames showing a static shot. Each of these frames increases the file size. However, this isn’t the same with animated gifs. Instead of adding extra frames simply tell the file to pause for a predefined period on a specific frame. This will avoid the need for extra frames to be downloaded so reducing file size.

Photoshop timeline with frame delay highlighted

Saving your image

Finally, when saving the animation don’t forget to experiment with limiting the number of colours. You can often significantly cut the number of colours so reducing the file size.

Photoshop Save For Web Dialogue
Of course the final image is never going to be as small as its jpeg equivalent. However, used sparingly animated gifs can add some life to your imagery.

What is more, it maybe possible to initially load a static image of the first frame. The animation would then be loaded after the page has been displayed. However, this lazy loading is techie stuff beyond my humble abilities :)

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.