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!
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.
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.
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.
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.
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.
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.
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 :)
- 5 exercises to engage clients and stop you wireframing alone
- Call to Action: The 10 Most Effective Techniques
- How to tell if you are a design snob