In a "full color" image, there are three colors used for every pixel. these three colors are Red, Green and Blue. Each pixel in the image has a mixture of RGB, in values of 0 to 255. So there are 24 bits of color information per pixel, 8 bits of Red, 8 bits of Green and 8 bits of Blue. 24 bit, full colro images can be very large. The internet browsers and connection are not fast enough to handle very large files, even with DSL and very fast connections! If page has large number of full color images the page will be very slow to load.
Compression:
Browsers use two form od compression to make theimages smaller for transmitting
across the net. one is through limiting the color information in a image.
The second methodis to use the algrithmic compression, JPEG compression.
In fact these two images types are the most common images types used on
the net. The third format is PNG.
Chapter 14 in the Neiderst book has a comprehnsive decription of the image
format and how they work.
You will notice that the image is "pixelated" this is because the numberof colors is limited to 256 and there is not enough colors to see a smooth change ove rth images as in the .JPEG in right panel. The image below is a close up. You can see each pixel and see the color in each pixel is quite distinct from the other pixels.
The smaller the file, the more compression, and the image quality is affected.
You have to trade off quality for size. If you have only one image on your page, then you may be able to use low compression, high quality image. if you have many images, it will be best to compress more to reduce thamount of information you are sending across the net.
These Images on the right panel are two palettes for color. The first above is a color table from Power Point.
The second, below right, is the color table from Dreamweaver. The Dreamweaver pallette is in Hexadecimal. You see the red circle around the string of numbers and letters above? This is a color! each two spaces in the word are for red, green and blue. more on Hexadecimal color a can be found in the following link, hexcolor.htm.
The index color table is a list of colors:
index0=255,10,0 -this is a red with a little blue
index1=0,255,0 -this is solid bright green
index2=255,255,255 -this is white
...
...
index14=100,100,100 -this is grey
index15=0,0,0 -this is black
Each pixel in a image use the color that it's index point to. if you change
this color in the table index then the pixels change color too. you can
test this in Photoshop by going to Mode, changing the mode to Index and
the going back to Mode and select the color table and cahnge the color
in on or more of the table indices.
Resolution:
All of these images can be scaled in the HTML editor. but i strongly
suggest that you avoid scalingimages in the editor. Allimages shoul dbe
scaled to a specific pixel size to be exactly the size you need in the
page. See the next page on resolution.
The Image above is brought at it normal scale. it is NOT scaled in
Dreamweaver to a different size. Every pixel of the image occupies one
pixel in the screen. the actual resolution of the image is 247 x 177
Below
is the same image scaled to some other resolution than 72 pixels! The
images is scaled to occupy 326 x 252 pixels.
It
looks pretty crappy doesn't it?
Transparency:
The .GIF format can be made to be transparent allowing the background
image or color to show through in certain areas. By saving in the GIF
89a format you can specify which color(s) to be transparent.
In the panel
above there is a background image imported. over that is some .GIFs with
the Index #0 set to be transparent. this allows the image to superimpose
over a backgorundimage or color.
The edge of the image button image is designto lay over a white back ground.
The pixel on the edges over a green background as inthis example cause
the text to look pretty bad.
Below is the same image over a white background. Youcan see that the text
and button edges looknice and clean!
This is a the same transparent .GIF! just over a white background.