GIF Backgrounds 3

Original background files began as 4.75 MegaBytes as displayed in PhotoShop. (16 inches by 20 inches @ 72 dpi)

By carefully planning a background (BG) it is possible to create very large original documents that will compress in a GIF file format to better than 500:1 compression.

1) Horizontal data-changes are better than vertical data-changes
2.) Limiting palette colors means better compression
3.) little or no dithering, and little or no anti-aliasing, --> better compression.

1.) A transparent image can be placed over a BG area to make it a clickable button. (Client side image map)
2.) Tables are transparent to the BG, or can be used to cover portions of the BG if a cell is color filled.
3.) If the same BG is used on many pages, it will already be in user cache after the first download.

In each of these examples a single tile is used to create the background. It is 16" x 20" in size, and 72 dpi. It begins as a 4.75 MB file, and is then turned into a GIF format.

A. represents a simple solid color (yellowish BG) with a reddish (maroon) title bar across the top. The resultant file is 2198 bytes, and represents 1700:1 compression!

A B

A. BG file 2198 (1700 : 1)

B. BG file 3171 (1500 : 1)

C D

C. BG file 3246 (1590 : 1)

D. BG file 5521 (912 : 1)

E F

E. BG file 5682 (900 : 1)

F. BG file 8207 (621 : 1)

G

B. shows the addition of a new horizontal line (white), and increases the file size by about 1000 bytes.

C. Shows the addition of a second color using a 45 degree diagonal cut. Again the addition adds about 1000 bytes from the original.

D. Shows a long (20 inch) vertical line on the page, and you can see the file size increase is substantially more than B where the line is horizontal. File size is 5521 bytes.

E represents the same image as D but with the addition of a "DROP SHADOW" to add a 3-D effect. Only a slight enlargement over D. 5682 bytes.

F. Instead of building the page one step at a time, F is the culmination of the horizontal line, vertical line, drop shadow, 45 degree additional color and a simple logo in the corner. With all of this the file size is still only 8207 bytes. Still better than a 600:1 compression. The quality of F can be seen in the close-up image G. This is a real size portion of the browser displayed in F.

Note*: the background used on this page is 3904 bytes in size, and was created the same way.