Overview of digital images (raster, pixels), resolution, bit-depth, RGB sliders, etc.

1. S
CSC 103
Pixels, RGB Color,
Digital Images
Pixels: The Building Blocks of Digital Images

2. A Pixel
 Pixel is short for Picture Element
 Each pixel displays 1 color
 The color of one pixel
can be any one of
16.7 million colors

3. Examples of Pixels
in a raster/bitmap image

4. Examples of Pixels
in an image
A pixel’s
Bit depth
determines its
range, or amount
of possible colors

5. Bit Depth of A Pixel
Bit depth of pixels can vary…
 Can be 1-bit bitmap
(only black or white pixels)
 Can be 8-bit grayscale
(256 shades of gray)
 Can be 24-bit RGB Color
(millions of colors)

6. 1 Bit Image (Bitmap)
 Only Black or white pixels
No Gray Pixels
 Very high-resolution
is required for good quality
 Used when scanning
text, forms or
line drawings
0
0
1
1

7. 8-Bit Image- Grayscale
 28 = 256 Choices of grey
 Shades of Gray range
from 0-255
 Black (0) to White (255)
or 1111 1111 (white)
0000 0000 (black) in Binary
0
255

8. 24-Bit Full Color- RGB
 Composed of combinations
of Red, Green, Blue light
 3 8-bit channels
of 28 = 256
 2563 = 16.7 million color choices
 Red (0-255)
Green (0-255)
Blue (0-255)

9. 24-Bit – RGB Color Slider
Read as 0, 0, 0

10. 24-Bit – RGB Color Slider
Read as 163, 96, 54

11. RGB Color Slider - Pixlr

12. HSB Color Slider - Pixlr
Easier to edit colors and
create colors using
Hue, Saturation,
Lightness (or Brightness)

13. Additive vs. Subtractive Color
 RGB color is “additive” color
Add all 3 colors together – get white.
Subtract to black
 Inks or Paint is “subtractive” color
Subtract CMY colors to get white
(paper or canvas)
Mix all 3 colors to get black/brown

14. Image Size & Resolution
 Higher Resolution means smaller pixels
and more detail that is captured
 Higher Resolution means images can be
enlarged (or zoomed in) without losing
detail – more pixels per inch
 Low Resolution means larger pixels, less
detail and more blurring and “bitmapping”
especially when enlarged

15. Image Size & Resolution
 High Resolution (print)
more pixels per inch – 300 ppi
 Low Resolution (web and screen)
less pixels per inch – 72 ppi

16. Megapixels?
 Megapixels – measures total pixels
captured in millions (digital cameras)
 12 megapixel image would include
12 million pixels (4000 x 3000 px)
 Resolution is 72ppi by default, but
can be increased by adjusting size.

17. File Formats of Pixel Images
 BMP, TIF format used for 1-bit black & white images.
(1-bit images are not used very much anymore)
 TIF format used for 8-bit grayscale images. (Print)
 JPG, PNG, TIF format used for 24-bit color images.
 GIF, PNG format used for 8-bit color images.
Used to reduce colors (logos, clip art), for smaller file size
and provide transparency options and even animation (GIF)

18. 8-Bit – Color Formats
 GIF format and PNG
format supports 8-bit
color (256 total colors)
and transparency
 And even animation!

19. Terms to Know
 Pixel, bit-depth, 1-bit (bitmap),
8-bit (grayscale), 24-bit (RGB color)
 Bitmap (b & w), Grayscale (256 grays)
RGB (16.7 million colors)
 Additive/Subtractive Color,
Hue, Saturation, Lightness/Brightness
Image Size, Megapixels
Resolution, PPI – Pixels per inch
Low 72, High 300