Digital Images
rev 08/15/2014
 Download illustrator and Photoshop Assets and save in JMA501/Images
 Unzip to the same folder
Raster vs Vector files to encode images
Raster graphics: Each pixel uses numeric values to represent color of that pixel.
The values are represented by strings of 1’s and zeroes. Simplest example: two
colors, 1 = purple,0 means yellow. Need a color lookup table (CLUT)
0
1
So 0011 means what?
Most complex: 24 bits/pixel…jpeg, for example, (8 bits each for R,G, and B)
How many ways to arrange 8 bits?
Individual pixels can and will be edited using Photoshop. Selecting the pixels to
edit is difficult task. These graphics may be called raster or bitmapped graphics
Vector graphics (Illustrator) use equations, points, paths to represent shapes.
They do not use pixels. They can be scaled to any level without loss of quality
Examples of Raster file formats: (Generally speaking, first 4 OK for Web)
DIGIAL IMAGES
1
Vector File Formats: (can resize w/o loss of quality)




.ai adobe illustrator
Eps encapsulated post script
fla, swf Flash
Except for flash, vector file formats not usable on Web
Fonts are vectors...that’s why we can resize them
Example: To draw a line we need four values (x1, y1, x2,y2)
Use these to draw a line, draw from (x1,y1) to (x2,y2). To change the length
and orientation, just change the values. Versus raster where we would need to
manipulate the actual pixels,
Example 2 of a vector format
Postscript, a printer language…yes printers have languages
A simple (vector) example: Postscript language. Here is sample code:
%!
newpath
DIGIAL IMAGES
2
200 200 moveto
300 200 lineto
stroke
showpage
It says:
• Draw a new line staring at x=200,y=200
• Draw to location 300,200
• Add a stroke
Re-visit Indexed formats
Each pixel contains color information comprised of numerical values, not actual
colors.
Here is another example. Assume we launched Photoshop and created a new
document that contains a 2-color 8 x 8 pixels square. Then we drew a diagonal
line: Instead of storing actual pixels, save the numbers.
The actual string of bits would be:
1111111111111111111111011111101111110111111011111101111111111111
DIGIAL IMAGES
3
Size. Total of 64 bits ( 1 bit/pixel * 64 pixels) in this example:
Photoshop and cluts
Start Photoshop
 Open Powwow2010.jpg
Let’s change the CLUT:
 Open Adjustments>Color Lookup
 Click the tool (see above)
 Opens the Color Lookup tab.
 Select the first option
DIGIAL IMAGES
4

Choose a new lookup table: (All we’re doing is mapping the index
values to a different clut)he pixel values stayed the same, the table
they map to cnagned
 Experiment with various cluts
OK?
DIGIAL IMAGES
5
Compression
Assume we have a digital camera that creates an image size of 4,000 x 3,000pixels…a 4:3 aspect ratio…W/H, 8 bits each for R,G,B
(Remember that monitor pixels made up of Red, Green and Blue colors)
Total Pixels: 4,000 x 3,000 = 12,000,000 pixels (12 million)
Assume 24 bit/pixel: 8 pixels each for R,G,B...24 bits as the color depth aka
sample size
Therefore, file size in bits: 12,000,000 pixels x 24 bits/pixel = 288,000,000 bits
File size in bytes: 288,000,000 bits /8 bits/byte= 36,000,000 bytes (36MB/picture)
How can we reduce image file size?
1. Lower bit depth from 24-bit. (16,000,000 colors) to say 8 bits/pixel = 256
colors...will lose colors, though
2. Compress
Compression Types
 Lossy and lossless
Note: If you do compress, keep uncompressed version as well as a master.
e.g. You scan in a picture and save as a tiff (tagged Image File Format), and
then you save as jpeg...don’t overwrite the tiff
Let’s look an example of each type of compression.
Lossless Compression
 RLE (Run length encoding)
o Assume in a sky picture there is a section of blue pixels repeated 100
times
o Store blue (00 00 FF) once plus the number 100
DIGIAL IMAGES
6

GIF uses RLE, FAX machines do ( Long stretches of white), JPEG also
uses RLE
JPEG: example of lossy compression
 Start Photoshop and open (File>Open> ducky.tiff from your illustratorPS file
Note Original size about 800 KB…tiff ery clear image. However, we want to
compress but maintain quality
To see size: Image>Image Size
 Let’s save as jpg (joint Photographic Experts Group, pronounced j-peg) ,
which can be compressed…and then see if we observe any artifacts. Two
ways to save as jpg.
Method 1:
 File>Save as jpg. (If asked, make a copy)
 You’ll see jpeg options:
DIGIAL IMAGES
7




Zoom in
Move the slider and see if you notice any artifacts
Where is the best tradeoff—size for quality?
Click Cancel
Note: the quality setting is arbitrary; Photoshop uses a different scale.
Method # 2:
 File>Save> for web...note tradeoff compressed) size for quality…
DIGIAL IMAGES
8
Which option has best size/quality tradeoff?
. Switch the type to gif, and see what happens. Maximize dithering (Using
available colors to make it look like there many more than 256bcolors):
DIGIAL IMAGES
9
Keep reducing the quality until really bad-looking
 Trade off file size and quality
 Which of the four would you choose for the Web?
 Try gif with 100 % dithering: (how many colors with gif?)
DIGIAL IMAGES
10
Switching between vector and raster
Can convert vectors into bitmaps (raster) (why?)
We can also go the other way: raster to vector (Why might we want to do that?).
We’ll do that a lot in the Illustrator session, next class
To rasterize means to convert vector graphics (Illustrator) into pixel-based
bitmapped image, esp. for the web.
Most vector graphics programs let you rasterize vector graphics. In Illustrator
choose File>Save for Web.
To go the other way we could load in the raster image( a photo, a scan,…) as a
tracing template, and use Illustrator tools to trace over the template.
Rasterized images may have jaggies along edges…Antialiasing (smoothing jagged
edges on curved lines and diagonals) will soften the jaggies. See below
Color Modes
Photoshop allows us to switch among:
DIGIAL IMAGES
11
Review: Color Look up Tables for indexed file types
What if an image has more than 256 colors, and we want to convert it to a gif?.
We take the most often used collection of 256.
Once we index the most-often used colors, the result is a compressed image that
enables 8 bits per pixel, such as gif formatted files to look almost as good as 24
bits per pixel images.
Rather than each pixel in the image having all three RGB colors (one 8-bit red, one
8-bit green and one 8-bit blue, for a total of 24 bits/pixel ), we carry one 8-bit
number that indexes (points) into the 256-color lookup table, which contains the
actual RGB values (see illustration below).
DIGIAL IMAGES
12
example
Here is a color palette that has 256 colors…the top 256 from an image
DIGIAL IMAGES
13
Indexed color images can look nearly identical to their 24-bit
originals, because the 256 most frequently used colors are
identified.
The 256-color look up table was created in Photoshop from the
original 24-bit image (left) to generate the image as 8 bits (right).
24-Bit Vs. 8-Bit
Let’s do an example.
DIGIAL IMAGES
14
 Start Photoshop, if necessary
 Download Rocco zip file from the web site. Unzip and save in
InClass/photoshop/Images
 Make pixel-width be 500 pixels wide :





File>Save for Web
You should see 4 versions of the image.
Look at original image and any of the other images
Set type to gif
Look at CLUT to see the color table
DIGIAL IMAGES
15
 Reduce the number of colors to 128…result?

If you change the color of a pixel in the CLUT, every occurrence of that color is
modified. Or, remember we can also change the clut selected from the dropdown
 Make the red pixels be blue
DIGIAL IMAGES
16
END
DIGIAL IMAGES
17