Topics.

Images

1. Palettes
   • Many computers still in use can only display 256 colors.

   • Which 256 colors are used depends on the make of the computer.

   • Example: the standard 256 colors used by the MacOS is different from the standard 256 colors used Windows 95 (which is slightly different from Windows 3.1).

     

   • palette is a listing of the 256 colors available to a computer. Different computers use different standard palettes.

   • On most computers you can change the palette that is currently being used. Most image manipulating applications allow you to choose the palette that is used to create an image.

   • When you display an image, the colors from the computer's current palette are used.

   • If the picture uses a color that is not on the computer's palette, the computer will substitute the color that is in the same position in it's palette for the picture's color. This color may be completely different from the original color.

   • When you put an image on the web, it will be viewed by many different people using many different computers. Thus what the people see on your web page will vary.

   • In most image editing applications, you can change the number of colors in your image and can choose which palette is used for your image.

   • When an application changes the palette in your picture, it must map colors from one palette to the other. This process is called dithering .

   • When you create an image for the web, it is best to use a palette that is web safe , i.e., one that has only colors that are common to most computers.

   • Most graphics programs, including Photoshop and Graphic Converter, have web safe palettes that you can use in your images.

   • Note that to create "smooth" text must use a process called Anti-Aliasing . This technique smooths edges of letters by fading the text color into the background color. Requires lots of colors.

     If you have a 8-bit monitor, anti-aliasing will look pixelated.

     If don't use anti-aliasing, text will look "jaggy".

     There is no solution. Best approach: Use a browser-safe color for your text and then anti-alias. The anti-alias won't look real good on a 8-bit monitor, but is better than jaggies.

1. An image on a computer screen is made of a matrix of pixels arranged in rows.

2. Pixel: tiny dot of white, black, or color.

3. Create pictures, words, etc by controlling the pixel pattern.

4. Most programs generate the pixel pattern automatically. Example: characters, numbers, charts (in Excel) are all created by the program in which you are working.

5. Some programs allow you to control what goes on the screen to create graphics. These programs use two major approaches: bit-mapped graphics and vector graphics.

6. Bit-mapped graphics. Also called raster graphics. These are pictures that are, to the computer, a map showing how the pixels on the screen should be represented.
   1. For black and white graphics, a single bit of coputer memory represents each pixel. Each bit contains one of two possible values, 0 or 1.

   2. If allocate more bits-per-pixel can get more sophisticated pictures. Can use 8-bits to represent 256 shades of gray. This is more shades than the human eye can see.

   3. Can also use 8-bits to represent 256 different colors. This is common on older machines.

   4. Some machines support 16-bits (for 16 thousand colors) or 24 bits (for 16 million colors).

   5. The number of bits devoted to each pixel is called color depth or bit depth . See previous section of lecture notes.

   6. Another factor limiting realistic on-screen images is the number of pixels displayed on the screen. This depends on the amount of VRAM in the computer. Called resolution and is described by the number of pixels in a row X column, e.g., 1024 X 780. This can often be changed on the fly (note: not in William 203 machines).

   7. A final factor is the density of pixels. Also called resolution . Described in terms of dots per inch or dpi . See last set of lecture notes. Normal resolution of a computer is about 72 dpi.

   8. How do these two resolutions compare. I'm not sure, but think that you may have more than one pixel make up a "dot". Thus changing your screen resolution from 640X480 to 1024X780 shows more pixels on the screen. But your screen is still showing the same number of dpi, for example 72. Thus the size of the graphic doesn't seem to change, though there are now more pixles per dot. I'm trying to varify this, but can't find a source. No one seems to talk about it directly!

   9. Note that the resolution of a computer is different than the resolution of a printer. A picture will look fine on a computer at 72dpi, but will look pixelated or jaggy when printed. This is because of the physical difference between ink on paper and the phosphors on a screen.

   10. You can get around this problem by storing a picture in greater resolution. For example, when you scan in a graphic, you can choose to store it at 300 dpi.

   11. Note that a screen can only show 72 (or 96) dpi. So a graphic stored at 300 dpi will take up more than a screen.

   12. Printing a 300 dpi graphic will take up a single page and will look better beacuse of the higher number of dots in each inch.

7. Vector graphics. Images are stored in a different manner. Don't keep a collection of dots, but a collection of lines and shapes that are represented by equations.

   1. When you draw a line, the line is not stored as a pixel map, but as a mathematical formula representing the position, direction, and size of the line.

   2. Graphics saved this way are collections of lines, shapes and other objects. Thus the approach is also called object-oriented graphics.

   3. Advantage: can manipulate objects independently, even if they overlap. In a bitmapped program, when an object or shape overlaps another shape, their bitmaps are joined and you can never separate them. In a vector graphic, once you create the shape, you can always move, resize, rotate, etc. that shape, even if it overlaps another shape.

   4. Advantage 2: vector graphics take much less room to store than bit-mapped graphics. This is because we must only store an equation for each shape, and not information about every pixel.

   5. Thus vector graphics are prefered for the web. They are smaller and can be downloaded more quickly.

   6. Disadvantage: harder to achieve painting-like effects. Can't apply filter effects etc. on vector objects (though this is starting to change).

1. Graphics must be stored somewhere. Graphics files tend to be very large. Thus people have created a number of ways of storing graphics that retains the information about the picture, yet minimizes the amount of storage required. A method of storing graphics is called a format.

2. Unfortunately, there are many different formats available and some will only work on certain platforms.

3. Some different formats include:
   • PICT ( Macintosh Picture ). This is the Macintosh system software's native graphcis format. It's based on teh QuickDraw display language that the system uses to convey images on-screen. It's advantage is that it handles object-oriented (i.e., vector) graphics and bitmapped images equally well. it supports images in any bit depth, size, or resolution.

     PICT images cannot be used on the Web! Also, very few Windows applications handlre PICT files.

   • TIFF ( Tag Image File Format ). Developed by Aldus in the early days of the Mac to standardize scanned images. The most widely supported image printing format across both the Macintosh and PC platforms.

     Can't handle object-oriented artwork. Doesn't support JPEG compression.

     TIFF images cannot be used on the Web!

   • BMP ( Windows bipmap ). The native format for Microsoft Paint. Supported by a variety of Windows, DOS and OS/2 applications.

     BMP images cannot be used on the Web!

   • CompuServe's GIF ( Grpahics Interchange Format ).Originally designed as a means of compressing files so that you could quickly transfer photographs via modem and to CompuServe's bulletin board service. Can't handle more than 256 colors.

     There are currently two varieties of GIF, 87a and 89a. GIF87a supports strictly opaque pixels wheil GIF89a permits some pixels to be transparent.

     GIF images _can_ be used on the Web.

   • JPEG (named for the people who created it, the Joint Photographic Experts Group). JPEG is the most efficient and essential compression format currently available. It is a lossy compression scheme. It sacrifices image quality to converve space on disk. You can control how much data is lost during the save operation.

     The smallest amount of JPEG compression saves more space on disk that any non-JPEG compressions format and still retains the most essential detail form the original image.

     JPEG is a cummulative compression scheme which means that it is recompressed every time it is saved in the JPEG format. Each time you save, reopen, and resave a JPEG photo, some damage is done. Thus it is best to only save a JPEG image once.

     Note that when you uncompress a JPEG photo you do not recover information. When an image is saved in JPEG format, information is loss and can never be recovered.

     Here are two examples of JPEG pictures. The original picture was a PICT. The picture on the left has very little compression. The picture on the right has almost maximum compression. Notice how the quality degrades with increased compression.

     

   • PNG (pronnounced "ping"). Developed for the web. Essentially, a 24-bit version of the GIF.

   • There are lots of other formats available.

4. Web Graphics. Two formats are widely recognized by Web browsers, CompuServe GIF and JPEG. Another format, PNG is gaining in popularity and is recognized by the most recent versions of Netscape and Explorer.

   • Color on the Web. As discussed above, many monitors are limited to displaying 256 colors. System software (Mac OS and Windows) and browsers typically reserve up to 40 colors for their own use.

     When displaying images on these monitors, the browsers are left with 216 colors to display images. Browsers use a particular palette of 216 colors called a browser safe palette.

     If the images on your page contain more than 216 colors, or if they contain colors other than the 216 in the browser safe palette (and you're monitor only displays 256 colors), then the browser will try to combine existing colors to reproduce the missing ones. This is called dithering . Results are usually very bad.

     Only a problem if someone has a 8-bit monitor.

   • Transparency. Process of making some colors in your image clear. Allows you to see through an image to an underlying image. Good for overlapping images or to give an image a non-rectangular outline. GIF and PNG allow transparency. JPEG does not.

   • Speed. Must keep download time to a minimum. Methods:
     • Make your images smaller.

     • Compress the image.

   • Compression. There are three popular compression methods:

     • LZW (used in GIF images)

     • JPEG

     • PNG

   • LZW is particularly effective for computer-generated art like logos, rendered text, and other images that have large areas of a single color.

     Often, if you can reduce the number of colors in an image, LZW can compress the image even more.

     Problem: LZW is patented, so developers have to pay royalties on software that uses it. This is why PNG was developed.

     Problem: GIF images are limited to 256 colors.

   • JPEG is better at compressing photographs and other images that have many different colors.

     If you blur an image, thereby creating even more colors, JPEG compression is often more effective.

     Problem: It is lossy compression (see above).

     Problem: Compression information takes up a lot of space and is not worth it for smaller images.

   • PNG compresses better than LZW without losing information like JPEG.

   • Interlacing. A storage mechanism that allows a form of progressive display, i.e., viewers will see successively more detailed pictures displayed as the image is decompressed. All three formats support interlacing.

   • Animation. Only GIF images can be animated.