Image Basics

oit
UMass Ofce of Information Technologies
Basics of Digital Images

PART ONE: AN OVERVIEW
Why Use Images? Bitmaps and Vectors
Bitmap Resolution
Color Depth
How to Get Images
Fair Use for Teaching & Research
Start with a Large Scan, then Format Images for Different Uses
How to Format Images for the Web
How to Format Images for PowerPoint
12
How to Format Images for Printing
14
APPENDIX
Finding Images Online
15
OIT Academic Computing

Instructional Media Lab
instruct@oit.umass.edu
(413) 545-2823
http://www.oit.umass.edu/academic/
July, 2007
page 2
Why use Images?
To show information that is visual and cant be easily

communicated except as an image, for instance, maps, charts or
diagrams.
To clarify interpretation of information by applying color

schemes or other visuals that help make meaning more obvious.
To create an evident context for information by using images

that your audience can associate with your tone or message.
Avoid using images that are unrelated to your content!

Decoration may be distracting and even confusing.
Bitmaps and Vectors

Bitmap images
In a bitmap or raster image, visual data is mapped as spots of color, or
pixels. When enlarged on a computer screen, a bitmap image looks like
a quilt or mosaic. The more pixels in a bitmap image, the ner the detail
will be.
Enlarged bitmap image
Because photographs have high levels of detail and a variety of tones

and colors, they are best represented as bitmap images. Scanners and
digital cameras produce bitmap images, and Photoshop is a bitmap
program.
Bitmap formats include: PSD, TIFF, JPEG, PNG, GIF, PICT, BMP
Vector graphics
Vector or object oriented graphics use mathematical formulas to
describe outlines and lls for image objects. Vector graphics can be
enlarged or reduced with no loss of data and no change in image quality.
Enlarged vector graphic
CorelDraw, Illustrator, Freehand, AutoCAD & Flash create vector

graphics. Vector graphics are the best choice for creating line drawings,
logos, and typographyimages that do not have complicated patterns
or a large range of continuous tones.
Vector le formats include: EPS, AI, SVG, DXF, DWG
Note: PowerPoint presentations, Web pages and most word processing
applications primarily use bitmap images. If the original image is
a vector le you may be able to save it in a bitmap format from its
original application. Some bitmap applications will rasterize a vector
graphic on import.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
http://www.oit.umass.edu/academic
page 3
Bitmap Resolution
A bitmap image is like a mosaic crossed with
paint-by-numbers
Each block in the mosaic grid, or pixel, is a single color

The more pixels in the image, the more detail it will have
The color for each pixel is digitally encoded as values for RGB
(red, green and blue the three primary colors for mixing
light). These numbers are on a scale of 0 (none) to 255 (all).
For instance,
White = 255, 255, 255
Black = 0, 0, 0
Bright green = 0, 255, 0
Beige = 255, 204,153
Note: You dont need to memorize the color numbers! Your software
will take care of that. Still, it is useful to understand that there are
a limited number of spots of color and a limited number of colors
available for each bitmap image.
Resolution - how many pixels per inch (ppi) ?

The more pixels wide and high, the more detail the image can show.
More pixels per inch =

more detail, bigger les
Fewer pixels per inch =

less detail, smaller les
Resizing bitmaps
Scaling down works well
200 pixels wide
Scaling down a bitmap image usually gives satisfactory results.
Scaling up a bitmap results in a blurry, poor quality image.
50 pixels wide
Scaling up gives poor results
50 pixels wide
72 ppi is ne for the Web

Printed documents can require 150-1200 ppi depending on the
kind of printer and the quality of image desired.
200 pixels wide
page 4
Color Depth
Color depth how many possible colors
The number of colors in an image affect how subtle (photographic) it
is, and also affects the size of the le.
More Colors (16 million)

subtle details, larger le
Fewer Colors (24)

coarse texture, smaller le
TIP: Use the right number of colors
Color photos require millions of colors

(24 bit - millions of colors)
Black and white photos only need 256 shades of gray

(8 bit - 256 colors), called grayscale
Line art (cartoons or logos) may need only a few colors

(Indexed color - 2 to 256 colors, this example has 16 colors)
page 5
How to Get Images

Scan original artwork or slides on a scanner
All scanners have slightly different software, but generally, you want to
follow these steps:
1. Open the scanner software. Place the original face down on the
glass, or put the lm in a lm holder and insert in scanner.
2. Open the scanner software and use the Preview option.
A preview image will appear (sometimes this happens
automatically on the rst scan).
3. Select the area of the image you want to scan.
4. Select the resolution and color settings you want.
5. Select Scan (sometimes Final).
6. Save the scan as a TIFF or PSD le.
Take pictures with a digital camera

Digital camera resolutions range from 1200 x 1600 pixels to 3648 x
2736 or more; a consumer grade 3 Mega Pixel digital camera is more
than sufcient for use on the Web, in PowerPoint, or for small prints.
For Web pages you should expect to down-size pixel dimensions.
Download images from the Web using your browser

1. Windows: right-click the image.
Macintosh: hold down the mouse button over the image.
2. Select Save Image As... (Netscape) or Save Picture As... (Internet
Explorer).
3. When the Save Picture or Save Image dialog box appears,
select a location to store the image le and click Save.
Dont forget to consider copyright law! (see next page...)
Online Image Resources

Googles Advanced Image
Search is a great resource
(images.google.com)
A growing number of image collections are available online. These

include:
UMass library subsrciptions to image databases
Museum and library archives
Mainstream news media
Commercial & microstock stock photography and clip art
User generated image content including searchable photo
sites such as Flickr.
A Creative Commons image search

gives only results for images that carry
a creative commons license.
(www.creativecommons.org)
For a list of online resources see appendix, Finding Images Online.
page 6
Fair Use for Teaching & Research

Fair use allows limited reproduction of
copyrighted works for educational and research
purposes.
The fair use of a copyrighted work, including reproduction for
purposes such as criticism, news reporting, teaching (including
multiple copies for classroom use), scholarship, or research is not
an infringement of copyright.
Four Factors for Determining Fair Use
To illustrate our point...

We blurred-out this well known cartoon
character for our handout. While a one-time
use in the classroom for instructional purposes
may qualify under Fair Use rules, it would
not be legal to include the image (even with
our instructional scribble commentary) in the
version of the handout that we publish on our
Web site.
This information is adapted from the

copyright and fair use rules of Stanford
University, the University of Rochester,
and the U.S. Copyright Ofce.
1. Purpose
The purpose and character of the use, including whether
such use is of commercial nature or is for nonprot
educational purposes:
The use of copyrighted works for nonprot, teaching, research,
criticism, or commentary tend to favor fair use while the use of
copyrighted works for commercial means requires permission
from the copyright holder.
2. Nature
The nature of the copyrighted work:
The use of copyrighted works that are factual tend to favor
fair use while works that are creative works or consumable
materials (e.g. workbooks, answer sheets) require permission
from the copyright holder.
3. Portion
The size and substantiality of the portion used in relation to
the copyrighted work as a whole:
The use of a small amount of the entire copyrighted work tends
to favor fair use. Examples include one chapter of a book or
the lesser of either 10% or 30 seconds of audio. The use of
more than a small amount of the work or the use of the heart
of the work requires permission from the copyright holder.
Examples include an entire poem, essay, journal article, or
song.
4. Effect
The effect of the use upon the potential market for or value
of the copyrighted work:
Reproduction that makes it unnecessary for students to
purchase an original work that is available weighs heavily
against fair use. If there is no person or entity that can give
permission or provide copies of a particular published work, it
is more likely to fall under fair use.|
The number of copies produced and available:
If the number of copies produced from the original copyrighted
work is low then it tends to fall under fair use. Using the same
materials from semester to semester is not considered fair use.
Note: Posting materials on a Web site is not fair use unless
access to the site is limited to registered students.
page 7
Start with a Large File then Format

for Different Uses
Megapixels & Pixel Dimensions:

Some typical digital camera resolutions
and le sizes
3.1 MP (2048 x 1536 pixels)
JPG HQ 1.0 MB
TIFF 18.9 MB
5 MP (2580 x 2048 pixels)

JPG HQ 1.5 MB
TIFF 31.7 MB
6 MP (3000 x 2000 pixels)

JPG HQ 1.6 MB
TIFF 36 MB
Begin, if possible, with a high quality scan or digital camera image,

then resize the image and save a copy for each different use. For
instance, save different copies for the Web, for a PowerPoint slideshow,
or to print. (See the exercises in this handout for step-by-step
instructions.)
Typical Settings for a good scan

Resolution:
300 ppi
Color depth:
24 bit (also called millions or RGB)
Dimensions:
8 x 10 inches (3000 x 2400 pixels)
File Formats: Best PSD (Photoshop) or TIFF

Good PCT, BMP
OK JPEG*
(Approximate le size: 20 MB)
10 MP (3648 x 2736 pixels)

JPG HQ 2.2 MB
TIFF 59.9 MB
source:
http://www.forret.com/tools/megapixel_chart.asp
* Most digital cameras save JPEG les.

Keep a copy of the original camera le for
your archive. Each time a le is re-saved
using JPEG compression, the image quality
suffers: you do not want to recompress a
JPG le. Save working copies as TIFF or
PSD les.
Settings for an Archival Scan

If you want to create a really versatile scan le, and storage space is
not an issue, use these archival settings. (Most useful if you plan to
reproduce the image as a large or very high quality print.)
Resolution:
300 ppi
Color depth:
24 bit color
Dimensions:
11 x 17 inches (5100 x 3300 pixels)
File Format:
TIFF
(Approximate le size: 48 MB)

Original scan or camera image
page 8
How to Format Images for the Web

Overview of the process for Web images
1. Open the image in Photoshop or another image editing
application.
Smaller size for Web page
2. Resample the image based on pixels.

(See dimension suggestions below. Step-by-step details are in
the Appendix.)
3. Dont overwrite your original scan! Use File > Save as... to
rename your le and save a copy in a Web friendly le format:
- JPG le format for photos.
- GIF le format for line art and for solid colored graphics.
Pixel dimension guidelines

The typical browser window shows only 760 x 420 pixels. Do not ll
the entire browser window with image data it will take way too long
to appear on the screen! Adapt these guidelines to your purposes to get
reasonably sized images:
Dimension Guidelines for Web Graphics
Masthead graphic at top of page: not more than 80 x 750 pixels
Button:
Thumbnail Link:
not more than 10 x 30 pixels

about 60 x 60 pixels
Illustration:
Enlargement:
File types: GIF for line art, JPEG for photos

Save graphics as GIFs
File type changes both download time and image quality. If you choose
the right le type, its a win-win situation; your image will look better
and it will have a smaller le size and will therefore download faster.
Use GIF for graphics with solid colors
The kind of graphics that reproduce well on the Web as GIFs are
Logos
Graphics of text (fancy text made in Photoshop)
Maps and charts
Cartoons
Save photos as JPEGs
Use JPEG (JPG) for photos or continuous tone images

The kind of graphics that reproduce best on the Web as JPGs are
Photographs
Graphics with a signicant amount of shading, gradients, or
continuous tones
page 9
How to format images for the Web, continued...
Choosing the right le type improves

download time
Saving the logo below as a GIF rather than
as a JPEG results in a smaller, faster loading
le, with better image quality.
TIFF
156 k
54 seconds*
Download time matters!

A typical modem downloads 2.8 kilobits per second. Most visitors
will only stay on a Web page for 10 seconds, so ideally, no Web page
should contain more than 30 Kilobytes of data! A more realistic rule of
thumb is to aim for under 60K.
If you know your audience has a high bandwidth connection (for
instance if the site will be used exclusively on campus where everyone
has Ethernet connections) download time may be less of an issue, but
fast is always good.
Low Quality JPG

8k
3 seconds*
How much should you compress a GIF le?

Fewer colors = smaller le size
More colors = larger le size
Compress the le to be as small as possible while maintaining the
image quality you need.
4-color GIF
4k
1.3 seconds*
How much should you compress a JPG le?

More compression = smaller le and loss of image quality
Saving the photo below as a JPEG also

results in a smaller le with better image
quality.
TIFF
168 k
58 seconds*
128-color GIF
20 k
7 seconds*
Less compression = larger le with higher image quality
Compress the le to be as small as possible while maintaining the

image quality you need.
Tips for making fast-loading Web pages

Your Web page can use graphics sparingly and still be attractive
Do not use graphics of text where in-line text will serve. Pages
will load much more quickly and will be more accessible to
disabled visitors.
Re-use the same graphics throughout the site.

Once a banner, logo, or buttons have been downloaded, the
image les are cached on the visitors computer and do not
need to be downloaded again.
Image rollovers slow download times signicantly. Instead, use

a CSS hover style to make text links have a rollover color.
Medium Quality
JPG
4k
1.3 seconds*
* Download time on a 28.8 kilobits

per second dial-up connection
Note: TIFF les are shown for comparison only.
Most Web browsers will not display TIFF les.
page 10

Page in a Graphical Browser
Make Web pages accessible to all

Provide an ALT attribute for every image
ALT tags are alternative text descriptions that allow someone who
cannot see a graphic to understand its content. Providing ALT tags is the
rst step towards making your pages accessible to all visitors.
Accessibility affects visitors with vision or cognitive disabilities who
need to hear the text on your page. Accessibility issues also affect
users of non-standard Web browses or other devices such as mobile
phones or PDAs, or even just people with low-bandwidth connections
who turn the images off in their graphical Web browser.
Page with images & style sheet turned off,

marked up for Accessibility
For photos or illustrations, provide a few words of description

For banners and buttons, the ALT text should exactly reect the
text on the graphic
The examples to the left compare a page which is properly marked up
with ALT tags, then not marked up at all (seen here by turning off images
and style sheets in a browser).
Take, for instance, the graphic in the top left corner that reads UMass
Amherst. It is marked up as:
<img src=images/umass.gif alt=U Mass Amherst>
In the marked-up version, some one who is listening to the page using
screen-reading software will hear U Mass Amherst
In the version where the ALT attributes are omitted they will hear
in line [image], but they wont know the purpose of the graphic.
Page with images & style sheet turned off,

NOT marked up for Accessibility
Use empty ALT tags for decorative or non-content graphics

If an image is used for purely for design purposes and it has no inherent
content (such as a background or spacer), make sure to include an empty
ALT tag. In this case the image will be ignored by the browser, and
your visitor will not be left wondering if the image contains important
content.
<img src="images/spacer.gif alt="">
page 11
Usability tips for large images

Use Thumbnails to link to large images
For those occasions when you really need to post a large image on
the Web, use a thumbnail, or postage stamp sized image as a link to
display an enlargement on a separate page
Indicate le size if thumbnails link to very large images
Warn your visitors if the le will be especially large, or if you are
linking to a le or in an unusual le format (PDF, TIFF, BMP etc.).
Usability and accessibility are impaired by poorly

planned bells & whistles
Use animation only when it adds value
Multimedia can add important visual interest to a site. It can be
informative in ways that still images cannot. But multimedia can also
make a site slow and difcult to use.
For our in-class example, we show a

PowerPoint slide where the text comes in
character by character with typewriter sound
effects. Its slow, inaccessible, and basically,
silly!
Make animations or rollovers worth the download time.
Only use animations when they are essential to the purpose of

the site.
Most multimedia formats do not meet accessibility standards

If you do use multimedia...
Provide text alternatives or captioning for audio & video
Text alternatives should deliver comparable content
page 12
How to Format Images for PowerPoint

Process for PowerPoint
To resize images before inserting into PowerPoint
Smaller image for PPT slide
Using a higher resolution than your projector can

display will not increase image quality. Instead,
it will increase the PowerPoint le size and slow
down your presentation.
About screen resolutions and data

projectors
Our recommendation ts the common XGA
projector display (1024 x 768 pixels).
If you use an older SVGA projector (800 x
600 pixels), you may want to down-sample
your images to 10 x 7.5 at 72 dpi.
96 dpi images will look soft in a SVGA
projection.
If image quality is crucial, you can make
your image t in 10 x 7.5 at 160 ppi. This
results in a larger le size for presentations
but images will look ideal on newer UXGA
projectors (1600 X 1200 ) and good on either
a SVGA or XGA projectors.
1. Open an original scan or digital camera photo in Photoshop or

another image editing application.
a. Crop the image as needed.
b. Resize the image, being sure to resample, based on inches:
10 inches wide x 7.5 inches high will ll the screen.
96 ppi is a good resolution for screen presentations
(see sidebar), 150-300 ppi if the slides will be printed.
c. File > Save as... and rename the le (dont overwrite your
original scan).
Save photos as high quality JPGs.
Save line art as GIFs.
(See OIT handouts on Photoshop, iPhoto or MS Ofce Picture
Manager for detailed instructions on resizing images)
2. In PowerPoint, select Insert > Picture > from le ... , nd the
saved le and click Insert.
The image will appear on the slide. If it is the wrong size you
may want to repeat step one. (Some le formats, such as TIFF
will always paste-in larger than expected.)
To resample & compress all the images in a presentation at once
after inserting into PPT
Note: This method is only available on Windows, not Mac OS.
The advantage: Its faster. The disadvantages: It requires more
computer processing power and allows less control over image quality
(all images are saved as compressed JPGs).
1. In PowerPoint, for each slide that will include images, go to
Insert > Picture > from file ....
2. The image will appear on the slide. Hold down the mouse on
the image and drag to reposition. Click on the image then drag
the handles at the corners to scale the image on the page.
3. Once the presentation is completely built, right-click on any
image, and choose > Format Picture ...
4. In the Format Picture window, click on the Picture tab, then
click the Compress button.
5. In the Compress Pictures window make the following choices:
Apply to: All pictures in document
Change resolution: Choose Web (96 dpi) or Print (200 dpi)
Options: For maximum optimization of le size, check
Compress pictures and Delete cropped area
6. Click OK. If you get an alert asking if you are sure, click
Apply.
Youll be returned to the Format Picture window:
To return to your presentation, click OK.
Note: this command is permanent! If you arent sure about how you
have cropped or scaled your images, save a copy of the le BEFORE
you compress.
page 13
How to format for PowerPoint, continued...

Shrink vertical images...
or crop...
Use PowerPoint
to make captions and
labels...
Tips for using images in PowerPoint

Adapt your images to t the slide layout
PPT slides are always horizontal - 10 inches wide x 7.5 inches
high. Shrink or crop vertical images to t the slide.
Leave a border on all sides, especially when the image doesnt
ll the screen, or if the images on different screens are a variety
of shapes.
Take advantage of PowerPoints text and drawing tools
Add captions
Consider captions before you prepare your imageshow much
room will you need?
Use PowerPoints automated drawing tools
You can create arrows, call out boxes, etc., right in PowerPoint.
Get the best quality slide show, with the smallest le size
A slide show with too many high-resolution images may become huge
causing memory problems for the computer you are presenting from.
Keep pixel and color resolution as low as you can. If a lower

resolution image looks OK on your projector or printer, use it!
Dont insert full resolution scans into a presentation (unless you
compress them later in PPT).
Use the right le format, GIF for line art, JPG for photos
BEST CHOICE
FOR LINE ART
File formats: Why JPEG or GIF?

JPG is usually the best choice for
photos because the images are
compressed, but still look good,
especially saved at highest quality.
JPG, BMP and PCT come into
PowerPoint at the size you expect.
The higher the resolution the better
they look, but too high a resolution
means large les and potential memory
problems.
96 ppi
TIFF
204 k
96 ppi
High Quality JPG
120 k
72 ppi
Low Quality JPG
8k
96 ppi
4-color GIF
8k
(le size
too large)
(le size large

quailty ok)
(small size
poor quality)
(small size
good quality!)
TIFF and GIF work, but may come in

looking larger than expected and will
need to be re-sized manually. Another
disadvantage of the TIFF le format is
that the les are large. A highest quality
JPEG image will look nearly as good as
a TIFF, yet will have a much smaller le
size.
BEST CHOICE
FOR PHOTOS
96 ppi
TIFF
1.5 MB
96 ppi
High Quality JPG
604 k
72 ppi
Low Quality JPG
128 k
96 ppi
256-color GIF
400 k
(le size
too large)
(best quality
reasonable size)
(lesser quality
smallest size)
(small size
poor quality)
page 14
How to Format Images for Printing

Process for printing
Desktop Printing
1. Know the target print size. (4 x 6 inches? 11 x 17 inches?)
2. Resize at correct resolution for printer and image type.
150-720 ppi for photos, 300-600 ppi for line art
240 ppi is ideal for ink jet printers
300 or 600 ppi is typical for laser printers
3. Save a copy of in PSD or TIFF.
4. Go to File > Page Setup to select paper size & orientation.
5. When possible, use color management (ICC) proles to match
ink/paper/printer (some printer drivers do this automatically).
6. Send to printer.
Using a service bureau
1. Know target print size.
2. Ask the print shop to give you specications for:
Resolution (usually 300-1200 ppi depending on color depth)
File format
RGB or CMYK? (If CMYK, ask for conversion prole)
How to deliver (CD, E-mail, FTP?)
3. Save a copy of the prepared image.
4. Deliver le.
How printers work

Most printers use CMYK inks
C = cyan
M = magenta
Y = yellow
K = black
Ink jet dots
Laser and
offset rosettes
Photographic
print from le
Work on your image le in RGB (Red, Green, Blue)

Even though most printing devices use CMYK inks, you should work
on your le in RGB mode to have full access to image processing tools.
Convert to CMYK only if requested by a print shop, and then, only as
the last step.
Desktop ink jet printers
Desktop ink jet printers use a spray of water-based dye (1440 dots of ink
per inch is typical). A 240 ppi le provides adequate image resolution.
Desktop laser printers
Laser printers use dots of colored toner that is fused to paper by heat
(600 to 1200 dots of toner per inch is typical). 300 ppi is the standard
image resolution to use for laser prints.
Commercial offset printers
Offset printing (for books, magazines, postcards, posters) uses rosette
patterns of CMYK inks, or Spot colors (typically 2 to 4 distinct
Pantone inks). File resolution is matched to screen frequency or lines
per inch. Newspapers 85 lpi, magazines 133 lpi, ne art books 177 lpi.
The recipe is DPI = 1.5 x LPI
Commercial photo services
Commercial photo services use a digital laser system to expose chemical
photo paper, producing a traditional photographic print. (You wont see
ink dots, but if the ppi of the le is too low you will see the pixels.)
page 15
Appendix:
Finding Images Online
You may nd some of these high-quality image collections useful. For collections in your area of
expertise, contact your library subject specialist.(http://www.library.umass.edu/reference/liaisons.html)
US Governent Sites (public domain)
USA.Gov Photos & Multimedia by topic - http://www.usa.gov/Topics/Graphics.shtml
Library of Congress Prints & Photographs Online - http://www.loc.gov/rr/print/catalog.html
The Smithsonian American Art Museum - http://americanart.si.edu/search/search_artworks.cfm
NASA Multimedia - http://www.nasa.gov/multimedia/highlights/index.html
NASA Modis Gallery - http://modis.gsfc.nasa.gov/gallery
NASA Earth Observatory - http://earthobservatory.nasa.gov
Access through UMass library databases
http://www.library.umass.edu/cgi-bin/aka/databases.cgi
ArtStor (Multiple image collections - mostly art and architecture)

Grove Dictionary of Art Online
Museum & Library Collections

New York Public Library Digital Gallery - http://digitalgallery.nypl.org/nypldigital
George Eastman House Collections Onlline http://www.geh.org
Getty Museum Collection Online - http://www.getty.edu/art

Web Gallery of Art (1100-1850) - http://www.wga.hu
Art Images for College Teaching - http://arthist.cla.umn.edu/aict
Science & Society Picture Library
- http://www.scienceandsociety.co.uk
News Media
Washington Post Camera Works - http://www.washingtonpost.com/wp-dyn/content/photo
Time Magazine Photo Essays - http://www.time.com/time
Photosharing & Creative Commons
Creative Commons Images - http://creativecommons.org/image
Flickr - http://www.flickr.com
Stock Photography
Some sites (including Corbis) will provide educators with access to non-watermarked images for use in
the classroom.
Corbis - http://www.corbis.com
Getty Images - http://creative.gettyimages.com

Image Basics

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Image Basics

Transféré par

Droits d'auteur :

Formats disponibles

oit

UMass Ofce of Information Technologies

Basics of Digital Images

How to Get Images

Fair Use for Teaching & Research

How to Format Images for the Web

How to Format Images for PowerPoint

How to Format Images for Printing

OIT Academic Computing

Basics of Digital Images

Why use Images?

To show information that is visual and cant be easily

To clarify interpretation of information by applying color

To create an evident context for information by using images

Avoid using images that are unrelated to your content!

Bitmaps and Vectors

Enlarged bitmap image

Because photographs have high levels of detail and a variety of tones

Enlarged vector graphic

CorelDraw, Illustrator, Freehand, AutoCAD & Flash create vector

OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts

Basics of Digital Images

Each block in the mosaic grid, or pixel, is a single color

Resolution - how many pixels per inch (ppi) ?

More pixels per inch =

Fewer pixels per inch =

Scaling down works well

200 pixels wide

Scaling down a bitmap image usually gives satisfactory results.

Scaling up a bitmap results in a blurry, poor quality image.

Scaling up gives poor results

72 ppi is ne for the Web

200 pixels wide

OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts

Basics of Digital Images

More Colors (16 million)

Fewer Colors (24)

TIP: Use the right number of colors

Color photos require millions of colors

Black and white photos only need 256 shades of gray

Line art (cartoons or logos) may need only a few colors

OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts

Basics of Digital Images

How to Get Images

Take pictures with a digital camera

Download images from the Web using your browser

Online Image Resources

A growing number of image collections are available online. These

A Creative Commons image search

For a list of online resources see appendix, Finding Images Online.

OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts

Basics of Digital Images

Fair Use for Teaching & Research

Four Factors for Determining Fair Use

To illustrate our point...

This information is adapted from the

OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts

Basics of Digital Images

Start with a Large File then Format

Megapixels & Pixel Dimensions:

5 MP (2580 x 2048 pixels)

6 MP (3000 x 2000 pixels)

Begin, if possible, with a high quality scan or digital camera image,

Typical Settings for a good scan