Web Graphics for Beginners

Home > Build > Graphics > Web Graphics for Beginners

by Aaron West

One can be the best HTML coder out there, know the ins and outs of Javascript, write wonderful CGI scripts, and still have an ugly, boring site. We've all seen it before. A site that is well organized, efficient, resourceful, but flat out ugly. Many assume that the code (or the program as the case might be) is all one needs to put up a beautiful site. That is half the battle, but far from a complete victory. Graphics are what make or break a site.

Learning how to use web graphics can almost be as time consuming and as frustrating as learning the code. For some people, web graphics are far more difficult than learning code, simply because it's a different logic.

This tutorial is for those people. For the people who wish to push their sites over the 'edge', and don't want to spend one unnecessary second getting to that point. This is for those who don't want to find the differences between a GIF and a JPEG through trial and error. We'll first discuss web supported graphic file formats, and will proceed eventually to resolutions, scaling, trimming file size, useful tools and we'll cover common problems as we go.

Raster vs. Vector: How Graphics Work

There are two kinds of graphic formats used on the web. They can be categorized under 'raster' and 'vector.'

Raster, or Bitmap as it's commonly referred to, is a graphic produced by many small dots, or pixels. Together, a collection of dots will compose the graphic which will trick the eye into thinking the graphic has form. The more dots the graphic has, the better it looks. If the graphic doesn't have enough dots, the quality will appear poor, and sometimes will be unrecognizeable.

You've probably already seen an example of this. It's called pixelation. This is when a graphic has so few dots that the eye can discern them. A good way to demonstrate this would be to print the page you're reading now. The W3Nation graphic above, which looks clear on the screen, will look poor and pixelated on print. It would look horrible if were scaled to twice it's current size. We'll discuss this in more detail soon.

Vector graphics are created by a series of calculated equations. Let's suppose you have a square, one-color bitmap graphic. That graphic would actually be many dots that are identically colored, and each dot would inflate the file size. With a vector graphic, the color would be defined by a term of measurement, in this case the dimensions of the square. The underlying code in the graphic format would tell the viewer that the area between those dimensions is a specified color. This makes for a clearer view, as well as a smaller file.

Some examples of vector graphics are Macromedia Flash and Shockwave, two increasingly popular web graphic and animation formats. Also programs such as Adobe Illustrator, Macromedia Freehand and Corel Draw can be used to create vector graphics. These programs are also useful for creating graphics that will eventually become bitmaps.

Which is better? That truly depends on what you are attempting to do. A full color photograph would obviously not work as a vector graphic, while it could be created quickly and effectively as a bitmap graphic. A cartoon or illustration would look far better in a vector format than bitmap, plus be a great deal smaller. There are pros and cons to both.

Unfortunately, Vector graphics are not supported entirely on the web. Flash and Shockwave graphics are now accepted on the web by most surfers, yet still not all (approximately 70%). They are built into some browsers, but still not all. As popular as they are, they still can isolate a percentage of your audience. Currently the W3 Consortium (W3C), the organization who decides what's what on the web, is working on creating a vector standard built around XML. We might see that within a year or two. In the meantime, bitmap graphics are the safest route to widespread compatibility.

For this reason, we will focus more on bitmap graphics than on vector.

Part 2: Screen vs. Print