Animated GIF (1)
CLSMSS
S3 Computer Literacy
Bitmap Graphics
This handout and related resources are available at
http://www.clsmss.edu.hk/~computer/
Bitmap Graphic
1. A bitmap image (also called raster image) consists of pattern of small dots, which are called
pixels (picture elements). Pixel is the basic unit composing an image.
2.
In bitmap image, the pixels are arranged in rows and columns, and the size of a bitmap image is
referred as the dimension (or image resolution), which is the width x height.
For example, an image of 400 x 300 has a width of 400 pixels, and height of 300 pixels. The total
number of pixels in the image is 400 x 300 = 120,000.
400
120,000 pixels
in total
300
3.
Each pixel stores a value representing the color of it. The number of bits used to represent
colors or the maximum number of different colors for an image is referred as the color depth of
the image.
For example, for a black and white bitmap image, each pixel uses 1 bit to store either 0 (white) or 1
(black). The color depth is “1 bit” or “2 colors”.
Color Depth
4. The more bits we use to represent one color, the more colors can be represented. For example,
using 8 bits can represent 28 = 256 different colors.
Color Depth
Number of available colors
1 bit
2
8 bits
28 = 256
Need color palette
16 bits
216 = 65,536 (64k colors)
a.k.a. High Color
24 bits
Remark
Mostly black and white images
24
2 = 16,777,216 (16.7 millions colors)
P.1(4)
a.k.a. True Color / Full Color
Animated GIF (1)
CLSMSS
5.
S3 Computer Literacy
Grayscale image refers to an image represented by shades of gray. If eight levels of grayscale are
provided, 3 bits will be needed for coding each pixel (23 = 8). Continuous-tone images, such as
black-and-white photographs, use an almost unlimited number of shades of gray.
Common File Formats
6. Comparison of the file formats for bitmap:
Format
Full Name
BMP
Windows Bitmap
Graphic
Interchange
Format
Joint
Photographic
Experts Group
GIF
JPEG
PNG
Portable Network
Graphics
File
Use on
Color Depth
Compression
.bmp
1, 4, 8, 24 bits
No
No
.gif
256 colors
Yes
Yes
.jpg / .jpeg
24 bits
Yes, with
quality loss
Yes
.png
256 colors /
color: 24, 32, 48 bits /
grayscale: 8 or 16 bits
Yes
Yes
Extensions
Remark
Web?
Support Transparency;
Mostly for drawings
Mostly for photographs.
Support Transparency
MS Photo Editor
7. MS Photo Editor is a simple graphics software to manipulate bitmap images:
8.
The Toolbar:
Zoom: click to zoom in,
shift-click to zoom out
Rotate
Brightness & contrast
Zoom
Set transparent color
Selection
Special brushes:
Right-click to set options
9.
Basic image manipulation tools:
Choose “Pixel” as
the unit.
Crop
Resize
Rotate and Flip
Balance
Auto Balance
Brightness
Contrast
Gamma Correction
P.2(4)
CLSMSS
Animated GIF (1)
S3 Computer Literacy
10. To change the file format, click File  Save as…
11. To change the image type, click File  Attributes…
You can select
different file
formats here.
Quality factor for JPEG images:
(Better quality  Larger file)
Dimension
You can change the
image type here.
12. The MS Photo Editor also provides different effects on images:
P.3(4)
Animated GIF (1)
CLSMSS
S3 Computer Literacy
Exercise
1. Basic manipulation of image:
Download image cat.jpg, and open it with MS Photo Editor.
a)
Zoom in the image to 1600%, what do you see?
Ans: I see ____________ that are the ______________ enlarged.
b) Zoom out to 100%;
Change the image type to be 256 colors. What do you see?
Ans: The image quality becomes ______________ because _________________________
________________________________________________________________________.
c)
Is GIF suitable for photo?
Why?
Ans: ________, because ____________________________________________________
________________________________________________________________________.
d) Click
to undo the last action. Reduce the size of the image to 100 x 75 pixels, and then
enlarge it to 600 x 450 pixels. What do you see?
Ans: The image quality becomes ______________ because data is lost when we
_________________________.
2.
Download the image cat2.gif, open the image in MS Photo Editor.
a)
Save the file as JPEG file, using the file name “cat2.jpg”.
(Choose the JPEG quality factor to be 50.)
b) Close the file. Open the image cat2.jpg. Zoom in and look at the face of the cat.
Is JPEG suitable for images with large areas of solid color?
Ans: ______________________
~ END ~
P.4(4)