Although Adobe Flash can do a vastly superior job creating and presenting animation and has a phenomenal compression scheme (when used with vector shapes), its lack of support by iOS (iPad, iPhone) has relegated it to second-tier status. Because of this, animated GIFs have gained importance. The ability to create animated GIF files is many years old.
Note that animated GIFs are sometimes referred to as videos, but this is inaccurate because video is not involved in the process under normal circumstances.
Some animated GIFs can contain malicious code including ransomware. I found this out. As I understand it, the malware loads when the image buffer is not immediately large enough to display the image. When you create a GIF you do not need to be concerned about this. But if you are searching for GIFs on the web and play one of them it may infect your computer.
Google often uses animated GIFs for its doodles, the little animations that is uses on its primary search page. These animations can be a source for ideas and technique. If you right-click on one and use Save Image As (or similar) you will see what format the file is by looking at the name the file will be saved as.
If the file name ends with .gif then you may want to save it on your computer so that you can open it in Photoshop to find out what each frame contains and therefore how the animation works. When you complete this exercise you will know how to view the frames in such a file. But note that the images are the property of Google, therefore only use it for your edification. Also note that many Google doodles use sprite animation instead of GIF.
GIF animation file sizes can be quite large depending on the image content and how many frames are in the animation. Web developers must always strive for reducing file sizes to minimize download times. Because of this concern it is best to attempt to minimize the pixel height and width dimensions of the file and to minimize the total amount of frames used. Each frame is in essence a separate image that requires its own storage space.
In addition, GIF files have are limited to a maximum of 256 colors. The colors can be any colors, but there can only be 256. This is referred to as indexed color because the file contains an index of the colors used.
256 colors may seem like many colors, but when an image includes gradual changes of color such as gradients, the limitation may become visually apparent as visually displeasing bands of color. Also, the file size will become bloated due to the RLE compression method employed by GIF to keep file sizes small.
The GIF compression method (or, scheme) saves color information only when colors change. Therefore, if you have 20 rows of one color, for example blue, then the only information that the file needs to record is that are 20 rows of blue pixels that run the width of the image. This requires only a negligible amount of data storage.
This limited use of color reduces file size but it relies on using image components that have a limited amount of colors. That is why GIF files are best suited for images that contain mainly solid colors such as logos, cartoons, simple geometric shapes, and text. Incidentally, PNG-8 is identical to GIF in this regard, but generates slightly smaller file sizes than GIF. However PNG does not allow for animation within its file.
This is unlike what what happens when there are images with lots of different colors or shades. In that case, almost every pixel needs to be saved with unique color information. This results in larger file sizes and poor quality images.
Comparison of a gradient saved as a JPEG on the left and as a GIF on the right:
To create an animation, individual images need to be created and then shown in rapid succession to create the illusion of movement. Each image is referred to as a frame.
The success of the animation is based on a smooth transition from one frame to the next, the frame display rate (the amount of frames shown per second), the amount of distance that the objects in the image move from frame to frame, and the use of motion blur when practical (motion blur is beyond the scope of this article).
There are two ways to create frame-by-frame animated GIFs of a moving object in Photoshop: