12 memorable sci-fi movie moments was posted by Blastr just a day or two ago, and the animated GIFs there inspired this article.
Blastr used some elegant animated Sci-Fi GIFs in this one. When I use the phrase elegant while speaking of computers I am referring to using minimal coding to achieve maximum effect. In this instance, the GIF images are fairly high rez, but only a small number of pixels per frame are actually changing state. So, for example, the Moon GIF is 500 pixels wide by 222 pixels tall, weighing in as a very crisp image of 184KB. How can the file size be that small? Around 150KB is the base image, which never changes; a slice of the image 80 pixels wide by 140 pixels tall is the man jogging for 8 to 10 frames which loop back to the beginning.
Just like the MPG video that makes up your broadcast TV or cable signal, they give you the basic image (referred to as a Key Frame) and then only have to give you the pixels that are different in the next frame, and the frame after that, etc., until they come to the next key frame. In that way they have to send you a complete new hi-rez image every half second, or second and a half, and not the 24 to 29 times a second that online and TV video requires. The in between times they only have to update the pixels that are different from the last image, leaving you with a lot less bandwidth to transfer the same amount of visual information.
This particular page of animated GIF images is the best collection I have ever seen for demonstrating these principles. They use several different techniques to achieve these effects as well. The small slice of screen trick that the Moon GIF uses can also be seen in the Dr. Strangelove, 2001: A Space Odyssey, and Young Frankenstein animations. The Vertigo and Clockwork Orange animations cover a much larger area of their respective pictures, but use a trick involving the boundaries of an image segment. In both cases the shirt of each character supplies the material to be manipulated (it can be any other object with a border to be flexed), and any given pixel along the edges between the light and dark parts of the picture is set to cycle between 4 to 6 values of brightness and color. The end result is that the difference between one frame and the next is just as small in terms of number of pixels changed (information density), but the visual effect you observe takes on a whole different aspect.
Another technique demonstrated there can be seen in the two different Blade Runner GIF’s, distributed changes. In the Cityscape image, they are distributing 5 different areas of the image as tiny little animation segments, each much smaller than the single area that Moon or Dr. Strangelove gave us, but working on the exact same principles of an upper left and lower right corner for each animated area, with its own defined pixel changes. In the second Blade Runner animation the distributed change is a variation on the Boundary animation style, where this time the boundary is between raindrops and air. Any given onscreen atmospheric pixel only has to cycle between 6 separate values in sequence, and that 6 value range only needs to be defined once for all of them, to be used over and over for each.
There are many more ways to refine your animation (or any other streaming video you are building) for maximum visual effect with minimum bandwidth burned, but these are a few of my basic favorites. Thanks for taking the time to read through this set.
