Tricks and Tips

Tips on web graphics

Bevel buttons

Transparent images

TIPS

Size
Image size is an important factor for web pages. The larger the size the longer your pages will take to load up. A good size for your graphics will depend on how many graphics you are putting on your page. The more graphics you have the smaller the size should be on each graphic. A nice round figure to stick to is 20-30k. However, the smaller you can make a graphic the better. If you can't make it smaller that 30k then it is probably not worth having.
If you need a graphic on you page which is some outrageous size, create a thumbnail of it! Give your viewers the choice to wait or not for your image. And it is always good to let people know how large this image is so have the file size listed beside your thumbnail.
You can do this two ways. First, just change the image size (height and width size, not file size) in whatever graphic program you use and save it with a different name than your larger image. Then just make the smaller image a link to the larger image. The second way you can do this is to use the HEIGHT= and WIDTH= in your IMG SRC, like so...< IMG SRC="images/graphicsname.jpg" HEIGHT=50 WIDTH=50>. Then just link this image to itself. The numbers for the HEIGHT and WIDTH are just something you have to play around with to get the best proportions for your image.
Borders
When you have buttons or images that are used as links to other places a good way to present them is with their borders turned off. All you have to do is, in your <IMG SRC="images/graphicname.jpg"> add BORDER=0 after the graphic name. This will get rid of those cumbersome colored borders and let your beveled bars or other images stand on their own.
Backgrounds
Backgrounds are a great way of giving some spice to a web page. The background should compliment your page content, not scare your viewers away. The size should be between 5-10k. An important tip here is to choose something that you can read text on. Sure bright funky patterns will catch someone's attention but if they can't read the text the chances that they will return or even continue is slim. So please, choose wisely!
To add an image as your background, all you need to do is:
<BODY BACKGROUND="graphicname.gif">
Background images too much of a hassle? You can just put a simple color on your background by :
<BODY BGCOLOR="#FFFFCC">
Don't know the color codes? Check out the COLOR CODE page which will show you each color and its code.

Miscellaneous

Sometimes a regular font just won't do on some backgrounds. Changing the font color is also a good way to go. Even if you need to forego graphics you can change the font colors to highlight important topics and points in your page. < >

	Clicking on this image will take you back to the index page of the HTML Tutorial.
	This button will take you back to the index page of the Graphics Tutorial.