Spice up your Web page with graphics

By Shery Ma Belle Arrieta
Posted Wednesday, September 29, 2004

When the World Wide Web appeared on the Internet several years ago, it opened up a different door for the written word. Pages and pages of text were published online. It also opened the door for global communication because users from different parts of the world could go to the Web page and read whatever was written there. However, this also presented some communication problems. There are still a lot of people who don't communicate in the same language. Having visual or graphical representations of words then started to become commonplace, their values equated with accuracy of message transcendency and were regarded as one of the more effective and persuasive of communication devices.

Images and icons can replace long strings of texts in your Web pages. You will also find that aside from condensing your Web page and eliminating a page full of boring text, the presence of images or icons help to aesthetically enhance your Web pages.

Where do you get your images? You have several sources. You can draw your images yourself using drawing programs such as Adobe Illustrator, Macromedia Freehand, CorelDRAW or Adobe Photoshop. You can also scan existing artworks. You can capture screenshots from your computer and then save those. Another way is for you to use images from other's pages. However, make sure that you get the author's permission first befor using his graphics on your Web pages. And you can instead link your pages to other people's arts or graphics. Again, ask permission before you do this.

What are the points you should consider in putting graphics or images in your Web sites?

First, your images should convey a universally understood meaning. For example, most people would understand that the presence of an image of a question mark in your Web page means that if they click on that image, they would be taken to a help page. Always keep in mind that you are not putting graphics in your Web pages for the sake of having an image in your pages. What is the use of putting a lot of images when they serve no purpose? Also remember that your images are also visual codes and their effectivity means the successful transmission of the message your images represent to your viewers. You can also use a combination of text and graphics for a more effective and successful understanding of your Web pages.

Use navigational buttons to help your viewers go smoothly from one page to another in your Web site. Use graphic and textual representations to link to your main page, to your subdirectory pages, and your e-mail.

Next, another pitfall for most Web authors are the size of graphics they put in their Web pages. The bigger the image size, the more time your reader will need to wait for your pages to load. If your pages take a long time to load, your readers are more likely to be impatient and lose interest in reading your pages altogether.

There are a couple of ways you could still put a lot of images in your Web pages without losing your impatient audience. The first is by making your images or pictures smaller. Smaller versions of the full-sized images located somewhere else within your pages are called thumbnails. Thumbnails are usually 2-3 centemeters square and are only about 5-10 kilobytes each in size. You can put 10-12 thumbnails in a single Web page and still be able to load that page at a considerably fast rate using even the slowest Internet connection.

However, if you don't like the idea of using thumbnails and you want to put the full-sized pictures instead, consider saving your pictures in low resolutions. The lower the resolution, the smaller the storage size of your picture. You could probably go with this but it would also mean that you'd have to sacrifice the clarity of your picture. The resulting images would be grainy.

Another way for you to consider about the size of your graphics is saving your graphics in JPEG format. JPEG coding compresses images to one-third or one-fifth of the total size of GIF styles. Before you convert your GIF files to JPEG format, remember that during compression, JPEG removes the information it perceives as the least important to the image's final quality.

To further reduce the size of your images, highlight your graphics with only a limited number of colors. GIF files supports up to 256 colors while JPEg files have access to over 16 million different colors. Limit your immages to only a few colors, say 64-100 for GIFs and 1-2000 for JPEGs. Programs such as Photoshop and Paintshop Pro could give you control over the number of colors in your graphic files.

GIF, btw, stands for "Graphical Interchange Format" and is considered the "lingua franca" of pictures on the Web. JPEG, on the other hand, means "Joint Photographic Experts Group."

Lastly, here are some graphic tools courtesy of Tip World you might want to check and try out.

1. Cool 3D produces impressive animated 3D text with eye-catching special effects. Cool 3D's drag-and-drop editing makes creating slick-looking titles, logos, and animated graphics for Web pages, digital video, and presentations fast and easy.(http://www.pcworld.com/r/shw/1,2087,6099,00.html)

2. CompuPIC Graphics Viewer is not only a viewer, it also converts files, edits wallpaper, scans, and plays sound and video files. It supports more than 22 graphics formats and does slide shows, screen savers, and thumbnail views.
(http://www.pcworld.com/r/shw/1,2087,1764,00.html)

3. Free Pics is a graphics utility that allows you to view and mark most graphic formats. You can create slideshows and organize graphic files into image directories. The utility offers an array of visual effects and sorting features.
(http://www.pcworld.com/r/shw/1,2087,6154,00.html)

4. Microangelo 98 lets you view and edit multiple image formats within an icon and quickly locate icons on your system. You can even create or edit animated cursors. (http://www.pcworld.com/r/shw/1,2087,3335,00.html)

5. Animated Screen is a graphical utility allows you to create multimedia screen savers from your own pictures, .avi files, and sounds. (http://www.pcworld.com/r/shw/1,2087,6062,00.html)

6. CyberView Image is a JPEG image compressor that lets you optimize the size and quality of Web graphics. It has a flexible user interface and a selective compression engine, making it useful for Web designers, digital photographers, and image scanners. (http://www.pcworld.com/r/shw/1,2087,6067,00.html)

7. Ignite is a Web graphics optimization program that allows you to produce small, quality GIFs and JPEGs from artwork created in other graphics programs. (http://www.pcworld.com/r/shw/1,2087,6247,00.html)

8. repliGATOR lets you apply dozens of imaginative effects, including alien insect view, banya, bubble, clouds, fallen letters, mad artist, mosaic, optical art, stardust, and relief map, to your images. (http://www.pcworld.com/r/shw/1,2087,6130,00.html)

9. Bevil Devil lets you add 3D bevels, drop shadows, overlays, and highlights to your favorite picture files without being a multimedia guru. (http://www.pcworld.com/r/shw/1,2087,6189,00.html)

About the Author
None