1. Images and the Web web graphics

2. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for the WWW is largely a matter of striking an appropriate balance between image quality and file size. The question that you will inevitably confront when developing web graphics is “How do I maximize image quality while minimizing file size?”

3. graphic: types Computer graphics come in two flavors, raster and vector. Raster images are described as a collection of small pixels arranged in a grid pattern. Vector images can be described by mathematical formulas or XML markup and tend to be much smaller in file size. Currently, vector images are not widely supported by web browsers. We must use raster type images. Raster Image Vector Image

4. file size vs. quality The quality and file size of an image is determined by three characteristics: image resolution, color bit depth, and compression scheme.

5. file compression Before graphics can be transmitted and displayed over the web they must first be compressed. Compression is the process through which the file sizes of computer graphics are reduced.

6. GIF and JPEG GIF (Graphic Interchange Format) GIF is a lossless compression scheme that can reduce file size by as much as 75%. GIFs are best used for images that contain large areas of flat color. The maximum number of colors that GIFs can contain is 256 (8 bit). GIF images also support one level of transparency and can be animated. JPEG (Joint Photographic Experts Group) JPEG is a lossy compression scheme that works best for photographs or continuous tone images with subtle gradations. GIF (5K)JPEG (17K) GIF (13K)JPEG (3K)

7. web graphics: color Unlike mixing inks create colors, computer color is defined by mixing light – red, green, and blue. Hexadecimal numbers refer to the amount of red, green, and blue light. #FF FF FF = 255R 255G 255B #C2 AE 5C = 194R 174G 92B Color for print - subtractive Color for computers - additive

8. web safe colors There are 216 colors that are shared by both Macs and PCs with low-end 8 bit video cards and monitors. If you want to be sure that your colors appear the same on both platforms, you should select colors from this common palette. Dreamweaver, Photoshop, and Fireworks provide web safe pallets. In HTML colors are defined by hexadecimal (base 16) numbers. ex. #FFFFFF = white.

9. shades of gray: gamma Windows and Macintosh computers vary in the degree of contrast between gray values that they display. This contrast is referred to as gamma. Technically speaking, gamma refers to the relationship between the input and output of a device, expressed as a number, with 1.0 being a perfect linear plot. Because Macintosh and PC monitors have different default gamma settings, 1.8 and 2.2 respectively, graphics prepared on Macintosh computers will appear slightly darker on PCs. MacintoshPC

10. The End web graphics