Create an animated gif in Photoshop CS6, insert the gif animation into the header section, and insert three graphic text elements at the bottom (one for gif, one for jpg, and one for png).
The Graphics Interchange Format (GIF) is a bitmap image format that was introduced by CompuServe, and has since come into widespread usage on the World Wide Web due to its wide support and portability. The format supports up to 8 bits per pixel thus allowing a single image to reference a palette of up to 256 distinct colors. The colors are chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color. GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality. GIF employs a technique called "DITHERING" to trick the eye into believing the color is solid by using two different colors from it's own 256 color palette and placing them, in this case, side by side in a predictable pattern. Notice how the pixels change back and forth from dark to light in the GIF version while the JPG version, with it's 16 million color palette, is one solid color.
Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors. GIF is better than JPG for images with only a few distinct colors, such as line drawings, flat tone graphic elements and small text. With an animation editor, GIF images can be put together for animated images. GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through.
The Joint Photographic Experts Group (JPG) is one of the image file formats supported on the Web. JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images. The information that is discarded in the compression is information that the human eye cannot detect. JPG images support 16 million colors and are best suited for photographs and complex graphics. The user typically has to compromise on either the quality of the image or the size of the file. JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness.
The Portable Network Graphics (PNG) is the third graphics standard supported by the Web (though not supported by all browsers). PNG was developed as a patent-free answer to the GIF format but is also an improvement on the GIF technique. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality. PNG does not support animation like GIF does.
