Images in HTML Pages
Six 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 the monitor, the browser will dither images, which looks dotty.
3. Transparency: GIF / PNG support transparency; JPEG does not.
• Needed for non-rectangular images or images you want to see through parts of them.
4. Speed = Download time.
A) Use SMALL images -or-
B) Compress images:
• GIF - lossless - colors stored in a lookup table
(good with large areas of same color) - only 256 colors.
• JPEG - lossy, use for photographic, continuous tone
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 GIF, less lossy than JPEG.
GIF may be faster even if the file size is bigger because it does not have to be decompressed in the system.
C) Website images need to be optimized based on audience. Many users may be using monitor resolutions: 1024 x 768 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).
Some other issues:
Gradients in large areas - Can cause a slow loading site.
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.
Anti-aliasing blends the edges of an object with the background; (turning it off will give a jagged, sharp edge).
[BACK to RESOURCES]