One of the nice things about the World Wide Web is that web pages are rich with graphics and sound. Graphics can help express the themes of your pages, or they can make your pages look like a carnival.

Background Images

Even though XHTML gives web designers the ability to have solid-color backgrounds, many people like backgrounds with more variety, contrast, and/or colors. If you use background images, consider the following points.

	Choose background images that don't have a lot of detail or contrast.
	Choose images that have colors that will enhance your theme instead of drawing attention to themselves. Backgrounds should be just that, backgrounds.
	Choose text fonts and colors that give good contrasts with your backgrounds. WYSIWYG editors allow you to change font properties via Page Properties or something similar.
	Use small background images that will load quickly.
	Use images that were designed to be backgrounds so they will tile across and down the page without noticeable seams.
	In addition to using background images, also give each page a solid color that is close in shade to the overall appearance of the background image. The solid color will load first and will be visible while the background image is loading. Doing this will avoid abrupt changes in color when the images are displayed.
	Don't use animated backgrounds.

Public Domain Graphics

A great variety of public domain background images can be obtained from the web. They tile and seam nicely. Search on +graphics +free to locate sites with free graphics.

Creating Original Graphics

This web site does not delve into the creation of graphics. This page, however, gives a few ideas that might be helpful if you decide to create original graphics. First, there is powerful software to help you create graphics.

Adobe Photoshop requires some time and effort to be learned, but it is powerful!

	Adobe Photoshop Elements is a reduced version of Photoshop that contains the basics of Photoshop but not all of the advanced features.
	One shareware (but professional quality) program that is popular is PaintShop Pro. Download PSP for a 30-day trial.
	Another popular shareware graphics program is Gif Construction Set. Download a trial version.
	LView Pro has some nice features and can be downloaded for a 21 day trial

In addition, you can scan photographs and drawings. For suggestions in using a scanner, see A Few Scanning Tips.

After you've obtained software to assist you in creating graphics, here are a few points to consider.

	After you've created a graphic with your graphics editor, save the file in gif or jpg format at 72 dots per inch. Printed pictures at that resolution would look terrible, but 72 dpi is the resolution used by your video board electronics. If you save the file at a larger resolution, you'll have a larger file to download, and it won't look any better on the monitor than one at 72 dpi. Every rule seems to have its exception, however, I scanned a photograph a few weeks ago, and I had to use a resolution of 150 dpi to get it to look good in my web site. Apparently, the scanned image was of poor quality.
	Use the gif format for graphics that have abrupt changes in color and the jpg format for files that have gradual changes in color, such as photographs.
	Before you save a graphic in gif or jpg format, remove the jagged edges to any text that is in the graphic. Some programs refer to this as "smoothing" while other programs refer to it as "anti-aliasing". Graphics programs give you an option to anti-alias.
	To eliminate the backgrounds to your graphics that don't blend in with your page backgrounds, save the graphics in the GIF89a gif format and make the graphic graphics backgrounds transparent (only one color can be transparent). jpg files can not be transparent.
	gif files can have 256 colors. In many cases, many of those colors are not used. If your graphics editor allows you to do so, eliminate the unused colors from your gif files. This will significantly reduce the size (and loading times) of the files. In addition, experiment with removing colors are used but which do not contribute much to the overall appearance. This may give you further reductions in size without objectionable changes in appearance of the images.
	jpg files can be compressed to reduce the file size. However, compression distorts the image. You will need to reach a compromise between file size and image quality.
	Large graphics files are an annoyance because they load slowly. Instead of putting large files directly in your pages, put small "thumbnail" versions of the files in your pages and link the thumbnails to the large files. The thumbnails will load quickly, allowing your visitors to decide if they want to invest the time to see the big versions. Thumbnails can be made with your graphics program by specifying a small width of around 50 pixels.
	As explained in the Browser Compatibility page, always put WIDTH, HEIGHT, and ALT tags on all of your graphics. These tags go in the HTML code that inserts the graphics in your pages, not in the graphics files themselves.

[ Site Map ] [ Distance Learning ][ Home ] [ Up ] [ Getting Started ] [ Using Graphics ] [ Various Browsers ] [ Forms ] [ Java Applets ] [ WebTV Users ]