 |  |  |  |  |  |  |  |
|
|
 | | |||||||||
by Mark Bakalor Good web sites require a seamless integration of text and graphics. Here's the
least you need to know about web graphics. Years ago, the Web was little more than black text on a gray background. The infrequent graphic took about three weeks to load, it cost three cents to buy a loaf of bread, and I had to sludge
through seven feet of snow just to get to school. Times have changed, the snow has melted, and the Web has become a place where visitors expect slick, professional graphics. But if you don't know how to take advantage of the Web's potential, history will repeat itself: Your creation will take three weeks to download and a note will be sent home telling your parents that you're just "not living up to your full potential." So, read on, and I'll help prepare you to handle your pixels properly.
Web browsers can only display graphics saved in special file types. The two main graphics formats used are the GIF and JPG. It's important to know the differences and choose the best format for each image, so that pictures are as compact as they can be so they show up on your site visitor's screen as quickly as possible. How long? To figure out how long it will take for someone to see a web page graphic using a 28.8 modem (the most common
speed), divide the file size by two. So a 12K file will usually take about six seconds to download and view. GIF: Graphic Information Format (pronounced "jiff") JPG: Joint Photographic Experts Group JPEG, (pronounced "jay-peg" and often referred to as "JPG")
PNG: Progressive Network Graphics
The most common graphics mistake people make on the Web is to
use the wrong file format for their images. But the choice is really quite simple: That's it. Choosing the right format can ensure that your graphics look good and appear quickly on your visitor's computer. Choosing the wrong format makes your graphics look bad and take forever to
download. So if you can't remember these two simple rules, then consider having them tattooed somewhere on your person. For the sake of discussion, let's separate all possible image content into either photographic or simple categories. A simple image generally consists of text, charts, and diagrams, anything with sharp edges or large bodies of continuous color. A photographic image can be anything from a picture of your pet, Sigmund the
Wonder Dog, to a painting, basically anything with a large amount of noncontinuous colors. As a general rule, "simple" content should be saved as GIF files and "photographic" as JPG files.
But JPG is virtually always more efficient (and better looking) for photos, as seen below. But JPG file sizes and image quality can vary, so you need to understand a little about JPG compression.
Compression and quality will vary from image to image, so it's best to use software that gives you a preview before you save—this allows you to experiment with various levels of compression to choose the best compromise between quality and file size. About JPG compression numbers: Different programs use different numbers for JPG compression, but generally, the higher the number, the higher the quality and the bigger the file size. You may need to look at the on-line help for your software to figure out its JPG settings. Your original graphics files While you must use either GIF or JPG on the Web when you're creating graphics, you should save your original work in a format such as TIF (Tagged Image File Format) or the native format of your graphics program. Why? Because both GIF and JPG compromise image quality for the sake of compression. If deciding individual file types to save your images in isn't the most misunderstood concept in Web design, resolution is. The number of pixels that can be displayed on the screen is referred to as the screen resolution. The greater this resolution, the more pixels that can be displayed, which allows for more to be shown on a monitor at once.
But, and there's this give and take when we deal with on-line design, pixels are smaller at high resolution and detail can be hard to make out on smaller screens. As a rule, graphics for the Web should be no larger than approximately 600 pixels wide as most people view the Web at a screen resolution of 640x480. Graphics wider than 640 won't fully display without the annoying left and right scrolling. When designing for the Web, resolution greater than 72 dpi (dots
per inch) is a waste. There is no benefit to higher resolutions as computer monitors are unable to display them any better. Files will be larger and take longer to download, but the image quality on screen will not be better. Finally, it can be confusing to think about resolution at all—so it's best just to think about the size of your graphic in terms of pixels. When you create a graphic, your graphics program should be able
to tell you how many pixels tall and wide it is—that's what is really important. Each pixel of your on-screen image is displayed on a monitor using a combination of three color signals: red, green, and blue. The intensity of these signals determines its appearance.
On a black and white TV or monitor, pixels have only two possible colors: black or white. That's called "1-bit" because the pixel is either on or off. On color monitors, it gets more complicated. Each pixel can display a number of colors, from 16 (4-bit) to 16 million (24-bit). Most computer monitors today can display 256 colors (8-bit) per pixel. Newer computers routinely display 65,000 (16-bit) to 16 million colors. Because most of your Web visitors' systems display only 256
colors, that's the number of colors you should design for. This doesn't apply to photos, however, which should always be saved as 24-bit JPG files. To learn more about color and Web graphics, see Because images are created using pixel, gridded squares, images that aren't square can appear jagged. The distinct division between pixels is called "alias," so many graphics programs use a technique called "anti-aliasing" to create the illusion of smoothness.
Curved shapes and text should always be anti-aliased to maintain a clean and presentable look. The give and take bares its ugly head, yet again, requiring more colors to create the smooth look. In the image below, you'll see the difference between aliased (left) and anti-aliased (right) text.
The "halo effect" Transparency can only replace one color shade. If your GIF has a background that is much different from where it will appear, making the background transparent will leave what is known as a "halo effect" around the object after anti-aliasing:
To fix this problem, design your graphic over a background color close to your Web page background, export an anti-aliased version, and then define the background color as transparent.
Knowing your limitations Good graphics on the Web are always a compromise between how good a picture looks and how long it takes your Web visitor to download and see it. But if you keep this in mind, you can create fast, good-looking graphics.
To read more about graphic software, what they do, and which one would be best for what you´re doing,
Illustration: Metropolis by Rob Porazinski from www.artville.com |
|  |
|
|
| |
 |
Web Graphics Basics 
The first step in understanding how to create and manage graphics for the Web is understanding the graphical image itself. Electronic images are made up of thousands of tiny colored dots called "pixels." The pixels are so small they can't be detected individually by the human eye, so they create the illusion of a continuous image. This is how all images you see
on your computer (and TV) work. Surely you held a magnifying glass up to the TV screen when you were a child. If not, go and try it right now. Some screens have dots, some have lines, but the principle is the same.
GIF files can be animated. Just like motion pictures, only much
simpler, animated GIFs simulate motion using a series of individual images. 
The images in this paragraph demonstrate the give and take struggle between file size and image quality that you will find yourself dealing with often. This image is correctly saved as a GIF in the left image and incorrectly on the right as a JPG. They are equal in file size, but it is easy to see which wins out in the quality race--GIF is better for non-photographic images. 
