Using Images on Your Website? April 21, 2011. This Session Covers Why and when to use images Best...
16
Using Images on Your Website? April 21, 2011
-
Upload
colin-cain -
Category
Documents
-
view
218 -
download
1
Transcript of Using Images on Your Website? April 21, 2011. This Session Covers Why and when to use images Best...
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 applicationsGIMPPaint.NETPhotoPlus SE
Free online tools (see notes)
Windows and Office toolsOffice Picture
ManagerPaint
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/photo-content.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/libraryweb/imagesizetips.html
Questions?
Nic PoagueDatabase and Web Design [email protected]
Kathie GlasselTechnology Programs [email protected]
