MULTIMEDIA TECHNOLOGIES LECTURE 02 IMAGE AND GRAPHICS IMRAN IHSAN ASSISTANT PROFESSOR
THE NATURE OF DIGITAL IMAGES An image is a spatial representation of an object, a two dimensional or three-dimensional scene or another image. Often the images reflect the intensity of lights. Most photographs are called continuous tone images because the method used to develop the photograph creates the illusion of perfect continuous tone throughout the image. Images stored and processed by computers, displayed on computer screens, are called digital images although they often look like continuous tone. This is because they are represented by a matrix of numeric values each represents a quantized intensity values. Basic Concepts The smallest element on a digital image is known as a pixel a picture element. A digital image consists of a (usually rectangular) matrix of pixels. Width Height
DEPTH The depth of an image is the number of bits used to represent each pixel. 1 bit black and white image, also called bitmap image. 4 bit can represent 16 colors, used in low resolution screens (EGA/VGA) 8 bit can have 256 colors. The 256 color images are often known as indexed color images. The values are actually indexes to a table of many more different colors. For example, Color 3 is mapped to (200, 10, 10). 8 bit grey 256 grey levels. The image contains only brightness / intensity data without color information.
DEPTH 16 bit can have 65536 colors, also known as hi color in Windows systems. The 16 bits are divided into 5 bits for RED, 6 bits for GREEN & 5 bits for BLUE. 24 bit 2 24 = 16,777,216 colors, true color. Each byte is used to represent the intensity of a primary color, RED, GREEN and BLUE. Each color can have 256 different levels. 32 bit 2 32 = 4,294,967,296 (4G). Usually, 3 bytes are used to represent the three primary colors and the fourth byte is used as the alpha channel.
DEPTH
RESOLUTION Resolution measures how much detail an image can have. There are several resolutions relating to images. Image resolution is the number of pixels in an image. 320 X 240 = 76800 pixels 700 X 400 = 280000 pixels Display (Monitor) resolution refers to number of dots per inch (dpi) on a monitor. Windows systems usually have 96dpi resolution. Some high resolution video adapters/monitors support 120dpi. For example, a 288 X 216 image displayed on a monitor with 96dpi will be 3 X 2 ¼. Output resolution refers to number of dots per inch (dpi) on a (hard copy) output device. Many printers have 300dpi or 600 dpi resolution. High quality image setters can print at a range between 1200dpi and 2400dpi, or higher. The above image printed on a 300dpi printer will be 0.96 X 0.72 inch.
ACQUIRING DIGITAL IMAGES There are many ways to create or get digital images. We list a some of the most common ways: Make an image from scratch with a paint program. A good program will allow you to choose the depth, resolution and size. Grab an image of a screen. The depth, g p, resolution and size is determined by the screen. Capture an image from a digital camera or a camcorder. The depth, resolution and size is determined by the camera or the camcorder. The popular depth is 24 bit. The commonly used resolution is 320 X 240, 640 X 480 and 800 X 600. Scan a photograph or a print using a scanner. You can select from a range of different depths and resolution. The choice should be determined by the type of original and the final output form. Convert from existing digital media e.g., photocd. The attribute is determined by the original image. Synthesize an image from numerical data.
SYSTEM INDEPENDENT FORMATS GIF(GIF87a,GIF89a): Graphics Interchange Format (GIF) devised by the UNISYS Corp. and CompuServe, initially for transmitting graphical images over phone lines via modems. Uses the Lempel Ziv Welch algorithm (compression). Supports only 8 bit (256) color images. Supports interlacing GIF89a supports simple animation JPEG: A standard for photographic image compression created by the Joint Photographic Experts Group Takes advantage of limitations in the human vision system to achieve high rates of compression Lossy compression which allows user to set the desired level of quality/compression
SYSTEM INDEPENDENT FORMATS TIFF: Developed by the Aldus Corp. in the 1980's and later supported by the Microsoft Tagged Image File Format (TIFF), stores many different types of images (e.g., monochrome, greyscale, 8 bit & 24 bit RGB, etc.) TIFF is a lossless format (when not utilizing the new JPEG tag which allows for JPEG compression) It does not provide any major advantages over JPEG and is not as user controllable. It appears to be declining in popularity Graphics Animation Files: FLC main animation or moving picture file format, originally created by Animation Pro FLI similar to FLC GL better quality moving pictures, usually large file sizes Postscript/ PDF: A typesetting language which includes text as well as vector/structured graphics and bit mapped images Used in several popular graphics programs (Illustrator, FreeHand) Does not provide compression, files are often large
SYSTEM DEPENDENT FORMATS Windows(BMP): A system standard graphics file format for Microsoft Windows Used in PC Paintbrush and other programs It is capable of storing 24 bit bitmap images Macintosh(PAINT, PICT): PAINT was originally used in MacPaint program, initially only for 1 bit monochrome images. PICT format is used in MacDraw (a vector based drawing program) for storing structured graphics X windows(xbm): Primary graphics format for the X Window system Supports 24 bit color bitmap Many public domain graphic editors, e.g., xv Used in X Windows for storing icons, pixmaps, backdrops, etc.
PNG: THE FUTURE OF GIF The Portable Network Graphics (PNG) format was designed to replace the older and simpler GIF format and, to some extent, the much more complex TIFF format. Advantages over GIF: Alpha channels (variable transparency) Also known as a mask channel, it is simply, p y a way to associate variable transparency with an image. Gamma correction (cross platform control of image brightness) Two dimensional interlacing (a method of progressive display) GIF uses 1 D interlacing. Better Compression (5 25% better) Features: Supports three main image types: true color, grayscale and palette based (``8 bit''). JPEG only supports the first two; GIF only the third. Shortcomings: No Animation
BITMAPPED IMAGES A bitmapped image is stored as a sequence of pixels at some particular resolution. Common bitmapped images include: Desktop icons Scanned images Photographs Formats include: JPEG (compressed image) PNG, BMP
INDEXED COLOR Indexed color is a way of compressing an image so it uses less memory. Each pixel in the image is a replaced by an entry (index) to a color palette. If the index is 8 bits, then the palette can store 256 different colors. Each color in the palette is still stored using 24 bits. This reduces overall storage by approximately 66% Lets see an example; Each 24 bit pixel in the original image is replaced by an 8 bit index, specifying the position of the color in the palette. The image memory size has been reduced, but with the limitation of only allowing 256 different colors.
WEB SAFE COLOR PALETTE Indexed color was common on early computers and various manufacturers devised their own standard color palettes. Microsoft devised a palette which mixed 216 normal colors with 40 special codes for certain windowing purposes. This palette was used as the basis of the Web Safe Color Palette This defines 216 colors that will accurately y display on any computer and so can be safely transferred across the World Wide Web.
POSTERIZATION If an image has more than 256 (or 216) colors then there s an obvious problem with converting it to indexed color. It is necessary to find all the pixels which are similar in color and map them to one entry in the color palette. This may cause areas of textured color to be replaced by crude blocks of a single color. This effect is called Posterization (since advertising posters often use this technique deliberately).
DITHERING Dithering is a technique which reduces the visual impact of posterization. Single color areas are sprinkled with darker (or lighter) colored pixels. All the colors used are chosen from the color palette (of course). Often dithering is not noticeable, but sometimes it introduces a grainy effect into the image.
LINE ANTI ALIASING A straight line which is not horizontal or vertical can look jagged due to the rectangular layout of pixels. Anti aliasing is a similar concept to dithering. When enlarged, the anti aliasing is very obvious. However, when viewed at normal size, the grey shading produces the illusion of straight lines.
BITMAP EDITING PROGRAMS There are numerous programs for editing bitmapped graphics: Photo Shop Paint Shop Fireworks These programs usually save files in a number of file formats: BMP Windows bit map GIF Graphics Interchange Format PNG Portable Network Graphic Typical Editing Features Most bitmap editors offer these features: File opening, closing, saving commands. Resizing, cropping commands Selection tools: Rectangle, lasso, magic wand. Brightness, contrast, colour adjustment. Brush and pencil tools. Text tools: Adding text captions. Colour selection tools: Palette selection, draw bars, eye dropper. Filtering tools: Sharpening, blurring.