Graphics are a special challenge for Web designers, requiring balance between overuse and skimpiness. A site filled with images can have charm and impact, but use graphic images to enhance, not overpower. The secret of effective graphics is stick to the theme and identity of the website. Logos as an identity predate the Web, but a carefully chosen webpage logo clearly identifies the site and is a visual center of page design.
Types of Images
Three types of images are used on webpages: GIF, PNG, and JPEG. GIF images (Graphics Interchange Format) are clipart type images; many are animated by a string of movements which cycle continually, or cycle once and freeze on a single image. PNG (Portable Network Graphics) was created as a replacement for GIF, supports a wider range of colors, and is the most widely used format on the Internet. JPEG images (Joint Photographic Experts Group) are typically photographic, with subtle shading and blending rather than crisp lines.
Icons are small GIF or PNG images, about 25-30 pixels square. Visually descriptive icons can represent various subjects or links, especially if the icon is carried through to the page being linked to. Intuitive icons, such as arrows, help navigation when used consistently throughout a site (although you should always provide text links at the bottom of a page for accessibility by the disabled).
Here is a sample page that uses icons as links to school departments.
Size of Images
Digital cameras or scanners create photographs or documents to put on webpages, but remember that district access is 100 times faster than the home modem of a visitor. A 100K image that displays quickly on a teacher workstation will take half a minute to load with a modem; several photos on a page can take more than a minute. Viewers won’t wait long for a page to load — the average is 10 seconds — before clicking to something else. Limit large photos to one or two per page. Use an image editor to edit and reduce file size of digital camera/scanner images.
Be careful when using Image Properties to change the length and width of a graphic. While an image can be reduced for better page balance, enlarging images usually gives poor results. Also, an image reduced in this manner does not change its load time. Animated gifs cannot be adjusted.
Animation
The Web design community persistently argues about animated gifs, but animated gifs can be effective, especially on school websites. A single animated gif at the top of a heavily texted page punctuates a theme and adds a bit of whimsy. When the visitor scrolls down the page, animation scrolls off the window, so the viewer is not distracted while reading. On navigation pages with little text, more animated images can be used, because the viewer spends too short a time on the page for movement to become annoying.
Placement of Images
Placement of images on a webpage can enhance or undermine a page. A right-facing graphic looks better on the left side of a page, and a left-facing graphic looks better on the right side of a page. Centering such images may not alleviate the conflict in our perception–set them off-center, away from the direction they face. Use an image editor to flip an image for better orientation.
Webpages are more 3-D than printed pages; since we unconsciously experience gravity, our senses are jarred by compositions that ignore it. Place weightier graphics further down the page than lighter ones or balance them with heavy text areas. Since we read from left to right, asymmetric page layout should have left-to-right horizontal and top-down vertical direction, so the eye flows to the lower right corner. Pages are often longer than a single window, so achieving such balance is a challenge. If a webpage looks odd, try rearranging text areas, graphics, and empty space for better balance. Templates designed for headers, footers and colors may need to be modified during graphic and content layout.
Include ALT Text
Finally, be sure to include ALT text on every image you place on your page. Not only is this an ADA recommendation, but it can enhance your search engine placement. What are ALT tags? ALT stands for “alternative text” and is part of the HTML tag that displays a graphic image on a webpage.
ALT tag text should be a simple descriptive phrase identifying not just what the picture shows, but what its purpose is on the webpage—like “School District Official Logo,” or “Westside Elementary School Animal Mascot.” The ALT tag prompts the browser to display that text until the image itself is displayed in the browser window (or instead of the image if a viewer has images turned off) . With ALT text the viewer anticipates what will be displayed in the image location, especially for an image with long load-time. For example, a parent able to read that a picture of their child’s work is loading will wait those extra seconds rather than click off to something else.
ALT text serves an even more important purpose for viewers with a disability requiring audio screen readers or braille displays. Without ALT text, your image is simply “image” so a disabled visitor has no way of knowing what is displayed. When the image is a link to another webpage, a disabled visitor is at a particular disadvantage if no ALT tag is provided along with the image–they don’t know what the link is or where it will take them.
Use ALT tags to increase your site’s identity with search engines. Many search engines have a word count limitation for META tags on the page, but by using a keyword, a phrase, or even a sentence for the ALT text in your images, you boost your search engine identity without going over the META limitation.
For example, many webpages display a school logo or mascot at the very top of the page. Instead of just “XXX School Logo”, incorporate your school motto or some special recognition or award:
“Westside Elementary School-A State Recognized Mentor School-At our school every child will succeed.”
Finally, newer versions of Internet Explorer display ALT text when the mouse passes over the image. This acts like a Javascript rollover without the webmaster having to learn Javascript language.