1. Graphics Bitmap Vector
Graphics file types fall into two main categories: Bitmap Graphics and Vector Graphics.
Bitmap
Vector
Referred to as paint graphics
Can show color or black and white photographs/clipart
Non-scalable without loss of quality
Every pixel in the image adds to the overall file size
Referred to as draw graphics
Can show color or black and white solid fill/gradient image.
Scalable without loss of quality
File size is calculated by storing the positional points of the image and a generic fill color/pattern

2. Calculating File Size -Black and White Bitmap

3. Cont’d… Width 11 Pixels GIF and JPG
GIF and JPG
Higher in Quality = Higher in File Size
Its all about pixel potential
Height 11 Pixels
Color: 8 bit (lets you choose from 256 colors that are premixed)
Color: 24 bits (essentially mixes custom colors for each pixel on the fly!)

4. It all about defining the pixels and the pixels are numerous
                                                                                                                        

5. Static GIFS Limited to a range of 256 different colors

6. GIF Compression
In a bitmap image, the image file has to define the exact color of every pixel in the image.
For example, imagine a typical (JPEG) bitmap on the web that is 400 by 400 pixels. To define this image, you would need the following formula:
3 bytes per pixel X 160,000 pixels = 480,000 bytes.
That would be a huge image file, so both the JPG and GIF formats compress the image in different ways.
In a GIF image, the number of colors is reduced to 256 (compared to the millions of a color for a JPEG image) and then "runs" of the same-color pixels are encoded in a color *# Of Pixels format.
This process of compression is called run-length encoding or (RLE)

7. Run-Length Encoding Key BYTE 10001000 00001101 11001110 00010111
...3,4,5,6,7
Key BYTE

8. Animated GIF http://computer.howstuffworks.com/web-animation2.htm
An animated GIF is a sequence of GIF files all bonded together and displayed one after the other.
With enough panes, you can get very realistic animations. A minimum of 3 frames is necessary to create animation.
The total file size of an animated gif is the sum of the GIF files used to create the sequence, and that can add up quickly.
The disadvantage is that you have to keep the animation pretty simple to keep the file size down.

9. Data Compression
Lossless compression: Refers to data compression techniques in which no data is lost. The WinZIP compression technology is an example of lossless compression. For most types of data, lossless compression techniques can reduce the space needed by only about 50%.
For greater compression, one must use a lossy compression technique. Note, however, that only certain types of data – graphics, audio, and video -- can tolerate lossy compression.
You must use a lossless compression technique when compressing data and programs.

10. JPEG Compression
Most Web sites that publish photographs use the Joint Photographic Experts Group (JPEG) (pronounced "jay-peg") format for their images. JPEG is a popular format for two reasons:
It has good compression characteristics on photographic data.
It lets you adjust the amount of compression.

11. MPEG Compression
An MPEG file tries to eliminate repetition between frames to significantly compress video information.
In addition it allows a soundtrack (which animated GIFs do not). Because a typical sequence has hundreds or thousands of frames, file sizes can still get quite large.

12. Vector examples Bezier curve needs only four points!
[position: 3.123; 48.52]
[position: 10.03; 52.6]
[position: 2.95; 86.52]
[position: 11.04; 102.6]

13. Vector-based animation (Shockwave)
Shockwave/Flash provides a vector-based animation capability. Instead of specifying the color of every pixel, a Shockwave file specifies the coordinates of shapes (things like lines, rectangles, circles, etc.) as well as the color of each shape.
Shockwave/Flash files can be extremely small. They allow animation and sound. The images are also scalable -- because they are vector-based, you can enlarge the image and it will still look like a fluid animation.