June 1, 2000 

Graphics

Notes from Chapters 15 and 15 of Web Design in a Nutshell

GIFs

Eight-bit Indexed Color - the set of colors in the image, its palette, is stored in a color table.  Each pixel in the image contains a reference to a table cell containing the color for that pixel.  You can view the table for an indexed color image in Photoshop.

When you convert a 24-bit image to GIF, you first convert the image to Indexed Color Mode, thereby reducing the number of colors to a palette of 256 or fewer colors.  The image editing tool does its best by using the most appropriate colors to approximate the image (an adaptive palette).  You can specify an alternate set of colors to use in this process, such as the Web Palette -- the 216 web-safe colors.

GIF Compression - (1) lossless (you may lose some information going from 24 to 8 bit color, however the compression itself is lossless), (2) uses LZW compression, which takes advantage of repetition in data streams.  Areas of flat color are therefore compressed well.

When to use GIFs - (1) areas of flat color (2) when you want a portion of the image to be transparent (i.e. the backgrond will shine through) because GIF is the only format universally supported in browsers (3) simple animation without relying on plug-in technology (animated GIFs)  -- not particularly good for photographs because of reduction to 256 colors and compression of photos less efficient

Tools - Image Editing Programs - Adobe Photoshop, Paint Shop Pro

Web Graphics Tools - Macromedia Fireworks, Adobe ImageReady

Vector Drawing tools - Macromedia Freehand, Adobe Illustrator, Corel Draw, and Corel Xara

Interlaced GIFS - rendered in a series of 4 passes, slightly increases size of fize

Transparency - Whatever is behind the transparent area (most likely the background color or pattern) will show through.  With transparency, graphics can be shapes other than rectangles -- e.g. suppose you have an oval picture -- the areas around the oval can be made transparent and thus only the oval displays.

In transparent GIFs, one position in the color table is designated as transparent and whatever pixel fills that position is known as the Transparency Index Color.

Preventing Halos - Anti-aliasing is the slight blur used on curved edges to make smoother transitions between colors; when you make the color around an anti-aliased edge transparent, the blur along the edge is still intact,  I think what it going on is that anti-aliasing is related to a certain color, then you make that color transparent and thus have another color show through, it may not look as good. 

Preventing Unwanted Transparent Areas - Create a distinct color for transparency -- choose a color that does not appear in the image.  Select the areas you want to be transparent and fill these areas with this color. [I don't understand step 1]

An additional and optional step is that you can turn the color back to its original color value (e.g. white) while keeping it distinct from nontransparent pixels sharing that color (e.g. white in the text areas).  To do this, you can edit the RBG values for the transparency color to set it back to the color it was before (e.g. white).  In doing this, you are assigning that color two positions in the Color Table,; one will be made transparent, the other will not be.

Editing Transparency with the Alpha Channel - I think this is a Photoshop discussion and it's hard to follow without knowing Photoshop

If the background of the web page is a solid color, instead of using transparency, you can simply paint the areas around the image the same color as the background of the web page.  If the background of the web page is an image, then you need to use transparency.  An advantage of using transparency in any event is that you can then change the background of the web page without having to redo the image, unless you run into the sort of halo problem discussed above.

Reducing GIF file sizes - limit dimensions, design with flat color, reduce bit depth (number of colors), limit dithering

JPEG Format

24-bit color -- do not use palettes for referencing color information; when JPEGs are displayed on a system that only supports 8-bit color, the browser will reduce the colors in the image to the web palette and some dithering will occur

JPEG compression - lossy compression -- the files are decompressed when displayed

Variable compression levels -- loss in image quality is also additive, so each time you edit a JPEG and resave it, you lose a bit; so keep one copy of the original digital image so that your final image only goes through the compression process once

Progressive JPEGs - displayed in a series of passes and are actually smaller; not supported in 2.0 level browsers and may not appear well in AOL 3.0 (what about later versions?)

Minimizing JPEG file size -- Reducing bit depth is not an option -- all you have to play with is the quality setting (compression ratio) -- some tools ofter the ability to create an optimized compression table rather than the standard Huffman table

Precompression image preparation - adding a slight blur to the image can reduce file size --e.g. Gaussian blur in Photoshop or prefilter in Fireworks or HVS JPEG plugin