http://www.jz-media.

com

MPT 1203: TECNOLOGY & MEDIA DESIGN

GRAPHICS QUALITY

GRAPHIC QUALITY: an overview

Many factors affect image quality. Two factors that determine graphics quality are resolution and color depth.
Resolution is the number of pixels per inch. inch Color depth refers to the number of distinct colors an image can contain. Image quality also dependent upon the equipment on which they are produced (scanner, camera) or displayed (monitor, graphics card)
Faculty of Education, UTM

Department of Educational Multimedia Faculty of Education, UTM

MPT 1203: TECNOLOGY & MEDIA DESIGN

GRAPHICS QUALITY: RESOLUTION

GRAPHIC QUALITY: resolution>overview

Computer resolution: is the number of pixels contained on a display monitor, expressed in terms of the number of pixels on the horizontal axis and the number on the vertical axis. Image Resolution: defined as the number of pixels contained in a digital image. Image resolution also refers to the amount of information stored for each image.

Department of Educational Multimedia Faculty of Education, UTM

Faculty of Education, UTM

GRAPHIC QUALITY: resolution>overview

Resolution usually written as a product of the image dimensions. Some common image resolutions; 320 x 200, 640 x 480, 1024 x 768 pixels. Resolution also can be refers to total dot (dot per inch: dpi or pixel per inch; ppi) in every single inch on that image. Example, one image can have resolution 72dpi, 100dpi, 1200dpi or more.

GRAPHIC QUALITY: resolution>quality ?

Has a direct effect on the amount of detail that a digital image captures. The higher the resolution, the more pixels in the image. More pixels, the sharper the images look.

Faculty of Education, UTM

Faculty of Education, UTM

http://www.jz-media.com

GRAPHIC QUALITY: resolution>quality ?

The higher the resolution, the more detail the image can be displayed with. The higher the resolution, the greater the demands for both storage and processing. High Resolution > High Quality image > More Memory storage space

GRAPHIC QUALITY: resolution>quality?

Monitors only have about 72 screen pixels per inch so any resolution above 72 wont look any sharper. Most web graphics have a resolution of 72 pixels per inch.

72 ppi
Faculty of Education, UTM

150 ppi
Faculty of Education, UTM

GRAPHIC QUALITY: resolution>quality?

The resolution of an image tells you how small and densely packed the pixels are. It tells you how many pixels you have per inch.

GRAPHIC QUALITY: resolution>quality ?

72 dpi suitable for online presentation However, for print outcomes it is imperative that images are produced at very high dpi. 150 to 300 dpi resolution normaly used for printing purpose.

36 ppi 18 ppi 72 ppi

Faculty of Education, UTM Faculty of Education, UTM

MPT 1203: TECNOLOGY & MEDIA DESIGN

GRAPHIC QUALITY: resolution>image size ?

Image Size and Resolution Using too low a resolution for a printed image results in pixelation (output with large, coarse-looking pixels) Using too high a resolution (pixels smaller than the output device can produce) increases the file size and slows the printing of the image. The higher the image resolution the greater the file size Do not lower the resolution and later increase the resolution
Faculty of Education, UTM

GRAPHICS QUALITY: COLOR DEPTH

Department of Educational Multimedia Faculty of Education, UTM

http://www.jz-media.com

GRAPHIC QUALITY: an overview

Each pixel can be in a specific colour and each pixel consists of two or more colours. The colour value for each pixels must be stored. The range of these colours is known as the colour depth or bit depth or Colour Resolution. The color depth determined How much data in bits used to determined the number of colours in an image file. Colour depth is measured in bits per pixel Remember: a bit (binary digit) is either 1 or 0 and that there are 8-bits in a byte

GRAPHIC QUALITY: color depth>bit depth

The greater the color depth, the more colors may be stored, and this also determines how many different colors the image or device may simultaneously contain/display. For example
1 bit 8 bit 16 bit 24 bit 32 bit 21 28 216 224 232 2 colors 256 colors 65,536 colors 16.7 million colors Millions plus extra information

The more colors per pixel, the larger the file size

Faculty of Education, UTM

Faculty of Education, UTM

GRAPHIC QUALITY: color depth>example

GRAPHIC QUALITY: color depth>dithering

When an image with millions of colors is converted to an image with only 256 colors, some colors have to be removed from the image. This process known as dithering. Dithering is the process of positioning different colored pixels side by side to create the illusion of some missing colors.

8 bit Image

4 bit Image
Faculty of Education, UTM Faculty of Education, UTM

GRAPHIC QUALITY: color depth>dithering

SUMMARY
Bit resolution or color resolution
1 bit (2 color) 2 bit (4 colors) 4 bit (16 colors) 8 bit (256 colors) 16 bit (65,536 colors) 24 bit (16.7 million)

Good Excellent Photo-realistic

Device resolution or output resolution (dpi)

Refers to dpi of output device, a typical monitor is 72 dpi

Screen resolution (screen frequency) Image resolution

Faculty of Education, UTM

18 Faculty of Education, UTM

http://www.jz-media.com

MPT 1203: TECNOLOGY & MEDIA DESIGN

GRAPHICS QUALITY: FILE SIZE

GRAPHIC QUALITY: file size

Image file size is determined by the number of pixels, the color depth of each pixel and any compression used in the file format. The higher the image resolution the greater the file size. The higher color depth, the greater the file size.

Department of Educational Multimedia Faculty of Education, UTM

Faculty of Education, UTM

GRAPHIC QUALITY: file size

Determining the Size of bitmap Images Number of pixels is related to the size of image file. File size for bitmap image can determine using this formula: Image size (in pixel unit) x color depth (in bit unit) 8

GRAPHIC QUALITY: file size

Note: 1 byte = 8 bit. The size is usually in bytes so that is why we have to convert the colour depth to byte by dividing it with 8. Example: A standard computer VGA display is 640 X 480 pixels for a total of 307,200 pixels. Image size (in pixel) Color Depth File size = - 640 x 480 - 8 bit (640 x 480) x 8 / 8 = 307 200 bytes
Faculty of Education, UTM

Faculty of Education, UTM

GRAPHIC QUALITY: summary

File size vs Resolution vs Colour depth ?
The more colors used, the more bytes are required to encode the image, and the more bytes required for an g , the larger g the f file to store the image. g image, The higher the image resolution the greater the file size.

Dr. Jamalludin Harun Department of Educational Multimedia Faculty of Education, UTM

Faculty of Education, UTM jharun@utm.my