Web Graphics: Part 1: Web Graphic Basics
When used properly, graphics can take a web page from drab to dramatic in a few simple steps. And you do not have to be a graphics artist or programming whiz to effectively add web graphics to your site to get a more polished and user friendly web site.
Various Uses for Graphics on Your Website:
Graphics can do a lot for your web site from enhancing the design to enriching the content of your pages. While there are a lot of reasons for using graphics, here are the basic purposes that you will use graphics for the most:
To Create a Mood and Theme: The overall look and feel of your website will be determined by the way the site itself looks, which means that the graphics will play a large role in how your site is perceived. Clean, well placed graphics will give your site a polished and professional feel, where as poorly made, mismatched graphics that are placed in a sloppy fashion will make your site look cheap and unappealing. Background images, borders, buttons, headers, etc. also fall into this category and help to set the mood of your site whether it be warm and friendly or dark and mysterious.
To Organize Information: Simple use of a divider, graphic bullets, tabs, or other graphics can help you to break up the information on your site and organize it in a way that is easy for your visitors to read.
To Illustrate or Enhance Text: Graphics can help to illustrate a point made in the text of your web site by giving readers a visual clue to what the content is saying. Graphs, charts, screen shots, and photographs all work well for this purpose. Just be sure when using graphics for illustration purposes that you place a caption underneath the image to explain its relationship to the text.
To Grab Your Attention: Certain graphics can be used to draw your attention to a particular paragraph or section of your site. An example would be using a graphic of a giant red apostrophe to highlight a critical portion of text.
To Entertain: Sometimes you will simply use a graphic to entertain your visitor who will often be a visually motivated creatures by nature. For example, reading interesting facts about dolphins may be even more enjoyable if photos of various dolphins are included with the text.
Quick Things You Need To Know About Web Graphics:
Format:
There are various formats that graphic files can be saved in. Here is a quick list of the most commonly used file formats:
“jpeg or jpg” ( Joint Photographic Experts Group)-Standard file format that is easy to compress for smaller size but looses quality of the image.
“gif”-(Graphic Information Format)- You retain higher quality during compression but uses a smaller number of colors.
“bmp and png”- Great for digital images. Gives you high quality even during compression; however, they may not be supported by many graphics and web design programs or older web browsers.
Size:
One last thing to keep in mind is the size of the graphic files. While graphics can certainly enhance your web site, if you use a lot of graphics with large file sizes they will slow your site down and make loading difficult. Try and keep file size down to around 30kb per image or less. If your site features a gallery where you want the detail of an image to show, you can use thumbnails that will open another window for viewing the full sized image. You can find many tools online for optimizing your image for the web with little or no effect on the image quality and many web design software programs include an automatic tool to do this so your pages can load quickly and smoothly.
If you place graphics strategically and keep an eye on file size, you can greatly enhance the appearance and functionality of your web site. Do not over clutter your site and use relevant images and you will be on your way to a web site that you can be proud of.
This post is part of the series: All About Web Graphics
Need to know what graphic formats to use on your web site? Check out this three part article series that details the kinds of graphics, and how to choose your format.
