01 Digital Image
Introduction
Using a wrong graphic format type
● Rejected by a printer
● Incompatible with a computer
● Result in slower download times
● Reproduce over the Internet or on print
with unpredictable or awful results.
2 Digital Image
Introduction
3 Digital Image
Bitmap Images
Raster images
Rectangular array of pixels
Bitmap at different zoom levels
4 Digital Image
Image Size and Resolution
Size or Resolution
In pixels: nº columns x nº
rows (640x480)
Printing Size
In units (centimeters or
inches)
Printing Resolution
In dots per inch (dpi) Same image at 72 dpi and
Dividing both sizes 300 dpi; viewed with zoom
at 200%
5 Digital Image
Screen Resolution
Measured in pixels as for images
Image of 620 x 400
pixels displayed on
screens of different
size and resolution
6 Digital Image
Printer Resolution
Measured in dots per inch (dpi)
More dpi = better quality (from 720 to 2.880 dpi)
For printed works, we must set the right
resolution and size of the image
Printing size determined by the layout of the
document
Resolution determined by the characteristics of the
printer
7 Digital Image
Questions
True or false?
• A digital image has not physical size until it is
displayed or printed.
• The screen resolution is the number of pixels in each
dimension that can be displayed.
• Dots per inch is a measure of spatial printing.
• If I use a projector set to 1024x768 the resolution of
my slides depends on the size of the screen.
8 Digital Image
Color
What is color?
Color is the perceptual property corresponding to electro-
magnetic radiation in visual human range (400-700 nm).
9 Digital Image
Color
Primary Colors
Additive: light colors (red, green and blue)
R. Red G. Green B. Blue
10 Digital Image
Color
Primary Colors
Subtractive: pigments (cyan, magenta, yellow and
black)
C. Cyan M. Magenta Y. Yellow K. Black
11 Digital Image
Color Models and Color Spaces
Color Models
Each model represents a different method
of describing colors (RGB, CMYK or HSB)
Color Spaces
It is a variant of a color model that has a specific
range of colors
Each device (either a monitor or printer) has its own
color space
12 Digital Image
RGB Color Model
Each pixel has 3 channels (red, green, blue)
24 bits per pixel (32 with alpha channel)
In 8-bit images the intensity of each color ranges
from 0 to 255
With 24 bits we can represent up to 16.7 million
different colors
Is the color model used on monitors Best choice
for on-line applications (animation, web design)
13 Digital Image
RGB Color Model
14 Digital Image
CMYK Color Model
Each pixel has 4 channels (cyan, magenta,
yellow and black) 32 bits per pixel
K component is used to get pure black
Is the color model used on printers Best choice
for printed applications (advertising, corporate
visual image)
Converting an RGB image to CMYK creates a color
separation for printing (calibration problem)
15 Digital Image
CMYK Color Model
16 Digital Image
HSB Color Model
HSB color model is based on
human perception of color
Hue. Color reflected or
transmitted through an object
Saturation. Strength or purity
of a color (chromatism)
Brightness. Relative darkness H. Hue S. Saturation
of a color (Luminosity) B. Brightness
Best choice for color selection
17 Digital Image
Color Pickers
18 Digital Image
Grayscale Model
Image is represented
using shades of gray
8 bits per pixel
With 8 bits we can store
up to 256 shades (0:
black, 255 white)
Conversion from color
images: Desaturate
19 Digital Image
Bitmaps
Monochromatic image
It stores a bit (0 or 1) for each pixel
The resulting image is black and white
1 1 1 1 1 0 0 0
1 1 1 1 1 1 0 0
1 1 1 1 1 1 1 0
1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1
20 Digital Image
Indexed Color Model
It uses a color palette
Index Red Green Blue Color
0 0 0 0 Black
1 1 1 1 White
2 1 0 0 Red
Image
Color palette
Nº of colors: bits per pixel (8 bits = 256 colors)
It can reduce file size keeping visual quality
Best choice for illustrations
21 Digital Image
Bit Depth
Bits/pixel Colors Comments
1 2 Bitmap Mode
Grayscale or Indexed Color
8 256
Modes
16 65.536 High Color Mode (obsolete)
24 16.777.216 True Color Mode (RGB)
32 [Link] CMYK and RGBA Modes
22 Digital Image
Question
Computing a photo file size
We take a photo using a camera with 2048x3072 pixel
resolution (6MP). How much is the file size using RGB
model with a 24-bit depth?
(2048x3072x24/8) = 18874368 Bytes
18874368/(1024x1024) = 18 MB
23 Digital Image
High Dynamic Range Images (HDR)
Images with 32 bits per channel
They store the whole visible range
A. Image with shadow
detail, but cropped
illuminations.
B. Image with illumination
detail, but cropped
shadows.
C. HDR Image that stores
the whole dynamic range
of the scene
24 Digital Image
Color Mode Conversion
Selecting a new color mode for an image
changes permanently the original colors in the
image
Converting from RGB to CMYK: RGB color values out
of the CMYK gamut are adjusted
Out of gamut alert in Color Pickers
Out of gamut
25 Digital Image
Color Tables
Ink Colors:
Pantone Matching
System®, Trumatch®,
Focoltone®, Toyo …
The Kuler™ panel:
Color themes created
by online designers
26 Digital Image
Question
True or false?
• Pixels store indices when using an indexed color
mode.
• The storage cost of an image of size 512x512 in RGB
mode is 512*512*3 bytes.
• The RGB mode adds transparency to colors.
• In RGB mode, grays are represented using the same
value in the three components.
27 Digital Image
Working with Images
Image Acquisition / Generation
Manipulation
Color and Tone Adjustment Computer Tools:
Cropping and Transformations • Adobe Photoshop
Photo Retouching • The Gimp
Filters
Image storage
File Formats
28 Digital Image
Image Acquisition / Generation
Image Acquisition using
digital cameras
Printed images scanning
Image Generation
Drawing software
(Illustrator, Corel Draw)
Image synthesis software
(3D Studio, Maya, Blender)
29 Digital Image
Graphic File Formats
Differences between graphic files are:
How they store the graphic information (as pixels or
line drawings)
How they compress data
Additional information stored (layers, effects,
masks, etc. )
Most of them are limited to 2 GB maximum
storage (exceptions are PSB, RAW and TIFF)
30 Digital Image
TIFF Format
TIFF or TIF (Tagged-Image File Format)
Maximum file size: 4 GB
It supports CMYK, RGB, Indexed Color and Grayscale
modes with alpha channels and Bitmap mode
without alpha channels
It stores 8, 16 or 32 bits per channel (HDR images)
Photoshop can store layers in TIFF files
It supports lossless compression methods
Most used for printing applications
31 Digital Image
JPEG Format
JPEG (Joint Photographic Experts Group)
Most used for continuous-tone images (as photos)
in HTML documents for the web
It supports CMYK, RGB and Grayscale modes
without alpha channels (don’t allow transparency)
It supports a lossy compression method that can be
tuned for Image Quality vs. File Size
Use it for photographic-like pictures in online
applications Image optimization
32 Digital Image
JPEG Format
445 KB, 100% quality
24 KB, 25% quality
33 Digital Image
GIF Format
GIF (Graphics Interchange Format)
Most used for indexed color images (as drawings) in
HTML documents for the web
It only supports Indexed Color mode (up to 256
colors)
It supports LZW lossless compression (designed for
fast Internet downloading)
It supports transparency (without alpha channels)
Use it for illustrations and drawings in online
applications Image optimization
34 Digital Image
GIF Format
One is a GIF and
the other is JPEG
GIF: 335KB
JPEG: 725KB
35 Digital Image
PNG Format
PNG (Portable Network Graphics)
Most used for lossless compression of images and
for online applications (Internet)
It supports RGB, Indexed Color, Grayscale and
Bitmap modes
It supports alpha channels in Grayscale and RGB
modes: True transparency
Use it as an alternative to GIF (PNG-8) and JPEG
(PNG-24) File Formats Image optimization
36 Digital Image
Indexed Color vs. True Color
JPEG, PNG-24
GIF, PNG-8
37 Digital Image
Indexed Color vs. True Color
JPEG, PNG-24
GIF, PNG-8
38 Digital Image
Summary
● Print graphics: TIFF
● Web graphics: JPEG, PNG or GIF
● Clip art: GIF
● Logos: TIFF, PNG or GIF
39 Digital Image
