Resources

Graphics Tips

Always Use "Alt" Tags
Animated GIFS
Always Resample an Image After Resizing It
Remove the Hyperlink Border Around a Picture
Make a Large Picture File Seem to Download Faster
A Great Way to Optimize Pictures
Scanning Tip
Graphics Files Versus Download Times
Places to Get Photos and Graphics

Always Use "Alt" (Alternative Text) Tags

• In Page view, right click the picture and choose Picture Properties.

• Go to Text: and type in a short description of the graphic or the purpose of the graphic.  For example, if an arrow is used to indicate how to go to the top of a page, the alternate text for the arrow could be "go to top of page".

• Do not use the words "picture" or "graphic" in the description.

This is the most important tip of all!  It benefits not only people who use adaptive devices such as screen readers for web access, but also people who turn images off for faster browsing and folks who use text-only browsers.  Using the words "picture" or "graphic" in the description is considered redundant.

Animated GIFS

Animated gifs are best used sparingly.  Fast moving graphics, especially those that flash at "strobe light" speed, not only distract from the content on the page, but are also an accessibility concern.  People with attention-deficit/hyperactivity disorder, dyslexia or photo epilepsy can be negatively affected by this type of activity on a web page.  Consider adding "press the escape key to stop the animation" under a large animated gif.

Always Resample an Image After Resizing It

• In Page view, click the picture that you have resized

• On the Pictures toolbar, click Resample

This is important to decrease the picture’s file size. (Note: An exception to this is animated images.)

Remove the Hyperlink Border Around a Picture

If you make a picture link to another page or bookmark, the default is to create a border around the picture in the color that you have designated for your hyperlinks. Getting rid of it is easy:

• In Page view, right click the picture and choose Picture Properties

• Go to the Appearance tab and type 0 (zero) for the Border Thickness.

Make a Large Picture File Seem to Download Faster

• If the image is a .gif file: In Page view, right click the picture and choose Picture Properties; Click the General Tab; Click the Interlaced check box.

• If the image is a .jpeg file: In Page view, right click the picture and choose Picture Properties; Click the General Tab; Make Progressive Passes 3.

These techniques make the picture gradually come into focus in some browsers, giving the illusion of the picture downloading faster.

A Great Way to Optimize Pictures (i.e. make the file size smaller without sacrificing too much quality)

Go to http://www.netmechanic.com/GIFBot/optimize-graphic.htm
Follow the self-explanatory steps. Here are a couple of things I recommend:

• If you’re using school computers, save the image that you want to optimize to the desktop first.

• Uploading the picture file works better than typing in a URL.

• Choose both jpg and gif for Step 3 Output Format to see more possibilities

• Remember to LEFT click on the picture you like best to open it up into another window. It’s only in the new window that you can then RIGHT click on the picture to actually save it.

• Panoramic images should stay in jpg format.  Don't use this with animated gifs.

Top of Page

Scanning Tip

Set the resolution to 72-96 pixels per inch when scanning something for web publication. That’s the resolution of most pc monitors. Using higher resolutions is unnecessary and increases file size.

Graphic Files Versus Download Times

Keeping picture files as small as possible is key to web pages that download quickly. There are many "rules of thumb" in regards to web page download times. The FrontPage 2000 Help File states that a page that takes more than 20 seconds to download — no matter what the assumed connection speed is — will be considered "slow" by people browsing your web. NetMechanic, a resource for web designers, is even stricter, stating that you could lose 1/3 of your visitors if they have to wait more than 8 seconds for a page.

You can see your page’s download time at the bottom-right hand corner of the FrontPage window. To determine the actual file size of a web page, add up the html file plus all the individual graphics files on that page. Use Windows Explorer to view the file sizes. 

Here’s a chart showing download times using a 28.8K connection. (Remember, not everyone has the fast connections we enjoy at the schools. Even those with 56K modems rarely get actual download speeds near 56K.)

Places to Get Photos and Graphics

A great resource is Microsoft’s Design Gallery Live, http://dgl.microsoft.com.

To avoid copyright issues, you can use photos and graphics that are considered public domain. For more information on public domain and a list of links to public domain graphics, go to http://mciunix.mciu.k12.pa.us/~spjvweb/cfimages.html. If you’re using a school computer, here’s how to save an image:

• Right click on the picture and choose Save Image As. Then Browse to the computer’s desktop (usually at the top of the list). Decide if you want to rename the image or just save as is.

• Go to the computer’s desktop and copy the image to the clipboard.

• Go to the web page you want to add the picture to and paste it in.

• Resize, resample or do any other modifications and then save the page.

• Remember to put anything you’ve added to the desktop in the recycle bin when you’re done.

Top of Page