Images for Information and Interaction

1. Images for Information and Interaction One of the major features that make the World Wide Web stand out from other forms of information media is that pages on the Web can contain full-color images. It was arguably the existence of those images that allowed the Web to catch on so quickly and to become so popular in so short a time. To place images on your Web pages, those images must be in GIF or JPEG format (GIF is more widely supported) and small enough that they can be quickly downloaded over a potentially slow link. The use of images in Web pages is one of the bigger arguments among users and providers of Web pages today. For everyone who wants to design Web pages with more, bigger, and brighter images to take full advantage of the graphical capabilities of the Web, there is someone on a slow network connection who is begging for fewer images so that his or her browser doesn't take three hours to load a page. As a designer of Web pages, you should consider both the attractiveness and loading time of web pages. Balance the fun of creating a highly visual, colorful Web page with the need to get your information effectively to everyone you wants to have it.

2. Images make the text information more vivid, support faster interpretations that are not easily possible with text. So, we can say they are the epicenter of multimedia. Images could be static or dynamic (in case of animations or generating charts etc.). Static images could be created using any of the Image-Editing tools or could be sourced from scanned images/image capture from digital cameras, which in turn needs to be retouched for achieving good quality. Animated images that may or may not have links are dynamic in nature. Some basic GIF animations could be created using software like ImageReady and more interactive complex animations could be achieved using advanced tools like Flash.

3. As introduced earlier, the two most common graphic file formats on the web are .GIF (Graphic Interchange Format) and .JPEG (Joint Photographic Experts Group). These file formats are used on the web because they have the best compression. Compression is the technique used to take a large file and turn it into a smaller file by applying a fancy mathematical algorithm to it. Since many users are accessing web pages on 28.8 modems, the smaller the file, the more quickly it can be transferred over the net. Image size is no joke. If your images take too long to load, a user will never even bother to wait to read about what you have to say. A good rule of thumb is that you should use .GIF files for images and .JPEG files for photographs.

4. Use the GIF format in these situations • Transparent images. • Table or page backgrounds that use only a few colors. • Anytime when 256 colors is sufficient for the image Use the JPEG format in these situations: Images created from photos, especially of people, scenic, animals, etc. When you need a background consisting of colors that are not available in the GIF format. The .GIF format is also interesting because of the amount of "special effects" it provides. Besides a standard .GIF file, you can easily download freeware programs to create interlaced .GIF files, transparent .GIF files, and animated .GIF files.

5. An interlaced .GIFfile is a file that loads in pieces. It starts out fuzzy and continually focuses until it is in perfect focus. Interlacing does not actually speed up the loading of the image, but it does make a user feel as if it does because they can watch it materialize. Transparent .GIF's allow you to specify a single color that will become transparent, thus allowing the background to show through. This is useful when you want to create the illusion of irregularly shaped artwork such as when you add text art to your page. Instead of getting an ugly square box around your text, a transparent .GIF will make the type appear to blend right into the page. The following example shows the same image, one with no transparency and one with a transparent background.

6. Animated .GIF files allow you to merge several images into one in order to create a cell animation. Note that for each cell, the image is that much larger, so you must take care to make your animation in as few cells as possible. Animated banners, or pictures, are some of the largest file size images on the web.  This is because they really consist of multiple images, which means larger overall file size and increased download time. Modern image animators will compress the images used in an animation by removing pixels that are duplicated between the image frames.  This can be a tremendous benefit with animations consisting of similar looking frames.

7. File Formats Overview of various multimedia file formats Graphics File Format

9. BMP: It is the native format for MS Paint, the generic graphics program included with Windows. BMP supports 16 million colors and RLE (Run Length Encoding) compression. You can open and save BMP files in RGB, Indexed, Grayscale, and Bitmap color modes. JPEG (Joint Photographic Experts Group): Primarily used for two purposes – to compress files and to save files for use on the Web. You can open and save JPEG files in RGB, CMYK, and Grayscale color modes. It is a lossy compression mode, which means that it loses information to make the file smaller. The amount of data that is lost depends on the settings you choose when you save a file in JPEG format. GIF (Graphics Interchange Format): GIF, which stands for Graphics Interchange Format, is a loss less method of compression. All that means is that when the program that creates a GIF squashes the original image down it takes care not to lose any data. It uses a simple substitution method of compression.

10. The maximum compression available with a GIF therefore depends on the amount of repetition there is in an image. A flat color will compress well - sometimes even down to one tenth of the original file size - while a complex, non-repetitive image will fare worse, perhaps only saving 20% or so. There are problems with GIFs. One is that they are limited to a palette of 256 colors or less. CompuServe, which created the GIF, did at one point say it would attempt to produce a 24-bit version of the GIF, but then along came problem number two: Unisys. Unisys discovered that it owned some patents to key parts of the GIF compression technology, and has started demanding fees from every company whose software uses the (freely available) GIF code. This has somewhat stifled development. There is a 24-bit, license-free GIFalike called the PNG format, but this has yet to take off

11. PCX (PC Paintbrush): Native format for PC Paintbrush, the Windows paint program. PCX supports 24-bit color. You can open and PCX in RGB< Indexed, Grayscale and Bitmap color modes. PICT (Macintosh Picture): Native Macintosh image format. This format has been used extensively in desktop-publishing applications and for transferring files across platforms. PICT can support bitmaps and object-oriented images. It can compress files and works particularly well on images with large areas of color, such as black and white alpha channels TIFF (Tagged Image File Format): A Standard for images that will be placed in desktop-publishing programs. It can be transported across platforms and compressed to reduce file size. You can open and save TIFF files in RGB, CMYK (with alpha channels), Grayscale, Lab, Indexed, and Bitmap (without alpha channels) color modes.

12. PCD (Kodak PhotoCD): PhotoCD is a technology developed by Eastman Kodak for high-quality, visually lossless image capture and storage. PhotoCD service providers are licensed by Eastman Kodak to capture (or convert) images to Kodak PhotoCD format and to write them to a specialized CD-ROM disc called a Kodak Digital Science PhotoCD Disc. These discs are each capable of holding up to 100 or more high-quality images. They are multi-session CD-ROM's, which means that a customer can have a few images added to the disc and bring it back to have more added at a later time. Images on the disc are stored in a specialized file called an Image Pac that contains five (or sometimes six) copies of the image at resolutions ranging from 72K to 18 (or 72) megabytes in file size. Image Pac's may be used on any IBM-PC Compatible, Macintosh or UNIX computer. Each image is accessible through Kodak's PhotoCD Access software. Wide acceptance of the Kodak PhotoCD format in the graphic arts industry has made the Image Pac a reliable standard for desktop publishers. Depending on the user's intentions, other software may be used to manipulate PhotoCD Images including:

13. Kodak KPCMS Filters for Photoshop, Illustrator, PageMaker & other • Desktop publishing applications • Kodak PhotoCD Acquire Filter for Photoshop • Kodak PhotoInsert software for Microsoft Office applications • Internal PhotoCD filters in programs such as Microsoft PowerPoint • Corel PhotoPaint Photographers and photo labs can use the larger resolutions, especially the Base x 64 image in the 6­resolution Image Pac, for archiving "electronic film" and for photo retouching and restoration. PSD (Photoshop format): Native Photoshop format – retaining all the Photoshop specific features like layers, channels etc. Corel’s Painter and Photo Paint and Jasc’s Paint Shop Pro can import PSD files with layers. To use an image in a PSD file in Quark, you will need to flatten it (eliminate its layers) and convert it to TIFF, EPS or other compatible format.

14. PNG (Portable Network Graphic): Supports transparency and 16 million colors. Supports RGB and Grayscale color modes (with one alpha channel). Compression possible.

15. ABC of Colors Color Models A color model is an orderly system for creating a whole range of colors from a small set of primary colors. There are two types of color models, those that are subtractive and those that are additive. Additive color models use light to display color while subtractive models use printing inks. Colors perceived in additive models are the result of transmitted light. Colors perceived in subtractive models are the result of reflected light. The Two Most Common Color Models There are several established color models used in computer graphics, but the two most common are the RGB model (Red-Green-Blue) for computer display and the CMYK model (Cyan-Magenta-Yellow-Black) for printing.

17. Notice the centers of the two color charts. In the RGB model, the convergence of the three primary additive colors produces white. In the CMYK model, the convergence of the three primary subtractive colors produces black. In the RGB model notice that the overlapping of additive colors (red, green and blue) results in subtractive colors (cyan, magenta and yellow). In the CMYK model notice that the overlapping of subtractive colors (cyan, magenta and yellow) results in additive colors (red, green and blue). Also notice that the colors in the RGB model are much brighter than the colors in the CMYK model. It is possible to attain a much larger percentage of the visible spectrum with the RGB model. That is because the RGB model uses transmitted light while the CMYK model uses reflected light. The muted appearance of the CMYK model demonstrates the limitation of printing inks and the nature of reflected light. The colors in this chart appear muted because they are displayed within their printable gamut (see below).

18. Additive vs. Subtractive Color Models Since additive color models display color as a result of light being transmitted (added) the total absence of light would be perceived as black. Subtractive color models display color as a result of light being absorbed (subtracted) by the printing inks. As more ink is added, less and less light is reflected. Where there is a total absence of ink the resulting light being reflected (from a white surface) would be perceived as white. Color Gamut and Color "Space

19. Examples of color depth are shown in the following table

20. Determining Color Depth Since each bit represents 2 colors, it is easy to work out the number of colors for the various color depths. The number of possible colors would be 2 to the power of the number of bits per pixel: A color depth of 4 bits would be 2 times itself 4 times: 2 x 2 x 2 x 2 = 16 colors A color depth of 8 bits would be 2 times itself 8 times:2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256 colors. A color depth of 24 bits would be 2 times itself 24 times:2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 16,777,216 colors

21. True Color Images are known as "True Color" where each pixel is defined in terms of its actual RGB or CMYK values. Every pixel in a true color image has 256 possible values for each of it's red, green or blue components (in the RGB model) or cyan, magenta, yellow and black (in the CMYK model). Because there are 256 possible values for each RGB or CMYK component, then RGB true color would have a 24-bit color depth and CMYK true color would have a 32-bit color depth. There are millions of possible colors for each pixel in a true color image. That's why it is called "True Color".

22. RGB images are derived from the 3 primary colors of red, green and blue. In 24-bit RGB color, each red, green and blue component is 8 bits long and has 256 variations in intensity. These variations are represented in a scale of values ranging from 0 to 255 with 0 having the least intensity and 255 having the greatest. When the 3 components are combined there are 256 x 256 x 256 possible combinations or 16,777,216 possible colors. For example, white would be composed of maximum intensity of red, green and blue light (R=255 G=255 B=255) and black would be composed of zero intensity of red, green and blue light (R=0 G=0 B=0). Cyan would be composed of maximum intensity of blue and green light and zero intensity of red light (R=0 B=255 G=255). Magenta would be composed of maximum intensity of red and blue light and zero intensity of green light (R=255 G=0 B=255):

23. True Color and the CMYK Color Model Images using the CMYK color model are also true color. CMYK images are derived from the 3 primary colors of cyan, magenta and yellow plus black. In 32-bit CMYK color, each cyan, magenta, yellow and black component is also 8 bits long and has 256 variations in intensity. Each pixel in a 32-bit CMYK image is one of 256 x 256 x 256 possible colors x 256 variations of black. A mix of 100% each of cyan, magenta and yellow produces black, so the black component is extra. Even though there are more bits per pixel in the CMYK model, in reality it has a smaller color "space" or gamut than RGB. Many graphics programs support both color models.

24. Indexed Color Images which do not define colors in terms of their actual RGB or CMYK values and which derive its colors from a "palette" are known as "Indexed Color". The color palette of an indexed color image has a fixed number of colors. Because the palette is limited to a maximum of 256 colors, it is not possible for an image to look as realistic as it can use RGB or CMYK. Hence, they are not true color. This type of color is known as "Indexed Color" because colors in the palette are referenced by index numbers which are used by the computer to identify each color. Some file formats restrict the number of colors to fewer than 256. The GIF format is one such format and has a color depth of 8 bits per pixel or less. GIF files use indexed color and allow a maximum of 256 colors. TIFF files can be stored as indexed color or true color. A sample palette is shown below:

25. Grayscale Images Grayscale images have a maximum color depth of 8 bits. The reason for this can also be worked out easily. When defining shades of gray in terms of RGB, each of the 3 red, green and blue components must be equal to each other. Examples of grays are R=192 G=192 B=192, and R=128 G=128 B=128. Since all three components must be equal for any shade of gray there are only 256 possible combinations. Thus, grayscale images have a maximum color depth of 8 bits. A complete 256 color grayscale palette is shown in the sample images below.

26. It is possible to create a grayscale image with a 4-bit color depth or less. Some software packages allow the user to reduce the number of colors in the palette from 256 to 16 or 2, though one would hardly classify a 2-color image as grayscale. Browser Safe Color Browser software is your window into the web. You can’t see web pages without the browser, so the browser plays a huge role in how your images are displayed, especially when viewed on 256-color systems. Fortunately, the most popular browsers all share the same palette management process. They work with the system palettes of each respective platform. This means that any artwork you create will be forced into a variety of different palettes, depending on which operating system it is views from. If you work with browser-safe colors when you create artwork, you still have the important task of ensuring that those colors remain browser safe during the file format conversion process. Unfortunately, files that are converted to JPEG do not retain precise color information. The lossy compression method used throws away information. So for graphics with lot of solid color, it is advisable to save in GIF format and retain the color information.