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!

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 :)

  • http://twitter.com/jelobejon Jesús E. Lobejón

    I will add some more tips to create/optimize Photoshop Animated GIFs:

    -try to make the background solid: sacrificing it, if possible, will help the color reduction and optimization

    -you can import video as an animation with the File>Import>Video Frames to Layers. Play with all the options, specially  the one that takes only X frames for each second of video

    -if you import video frames, use a layer mask to limit animation to some areas, and duplicate that mask to other layers, dragging it with the Option/ALT key pressed

    -transparency has a role in this too, try activating/deactivating it (in the Save for Web dialog) and watch what happens with the filesize

    • boagworld

      That is superb advice. Thanks.

  • gautch

    Do we get to see your end result? 

    • boagworld

      Sure. You are looking at it ;) look carefully.

      • gautch

        Ahh! Slick. Your “Make use of delays” was what made me miss it.

        • boagworld

          I didn’t want it animating all the time. That would be annoying like in the bad old days.

  • http://twitter.com/_richardg Richard Garside

    Gimp has a fab feature for optomizing animated gifs. It will work out exactly which elements stay the same and change between each frame and only include what it needs to.

    It’s been a while since I used it, but I just checked the docs and you can find it here:

    Filters -> Animation ->
    Animation Optimize

  • bgrggfe

    Imean Shaheed was working last Sunday when federal agents rushed into the Patapsco Flea Market, announced over the loudspeaker that the bazaar was closed for business and shut down vendors selling  Cheap Louis Vuitton Handbags and Tiffany & Co. jewelry.”It was like the movies,” the 20-year-old Shaheed said Saturday after the Cherry Hill flea market re-opened. Some booths were empty, but the parking lot was full and customers flocked to vendors such as Shaheed who were open for business via Louis Vuitton Outlet Store.

  • wodejia g

    I use Gimp to create animated gifs. It is easy to use.

  • http://www.facebook.com/blatantdisrespect James Sergeant

    any information on how much you reduced the gif file size using this method? i’m considering using simple animated gif’s in background of a web page but not if a small file size isn’t acheivable. thanks, James

  • Leon Ray Lefliur

    You animated a man sticking out his tongue? that is not at all gay.

Headscape

Boagworld