WEB AUTHORING. MAT 108

Alejandra Jarabo
Media Arts & Technologies Division.sbcc

COMPRESSING GRAPHICS I
       
Here you can see a photographic-bitmap file saved as a compressed graphic for the web, using the GIF format arquitecture.

GIFs reduce file-size by reducing the bit-depth of the image, using a limited amount of colors to display the image. The list of those colors are called the color-palette or color table.

Bit Depth is therefore, the length (in integers) of the numbers assigned to store the color information that each PIXEL in the image stores.
The allowed length of those number, on each case, limit the amount of colors for that file, and also define the image file (less information to save for each pixel, times the ammount of pixels in the image).

File saved as a gif file.
No dithering (flat colors)

2 colors

2K

1 bit color deph
The numbers that host color-info for each pixel in this file, can only have one value.

1 bit can be either
1 or O
I
0

2 colors

A graphic with 1 bit color-depth is the simplest graphic you can make.

Electronic devices with limited screen capabilities can display them (cell-phones, personal organizers)

(see original up)

File saved as a gif file.
No dithering (flat colors)

3 colors. Actually uses a 2bit file.

3K

3 colors

File saved as a gif file.
No dithering (flat colors)

4 colors

4k

2 bit color deph
The numbers that host color-info for each pixel in this file
can have 2 integers.

2 bits can host 2 values
I
I
Can produce
I
0
4 different combinations
0
I
Each one assigned to a color
0
0

4 colors

A graphic with 2 bit color-depth can display 4 colors (remember computers store information with a binary system. each word has two possibilities 1 or O)

     
1
I
I
I
 
2
I
I
O
 
3
I
0
I
 
4
O
I
I
 
5
O
O
I
 
6
O
I
O
 
7
I
O
O
 
8
O
O
O
 
         

 

File saved as a gif file.
No dithering (flat colors)

8 colors

5k

3 bit color deph
The numbers that store color info for each pixel in this file,
can host 3 values.
3 bits stores 3 values, that can produce 8 different combinations.

 

8 colors

A graphic with 3 bit color-depth can display 8 colors (if you use 3 bit words, you can store 8 different combinations. See the 8 possible combinations on the left)

File saved as a gif file.
No dithering (flat colors)

16 colors

8k

4 bit color deph: A number defined by 4 bits can host 4 values.

Those 4 integer numbers can produce 16 combinations.

A graphic with 4 bit color-depth can display 16 colors
(if you use 4 bit words you can store 16 combinations, so 16 possible colors)

(see original up)

File saved as a gif file.
No dithering (flat colors)

32 colors

11k

5 bit color deph

A graphic with 5 bit color-depth can display 32 different colors

(see original up)

File saved as a gif file.
No dithering (flat colors)

64 colors

15k

6 bit color deph


A graphic with 6 bit color-depth can display 64 different colors
(see original up)

File saved as a gif file.
No dithering (flat colors)

128 colors

17k

7 bit color depth


A graphic with 7 bit color-depth can display 128 different colors

File saved as a gif file.
No dithering (flat colors)

256 colors

24k

8 bit depth color

This is a jpg file with 60% compression. It is 10k big

A graphic with 8 bit color-depth can display 256 different colors!