This document provides an introduction and overview of digital imaging concepts for a web design course, including why to use images, the differences between bitmap and vector graphics, file resolution and format options for web images, and tips for optimizing images for use on the web. Key topics covered are image file types like JPG, GIF and PNG, resolution standards for on-screen and printed display, and best practices for sizing, compressing and reusing images on a website. The document includes references to source materials used for the course content.

1. Introduction to Digital Imaging
Harrisburg Area Community College
Web 130 – Web Design and Multimedia
Week 10 & 11 – Digital Audio
Professor – Jun Yang
Student – Gary McDowell
Company
LOGO

2. Outline
1. Why Use Images?
2. Bitmaps and Vectors
3. Resolution
4. File Formats

3. Why use Images?
1 2 3 4
To show To clarify To create an Avoid using
information that interpretation evident images that are
can better be of information context for unrelated to
communicated by applying information by your content!
visually, such color using images Decoration may
as, maps, schemes. that your be distracting
charts and audience can and even
diagrams. associate with confusing.
your tone or
message.

4. Bitmaps and Vectors
 In a Bitmap or raster image,  Vector or object oriented
visual data is mapped as spots graphics use mathematical
of color, or pixels. When formulas to describe outlines
enlarged on a computer and fills for image objects.
screen, a bitmap image looks Vector graphics can be
like a quilt or mosaic. The enlarged or reduced with no
more pixels in a bitmap image, loss of data and no change in
the finer the detail will be. image quality.
 Scanners and digital  CorelDraw, and Flash create
cameras produce bitmap vector graphics. Vector
images, and Photoshop is a graphics are the best choice
bitmap program. for logos, and images that do
 Bitmap formats include: PSD, not have complicated patterns.
TIFF, JPEG, PNG, GIF, PICT,  Vector file formats include:
BMP EPS, AI, SVG, DXF, DWG

5. Resolution
Resolution is the term used to describe the number of dots or pixels
used to display an image. Measured in ppi or dpi (points per inch or
dots per inch). Higher resolution means that more pixels are used to
create the image, resulting in a crisper, cleaner image.
________________________________________________________
Resizing Images:
Scaling down a bitmap image usually gives satisfactory results
Scaling up a bitmap results in a blurry, poor quality image
________________________________________________________
Options:
Web images: 72 ppi
On-screen: 96 ppi to 150 ppi
Printing: 300 ppi for non-professional printing
Printed documents can require 150-1200 ppi
depending on the kind of printer and the quality of
image desired.

6. File Formats
Originals Not
Web Output Formats
Recommended for Web
 JPG or JPEG for photos  PSD - Photoshop
 GIF for line art,  AI – Illustrator
illustrations, and logos  FLA – Flash
 PNG yield much sharper  PPT – PowerPoint
output when compared  Docx – MS Word
with JPG
 AEP – Adobe after effects

7. Tips for using Web Images
Always use WIDTH and HEIGHT
attributes to declare
dimensions of image Shoot for file
Re-use the same size 30 to
graphics 100 kb
throughout per image
the site Always Optimize
images before
Do not use use in web page
graphics of text
where in-line text Use thumbnails
will serve to link to
larger images

8. References
 Slide Reference:
 Why use Images? *1
 Bitmaps and Vectors *1 and *2
 Resolution *2
 File Formats *2
 Web Image Tips *2
 Music by Mike Vekris – Relaxation
 Narrator Gary McDowell, HACC Web Student
______________________________________________________________
*1 Umass Office of Information Technology, Basics of Digital Images, July 2002
*2 HACC Web 130 - Web Design and Multimedia, Tips for Using Web Images,
Jun Yang, Spring 2012