1. Using Images on Your Website?
This session will cover using images on the web, from selecting the right images to editing and optimizing them.
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
Too many images can be overwhelming and confusing. While it can be fun working with images, you should know when the use of an image is appropriate.
Large files load slower. Consider mobile connections (and don’t forget that dial-up still exists!)
Don’t forget that the web is a very different medium than print.
In most cases images will need to be prepped for web use. Choose the right tool for the job.

4. Good Use of Images Visual representation of a product
Identity: putting a face with the name or organization
Engage visitor, draw emotions
If you’re providing some kind of tangible product, show a picture of it! People want to be able to see the object.
When we meet someone in real life, we have a first impression. Graphics on a website also give visitors a first impression of the organization. Logos and pictures of key individuals are good examples.
Images can engage the visitor. For example, pictures from a recent event might interest attendees or someone who missed it. In the example shown (President Obama), the picture is recognizable and looks like it tells a story – most people will want to read more.

5. Not Good Use of Images Fill up space Misrepresent your organization
To lure or deceive users
In place of text
Sometimes a page with nothing but text can feel bare, but usually it’s better to provide information than clutter the page up with unnecessary images. White space is good!
Showing images that do not pertain to your organization can be misleading. Avoid overuse of stock photos. Example: Only show a picture of a person if that person is relevant to the organization or article.
If you use an enticing image to draw a user in, it should pertain to your content. For example, don’t use a picture of a good looking model to get users to click on something…they will be disappointed and are unlikely to return!
When text is needed, use text! In most cases images with fancy text are looked over as they resemble advertisements. Exceptions would be for logos.

6. Notes on Animations Can be a good interactive tool
BAD
Can be a good interactive tool
Should serve a purpose
Can be annoying and distracting
Sometimes animated graphics that give the user control can enhance the user experience. This is true with learning tools and online demonstrations.
Animations should have a purpose. Many times people will use animations to catch a user’s attention, but most of the time they end up being a distraction. If it’s decided that an animation is appropriate, it should have some kind of user control.
Good use (educational):
Good use (hot topics on home page):
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
Formats:
JPEG – Use a JPEG when the graphic is a photograph or image with many colors. JPEG compresses the image which causes slight loss in quality.
GIF – Use a GIF if the graphic is text-based or has few and solid colors. GIF supports transparency. This format is not suitable for photographs.
PNG – Can be used in either of the above cases. PNG benefits from lossless compression with the ability to preserve partial transparency (GIF does not support partial transparency).
For a standard page, an image should not exceed 600 pixels in width to make sure it fits nicely on the majority of screens. If you need to provide a larger version of the image, create a link to it.
Web images at 72 pixels per inch will load fast and show up the best on most screens.
Label and date images where necessary. Either put label on the image itself or place underneath. Alternate text (HTML image “alt” attributes) assist with accessibility (users with screen readers or with images turned off in the browser).
Images should always be relevant to your organization or the article content.

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
Heavy image use will hinder website performance, even if the images are optimized. The more you have, the slower your loading times will be.
White space aids in page scanning by letting the user’s eyes flow between content smoothly. Also consider the location of the image – often times users expect advertisements to appear in sidebars and horizontal banners.
Larger versions of images should be at least twice as big as the thumbnail/smaller image. When linking to a larger version of an image, provide a text-link that is labeled clearly. The thumbnail/small image can also be clickable (but always include the text link).
Images added simply to take up space or to “jazz up” a web page are generally ignored by the user who is there to find content.
Examples of what not to use include: low quality photos, flashing or animated graphics or graphics resembling ad-banners, overuse of clip art, or other potentially distracting graphics. Remember, the location can also play a role here.
Background images are almost always purely decorative. Remember: if the image is not facilitating content, it probably shouldn’t be used. Consider thinly sliced (i.e. 1 pixel width), repeated background images to achieve a visual style.

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
Modern digital cameras take very large photos. In most cases, unprocessed images will be too large and cause long download times.
Don’t settle for low quality images when they can be enhanced or replaced. Exceptions: historical images, etc. All graphics should uphold a professional quality.
Some stock photos can come in handy, but when used heavily it will become obvious and turn users off from your site. When possible, take your own high quality photos or commission a photographer. Pictures of “real” people are always better than a stock photo.
Always have the rights to use any image you put on your site. When in doubt, request written permission from the owner. Give credit to the owner when requested.
Especially if you are the sole individual choosing images for a site, they should not just be images YOU like.

10. Image Editing Enhance images for best appearance
Cropping, resizing, enhancing
Resizing and scaling
Cropping: Removing area around an image to draw focus on subject
Resizing: Dimensions of image, not file size. Only use large resolution images where requested. You should never scale down a large image to fit in a page. Provide a link to a larger version if necessary.
Enhancing: Tools used to clean up an image. Commonly adjusted attributes are: brightness, contrast, hue, and saturation. Other tools such as color replacement and filters can be used (depending on software used).
Resizing and scaling: Adjusting the actual dimensions of the image.

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)
Free:
GIMP -
GIMP is a powerful editing program that allows you to create, edit and optimize images. Its features are on the same level as that of many commercial applications. Try the GIMPshop version for a Photoshop-similar interface.
Paint.NET -
Paint.NET is very similar to GIMP. It’s very feature rich and offers a very simple user interface.
PhotoPlus SE -
Serif PhotoPlus SE is the free version of a popular Adobe Photoshop alternative. It contains many standard features and previous
Photoshop users will find its interface familiar.
Free Online:
Pixlr -
Pixlr is one of the best full-featured online editors available today. Create a new image, upload from your computer or edit an image from an existing URL. Save your image as a JPG or PNG and choose the quality to optimize your image.
Pixer.us -
Pixer.us is the most basic and simple to use online editor. It contains all the basic features such as cropping, brightness/contrast adjustments, resizing and color effects such as grayscale and sepia tone. It allows you to save in a variety of formats.
Splashup -
Splashup contains the same great features as Pixlr, while offering you to even capture an image to edit from your web cam! This tool also integrates with your Flickr, Facebook and other popular social networking sites.
Sumo Paint -
Sumo Paint, like the others listed, is another excellent online application. Some of its standout features include impressive brush sets and shape tools for image creation. The only drawback is that it does not allow for selecting quality when saving.
Windows and Office:
Paint - Crop, rotate, resize, colorize, add text and more with this very basic tool.
Go to Start > All Programs > Accessories > Paint
Vista/Win7 shortcut: type mspaint in the search bar on the start menu.
Microsoft Office Picture Manager - Built into Microsoft Office, Picture Manager is an easy to use and convenient tool. In addition to basic editing tools, it offers many other great tools like red eye removal and picture compression for web optimization.
To open, go to Start > All Programs > Microsoft Office > Microsoft Office Tools and click on Microsoft Office Picture Manager.
Commercial:
Adobe Photoshop
Who is it for? Professional designers and photographers
Adobe Photoshop Elements
Who is it for? Basic to advanced users
Corel PaintShop Pro Photo
Who is it for? Photographers and other advanced users
Corel PaintShop Photo Express
o Who is it for? Basic to advanced users
Serif PhotoPlus
Xara Photo and Graphic Designer
Who’s it for? Designers and basic to advanced users

12. Image Optimization Smallest possible size with best possible quality
Crucial part of website performance
Many images, even smaller ones, contain unnecessary information that creates a larger file size. Removing that unused data allows for optimal performance.
Optimization is constantly overlooked. Even with high speed internet connections, any delay of a page loading (even a few seconds) can frustrate a modern user!
38KB 62KB

13. Optimization Tools Dynamic Drive (online) Yahoo! Smush.it (online)
PNGGauntlet (standalone)
RIOT (standalone)
Dynamic Drive online image optimizer -
Simple online editor that allows you to upload your image, select the output file type and save.
PNGGauntlet -
PNGGauntlet is a simple graphical interface tool based on a popular command line image optimizer (PNGOUT). It will optimize just about any image without losing quality, saving it to a web-convenient .png file.
RIOT -
RIOT (Radical Image Optimization Tool) will open just about any image format and allow you to choose quality settings to save your optimized image. It also offers a few basic editing tools and provides a nice preview window to see your optimized image before you save it.
Yahoo! Smush.it -
Basic online tool that will automatically remove unnecessary information from the image without losing quality.

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

15. Resources
Photos as Web Content:
Graphics, Images, and Multimedia (PDF):
Web Image Size Tips and Tricks:
is an excellent research-based resource. There is plenty of free content pertaining to web design usability.
is an excellent resource specifically for government website usability guidelines.

16. Questions? Nic Poague Database and Web Design Specialist
Kathie Glassel
Technology Programs Administrator