➢ Graphics: Two-dimensional figure ➢ There are two categories of graphics :  – Vector  – Bitmap/raster

1. CHAPTER – 4
Graphics
Amir Ibrahim
Nov-2021

2. ●
What is graphics?
●
Graphics Categories
●
Graphics Software
●
Image file formats
●
Compression
●
Lossy vs. Lossless
Topics

3. ➢
Graphics : Two dimensional figure
➢
There are two categories of graphics :

– Vector

– Bitmap/raster
Graphics Categories

4. Graphics Categories

5. Graphics Categories

6.  Bitmaps are made up from individual pixels.
 Each pixel is an addressable unit which allows subtle changes to be made
to the image.
 Bitmaps can be compressed to reduce the file size, although this may result
in a loss of detail.
 Each pixel represents a color.
 Pixelation occurs when the image is enlarged.
 Bitmaps take a lot of storage space as the information needs to be stored
for every pixel.
 Large bitmap images can take a long time to open and load
 The more pixels, the better the resolution and the quality of the image.
Bitmap

7. Three factors:
➢
Image Size
➢
Color Depth
➢
Resolution
Bitmap Image Quality

8. ➢
Image size refers to the height and width of the image, measured in
inches, centimeters, pixels, or any other unit of measure.
➢
If the image size is measured in dots or pixels, then you know exactly
how much image data exists .
➢
A 300 pixel by 500 pixel image contains 15,000 pixels no matter how
many pixels you designate per inch.
1. Image Size

9. ➢
Color Depth or Bit Depth refers to the number of bits used to describe the
color of a single pixel.
➢
It determines the number of colors that can be displayed at one time.
2. Color Depth

10. 2. Color Depth

11. ➢
The resolution of the image refers to the number of pixel in the image.
➢
It also refers to the sharpness and clarity of an image.
➢
You can think of a bitmapped image as a piece of graph paper, of any size,
that has had each square filled in by a color.
➢
The squares are called dots or pixels.
➢
Measured in ppi (pixels per inch) or dpi (dots per inch).
3. Resolution

13. Graphics Software

14. Image file formats

15. ➢
Images can be large files
➢ More disk use
➢ Slower downloads
➢
Compression – ways to cut size of file
➢
Can be Lossy or Lossless
Compression

16. Lossless
 No information is lost
 Find other ways to make file smaller
 Ex: look for recurring pattern in picture and replace each
occurrence with a short abbreviation
Lossy
 Accept some degradation of image
 Example loss: Store color info at lower resolution since eye not
so sensitive to changes in color
Lossy vs. Lossless

17. TIFF
(Tagged Image File Format)
 Usually no compression
 Very large files
 Cannot put directly on website
 May come from high quality camera
Lossy vs. Lossless

18. RAW
 Lossless
 3-4x smaller than TIFF
 Different according to manufacturers of device generating image
 Cannot put directly on website
Lossy vs. Lossless

19. BMP
(Bitmap)
 Uncompressed
 Proprietary format invented by Microsoft
 Cannot put directly on website
 Possibly coming from Microsoft Paint
Lossy vs. Lossless

20. PSD, PSP
(Photoshop document, paintshop pro)
 Cannot put directly on website
Lossy vs. Lossless

21. PNG
(Portable Network Graphics)
 Lossless image format
 Looks for patterns to compress file size
 Compression is exactly reversible (no loss)
 Allows transparency and partial transparency
 CAN put on website
Lossy vs. Lossless

22. GIF
(Graphics Interchange Format)
 Lossy
 Creates table of 256 colors
 If image has fewer, can render exactly
 If more, GIF limits down to 256 colors
 If image is true color, GIF may lose 99.998% of colors
 Allows transparency
 Allows animation
 CAN put on website
Lossy vs. Lossless

23. JPG/JPEG
(Joint Photographic Experts Group)
 Lossy
 Optimized for photos
 Very good compression while maintaining high image quality
 Degree of compression is adjustable
 Use on web for photos
 Do not use for line art or images with large areas of a single color
with sharp edges
 CAN put on website
Lossy vs. Lossless

24. End of chapter - 4
Nov - 2021