Digital Image

Bitmapped (raster) image

Collection of pixels (dots) laid out in a big grid
Pixels can be different colors
Scanners, video cameras, digital cameras, painting & image-editing programs (Adobe Photoshop)

Notes

Vector image

Mathematically defined shapes and lines -- using attributes such as radius, center position
Graphic design programs (Adobe Illustrator), Computer Graphics, CAD programs
- Photoshop has basic vector tools (eg. Pen tool), and Illustrator has basic support for raster images.
radius = 1, center = (5,5)

Notes

Vector vs Raster

Vector image:

Raster image:

Notes

Questions

- Why does photography use raster/bitmapped images?

You can easily convert vector images into raster images. Difficult to go the other way (raster image/photograph to a vector image).

Notes

Dimension

Dimension -- number of pixels in width and height.

eg) width: 600 pixels height: 400 pixels
More pixels, more information (600x400 > 60x40)

Lets say you have a 600 pixel x 400 pixel image. What is the size of the image in inches?

Notes

Resolution

Depends on how the dots are spread out.

PPI: pixels per inch (resolution of the image).
Same dimension (4 x 4 pixel image) with different resolution (1 ppi or 4 ppi)

Notes

Dimention + Resolution

Dimensions -- amount of information/data you have (eg. 600 x 400 pixels)

Number of pixels == proportional to file size (KB, MB, GB, TB)
(more pixels you have, larger the file, more information you have).

Resolution -- how the pixels are spread out. (eg. 300 ppi)

It does not tell you how much information you have
It does not describe the quality of the image by itself.
Saying that "an image is 4000 ppi" is like saying "that there are 12 inches in a foot".
It doesn't tell you how long something is.

For the purpose of this class, we are going to use 300 ppi for editing and printing, as our printers expect images at 300 pixels per inch.

Most images on the Internet are pretty small as prints

600 x 400 pixel at 300 ppi ==> 2 x 1.33 inches

600 x 400 pixel at 1 ppi ==> 600 x 400 inches

have the same amount of information.

Notes

Resampling

What happens when the number of pixels you have isn't enough for your target print size?

Photoshop can make up/throw away information

Resampling = changing the number of pixels

Upsampling (enlargement): making up info. You get more pixels. But don't expect miracles.
For example, to upsample 600x400 pixels to 1200x800 pixels, Photoshop does a lot of math to fill in the missing pixels.
Downsampling (reduction): throws away info.

Upsampling 2 pixel image to a 3 pixel image


How about this?

Notes

Image Size in Photoshop

In Photoshop: Image -> Image size -> Resample image button

You are making up pixels (upsampling) or throwing away pixels (downsampling) when you have resample turned on

Exercise:

1. Take a 600 x 400 pixel file and downsample it to 6 x 4 pixel file
2. Then take that 6 x 4 pixel file and upsample it to 600 x 400 pixel using Nearest Neighbor (from pulldown menu that says "Automatic")
3. Repeat (with the unmodified original 600 x 400 pixel file) steps 2 using different algorithms

What happens if you don't have the resampling button on?

Notes

File Formats

Lossless compression, large file size but no loss of quality

TIFF (.tif, .tiff)
Photoshop (.psd)
- When you are actively editing your file, save as a TIFF file or a PSD file.
- Understands Layers
PNG (portable network graphics)
- Mostly used for image on web. Simple with little options.
- Supports transparency
GIF
- Resurgence with animated GIF

Lossy compression, small file size with loss of quality

JPEG/JPG (.jpg, .jpeg)
Do not edit in JPEG. Every time you save in jpg, you lose data. The only time you want to save in JPEG is when you are distributing your files.

Lossless compression (168KB):

Lossy compression (84KB):

Notes