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).