Using Images on
Your Website?
April 21, 2011
This Session Covers
Why and when to use images
 Best practices for selecting and using
images
 Image editing and enhancing basics
 Optimization and performance
 Tools of the trade

Things to Consider
Images can enhance or hurt your
web presence
 Various internet connections
 Web vs. Print
 Optimizing and editing

Good Use of Images



Visual
representation of a
product
Identity: putting a
face with the name
or organization
Engage visitor,
draw emotions
Not Good Use of Images




Fill up space
Misrepresent your
organization
To lure or deceive
users
In place of text
Notes on Animations



Can be a good
interactive tool
Should serve a
purpose
Can be annoying
and distracting
BAD
GOOD
Best Practices
Formats: JPEG, GIF, or PNG
 Size: No wider than 600 pixels
 Resolution: 72 pixels per inch
 Use alternate text and labels
 Should be relevant to message you
are trying to convey

Best Practices (cont’d)
Be conservative
 Preserve white space
 Use thumbnails or smaller versions
 Avoid filler images
 Images should not look like
advertising
 Don’t use large background images

More Tips for Selecting the
Right Images
Never upload directly from camera
 Look for the highest possible quality
 Avoid overuse of stock photos
 Copyright and permission
 Get other opinions

Image Editing
Enhance images for best appearance
 Cropping, resizing, enhancing
 Resizing and scaling

Editing Tools

Free standalone
applications

 GIMP
 Office
Picture
Manager
 Paint
 Paint.NET
 PhotoPlus

Windows and
Office tools
SE
Free online tools
(see notes)

Commercial
applications (see
notes)
Image Optimization
Smallest possible size with best
possible quality
 Crucial part of website performance

38KB
62KB
Optimization Tools
 Dynamic
Drive (online)
 Yahoo! Smush.it (online)
 PNGGauntlet (standalone)
 RIOT (standalone)
Demonstration

Optimization
 Office
Picture
Manager
 Smush.it

Editing
 Photoshop
 Pixer.us
Resources



Photos as Web Content:
http://www.useit.com/alertbox/photocontent.html
Graphics, Images, and Multimedia (PDF):
http://www.usability.gov/pdfs/chapter14.
pdf
Web Image Size Tips and Tricks:
http://www.lib.berkeley.edu/digicoll/librar
yweb/imagesizetips.html
Questions?
Nic Poague
Database and Web Design Specialist
npoague@pacounties.org
Kathie Glassel
Technology Programs Administrator
kglassel@pacounties.org