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

Calculating File Size -Black and White Bitmap

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!)

It all about defining the pixels and the pixels are numerous                                                                                                                         

Static GIFS Limited to a range of 256 different colors

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)

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

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. http://computer.howstuffworks.com/web-animation2.htm

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.

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. http://computer.howstuffworks.com/question289.htm

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.

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]

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. http://computer.howstuffworks.com/web-animation1.htm