Graphics - The Elements of Web Page Style

Graphics Basics

Graphics can do much toward enhancing a web site if they are used appropriately.

Be consistent with the style of graphics on your site. If you use styles that vary greatly, it will look like you randomly chose images from all corners of the web.

Many web artists offer custom-designed sets of graphics which are coordinated for you. They are great for amateur webmasters who can't design their own custom graphics but want a nice looking site. See the Links page for the "best of the best" graphic set sites.

Load Time

Keep download time to a minimum. This will benefit both your visitors and your server disk space.

Don't put many large graphics files on your site. A single graphic shouldn't usually need to be over 20K or so. (I try to keep mine under 10K.)

If you need to have large graphics or photos, consider using thumbnail images; they give people a choice as to whether or not they would like to download the full image.

Re-use graphics (i.e. backgrounds and bullets) all over your site. Since they get cached in the browser, they only have to load once and your sub-pages will load very quickly.

Choosing Graphics

Don't include graphics that you don't really need. Ask yourself if it helps you get your message across.

Use graphics carefully to highlight important elements in your page. Use too many and the important things will get lost.

Don't use graphics just to make your page look better. If you feel you need lots of graphics, then something may be lacking in your overall design and/or content.

Alternate Text

Always include the alternate text attribute in your image tags. It enables people with text-only browsers or browsers with images turned off to see your description of the image.

Text Links

If you are using graphics for links, always include text links as well. This applies especially to when you are using image maps.

Height and Width

Always include height and width specifications in your image tags. They let the browser reserve a space for the image while loading the rest of the page, therefore making the page seem to load faster for your visitors.

Introduction | Content | Color | Layout | Navigation

Graphics | Frames | Maintenance | Links

Shady Oaks

This page hosted by GeoCities.

E-mail: alaithea@poboxes.com.

*No graphics in Shady Oaks are for public use except the E-Trees and customizable backgrounds in The BG Mold.*