1

2

3

4  The concept of resolution is simple, but it differ according to where it is used

For Example: 1. PAL frame is 768 X NTSC frame is 640 X Device Resolution dpi

The computer monitors resolution are based on the same technology as video 6 Image Resolution  Bitmapped images is an array of pixel values  So it has pixel dimensions (width, height)  It does not has physical dimensions  The physical size of an image when it is displayed will depend on the pixel density of the device it will be displayed on.  The physical size of an image depends on the pixel density (dpi or ppi) of the device it will display it.

The equation to find the physical dimension of an image is: physical dimension = logical pixel dimension Pixel density Example: for an image that has logical dimensions of width =198 and height of 149, and to be displayed on a screen with resolution of 72 dpi, the image size on the screen will be (1inch = 2.54 cm X 10 mm) physical width = 198*2.54*10= 70 mm 72 physical height = 149*2.54*10= 52.5 mm 72 7

8 Example: for an image that has logical dimensions of width =198 and height = 149 Physical dimension will be 70 mm X 52.5 mm

9

10 At the left Two images with the same physical size but with different device resolution At the right the Two images are magnified

Resampling  Reducing the pixel dimensions( scaling down or decreasing the resolution) of an image is called downsampling, and increasing the pixel dimensions is called upsampling. Both operations are called resampling.  Resampling can lead to a loss of visual quality  If resampling is not performed, changing the resolution will change the size and vice versa. 11

With resampling Without resampling

Scaling: changes the pixel dimensions of an image, which means that in the process some pixels must be thrown away, if the image is being scaled down, or inserted, if it is being scaled up. Bitmap images are resolution dependent. Resolution refers to the number of pixels in an image and is usually stated as dpi (dots per inch) or ppi (pixels per inch).Resolutiondpi (dots per inch)ppi (pixels per inch) Because bitmaps are resolution dependent, it's difficult to increase or decrease their size without sacrificing a degree of image quality. When you reduce the size of a bitmap image through your software's resample or resize command, you must throw away pixels. When you increase the size of a bitmap image through your software's resample or resize command, the software has to create new pixels. When creating pixels, the software must estimate the color values of the new pixels based on the surrounding pixels. This process is called interpolation.resample interpolation 11

The basic approach to scaling a bitmapped image is mostly the same one used for scaling vector, but we have to transform every single pixel instead of transforming few of them. 12

14 Scaling Pixels using transformation

15

Interpolation is the calculation of additional, approximate values between known values in a set, typically used in the upsampling of bitmapped images where additional pixels are required. Types of Interpolation:  Nearest neighbour  Bilinear  bicubic 16

Scaling Pixels using transformation Original Image Scaling Pixels using a reverse mapping

16 Nearest neighbor : the pixel that its center is the nearest to X is selected in this case P3 Target pixel animation

17 Bilinear : the selected pixel is calculated (found) by adding each of the four adjacent pixels (p1,…p4) multiplied by their intersection (shaded area) with X

Nearest Neighbor interpolation method uses the value of the nearest pixel for interpolating pixel values for subsequent levels. It does not create new values, is the fastest interpolation method and is best used for nominal or ordinal data Bilinear Interpolation method takes the weighted average of four nearest pixels in the source image to estimate new pixel values for the destination image. BiCubic Interpolation method estimates pixel values in the destination image by an average of 16 pixels surrounding the closest corresponding pixel in the source image and creates a smooth curve fitted to those 16 pixels, thus producing the most visually-pleasing output.

Image Compression    To reduce the size of bitmapped images without downsampling them, we must use techniques of data compression called image coding

19

Well-known Image Compression Techniques  Lossless Techniques 1. Simple techniques A. Run-Length encoding (RLE)  It is a simple technique  It works by replacing a group of consecutive pixels of the same color by a single copy of the color value and a count of the number of pixels in the group  Its effectiveness depends on the image it compress  Is the simplest lossless compression technique to understand 20

Run-Length encoding (RLE) AAAAAHHHHHHHHHHHHHH =19 5A14H = 5 compression ratio /19=73.7% CORRECTLY = 9 1C1O2R1E1C1T1L1Y = 16 compression ratio (9-16)/9 = -78%

There are a number of variants of run-length encoding. Image data is normally run-length encoded in a sequential process that treats the image data as a 1D stream, rather than as a 2D map of data. In sequential processing, a bitmap is encoded starting at the upper left corner and proceeding from left to right across each scan line (the X axis) to the bottom right corner of the bitmap (shown in Figure 9-2, a). But alternative RLE schemes can also be written to encode data down the length of a bitmap (the Y axis) along the columns (shown in Figure 9-2, b), to encode a bitmap into 2D tiles (shown in Figure 9-2, c), or even to encode pixels on a diagonal in a zig- zag fashion (shown in Figure 9-2, d).Figure 9-2 Variants on Run-Length Encoding

Figure 9-2: Run-length encoding variants Back

run-length encoding (RLE ) Let us take the first line of the following picture where B representing a black pixel and W representing white: If we apply the run-length encoding (RLE) data compression algorithm to the above first line of the image, we get the following: 5W2B1W1B4W Original size of line1=13 Compressed size = 10 20

run-length encoding (RLE ) Original size = 13*5=65bytes After compression line1=10 line2= 8 line3= 4 line4= 4 line5=2 28 byte compression ratio (65-28)/65 =64.5% 20

Original size = 7*7=49bits After compression 0(7)=1bit+3bitsfor count=4bits 1(7)=4bits 1(4) +0(3) =8bits 0(7)=4bits 36 bits 20

2- Sophisticated Lossless Techniques  Can be divided into two classes (types) A. The first class work by Re-encoding data to make the most frequent values occupy the fewest bits  It uses variable-length codes  Used since the early days of data compression  The best known technique of this group is called Huffman coding 21

VARIABLE-LENGTH CODES BinaryDec A=31 B=18 C=7 D=4

B. Dictionary-based Compression techniques  It works by creating a table (dictionary) where strings of bytes (not necessary corresponding to characters) are entered it from the data  Then, in the data all occurrences of the string are replaced by a pointer into the string in the dictionary  Use fix-length codes that points to variable- length strings  The effectiveness depends on choosing the strings in the dictionary so that a saving of space is achieved by replacing them by their codes (pointers) (long strings should be used)  The most techniques of this class are: LZ77, LZ78 and LZW 22

File Formats  There are many file formats for bitmapped images according to what information they store:  Compression used  Software used  Colors supported (color width)  Other info  The WWW had some influence on enforcing some standards for image formats related to cross- platform compatibility  The following are some of the most used bitmapped image formats: 23

1- GIF format  Graphics Interchange Format  Originally developed by CompuServe  Intended for exchanging bitmapped images between different platforms  Uses LZW compression (lossless)  Uses a technique called indexed color which results in supporting only 256 colors  Suitable for simple images (not suitable for scanned and photographic images  Is widely used on the WEB (supported by all browsers)  One color is designated for transparency 24

25

2- PNG format  Portable Network Graphics  Developed for lossless storage of images to be used on the WEB  Uses the free copy of LZW (the deflate free method of compression)  Not restricted to 256 colors  Supports alpha channels which allow for partial transparency and special effects on it.  Not popular for web developers  Is the native format for the web graphic editor Fireworks 26

3- JPEG files  Does not specify a file format  Specifies compression and decompression algorithms and “interchange format”  Data in this format can embedded in various types of files such as pdf and Exif files (recorded by many digital cameras)  JPEG file is used to refer to JFIF (JPEG File Interchange Format) which is universally used for storing JPEG data in Web graphics  Are the only lossily compressed bitmapped image files that are supported by every graphical web browser without the use of a plug-in 27

4- Other formats      28

Meta Data 29

30

31

Why we need to manipulate bitmap images?  Image manipulation software is also used to convert an image from one format to another  32

 Layers Layers make it easy to apply effects to parts of an image  33

34

Selection Marquee and lasso Magic wand Bèzier pen Magnetic lasso 35

Selection Tools Types: 1. Selection by drawing around an area (the one to be selected)  Examples: i. marquee tools (rectangle or ellipse) ii. Lasso tools iii. Bèzier pen 2. Selection according to pixel values (colors) or edges  Examples: i. magic wand ii. Magnetic lasso 36

37

38

Image manipulation programs allow us to store one or more masks with an image. Masks   a mask 39

 So for a pixel with value p The new value Þ= f (p), where f is called the mapping function  Such function perform pixel point processing  The most sophisticated pixel point processing is concerned with color correction and alterations. Pixel Point Processing   40

Brightness adjusts the value of each pixel up or down.  Increasing the brightness: makes every pixel lighter  decreasing the brightness: makes every pixel darker Increasing brightness original image decreasing the brightness 41

Contrast adjusts the range of values either enhancing or reducing the difference between the lightest and darkest areas of the image  Increasing the contrast: makes the light areas very light and the dark areas very dark  decreasing the contrast: moves all values towards and intermediate grey Increasing contrast original image decreasing contrast 42

Original image 43

44

45