1. Using Images on Your Website? April 21, 2011

2. 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

3. Things to Consider Images can enhance or hurt your web presence Various internet connections Web vs. Print Optimizing and editing

4. Good Use of Images Visual representation of a product Identity: putting a face with the name or organization Engage visitor, draw emotions

5. Not Good Use of Images Fill up space Misrepresent your organization To lure or deceive users In place of text

6. Notes on Animations Can be a good interactive tool Should serve a purpose Can be annoying and distracting BAD GOOD

7. 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

8. 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

9. 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

10. Image Editing Enhance images for best appearance Cropping, resizing, enhancing Resizing and scaling

11. Editing Tools Free standalone applications  GIMP  Paint.NET  PhotoPlus SE Free online tools (see notes) Windows and Office tools  Office Picture Manager  Paint Commercial applications (see notes)

12. Image Optimization Smallest possible size with best possible quality Crucial part of website performance 38KB62KB

13. Optimization Tools Dynamic Drive (online) Yahoo! Smush.it (online) PNGGauntlet (standalone) RIOT (standalone)

14. Demonstration Optimization  Office Picture Manager  Smush.it Editing  Photoshop  Pixer.us

15. Resources Photos as Web Content: http://www.useit.com/alertbox/photo- content.html http://www.useit.com/alertbox/photo- content.html Graphics, Images, and Multimedia (PDF): http://www.usability.gov/pdfs/chapter14. pdf http://www.usability.gov/pdfs/chapter14. pdf Web Image Size Tips and Tricks: http://www.lib.berkeley.edu/digicoll/librar yweb/imagesizetips.html http://www.lib.berkeley.edu/digicoll/librar yweb/imagesizetips.html

16. Questions? Nic Poague Database and Web Design Specialist npoague@pacounties.org Kathie Glassel Technology Programs Administrator kglassel@pacounties.org