HTML notes: Web Images
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
Where to get images?

• Draw, Paint, Create, Scan or use a Digital Camera.

Five factors to consider in Web Imagery:

1. Formats: GIF, JPEG, PNG (always 72 dpi).
2. Color: 8-bit monitor = 256 colors minus 40 system colors = 216 Browser-safe Web Palette.

• If image has too many colors for monitor, browser will dither images, which looks dotty.

3. Transparency: GIF / PNG support transparency; JPEG does not.

• Needed to use layers and have things move behind each other.
• Needed for Non-rectangular outline of images.

4. Speed = Download time.

A) Use SMALL images -or-
B) Compress images:

• LZW Compression in GIF - Use for computer generated images
(large areas of same color) 256 colors.
• JPEG - lossy, use for photographic, continuous tone; dithers on 8 bit monitor (thousands of colors).

Lossy = A compression that reduces file size by actually removing data from the image.
Lossless = A compression method that retains all image detail.

• PNG - better compression than LZW, less lossy than JPEG, but not supported fully.

C) Website images need to be optimized based on audience. Many users may be using monitor resolutions: 640x480 and 800x600 with Modem connections.

5. Animation: Use GIF or SWF for animation.

6. Interlacing (Progressive): Use GIF or JPG for progressive refinement of image (no need to use on small images). JPG progressive is not 100% compatible in all applications.

Some other explanations:

Gradients in large areas - Top-Bottom in background is much smaller file size than Left-Right or diagonal.

A bit is an electronic signal that can be either ON or OFF. If you set your monitor to 1 bit then all you have is two colors: ON for color and OFF for no-color. Conversely, setting your monitor to 16 colors means its working with 4 bits (2 x 2 x 2 x 2), 256 colors with 8 bits and so forth. These bit settings are commonly refered to as Bit Depth. Bit depth for images then tells us how many colors are used in those images.

256=8bit or 28, 128=7bit or 27, 64=6bit or 26, 32=5bit or 25, 16=4bit or 24, 8=3bit or 23, 4=2bit or 22, 2=1bit or 21.

The following is a list of Bit Depth and their corresponding number of colors:

• 1 bit: 2 colors (black and white).
• 4 bit: 16 colors.
• 8 bit: 256 colors.
• 16 bits: 65,536 colors.
• 24 bits: 16 million colors. (3 color channels (R,G, & B) * 8 bit per channel)

Dithering is the intermixing of two colors to create the impression of a 3rd color (less effective compression).

• To see how your image will look on an 8-bit monitor: View > Preview > Browser Dither in ImageReady.

Anti-aliasing blends the edges of an object with the background; (turning it off will give a jagged, sharp edge).